Additional reftest for mask-image

RESOLVED FIXED in Firefox 48

Status

()

RESOLVED FIXED
3 years ago
3 years ago

People

(Reporter: u459114, Assigned: bmo)

Tracking

(Blocks: 1 bug)

unspecified
mozilla48
Points:
---
Dependency tree / graph

Firefox Tracking Flags

(firefox48 fixed)

Details

Attachments

(6 attachments, 27 obsolete attachments)

28.75 KB, patch
bmo
: review+
Details | Diff | Splinter Review
10.31 KB, patch
bmo
: review+
Details | Diff | Splinter Review
4.04 KB, patch
bmo
: review+
Details | Diff | Splinter Review
10.01 KB, patch
bmo
: review+
Details | Diff | Splinter Review
8.19 KB, patch
bmo
: review+
Details | Diff | Splinter Review
35.46 KB, patch
bmo
: review+
Details | Diff | Splinter Review
(Reporter)

Description

3 years ago
In Bug 686281, I only construct mask-composition reftest.
We still need more test case for all mask-image longhand properties
* mask-image
* mask-repeat
* mask-position
* mask-clip
* mask-origin
* mask-size

mask-mode reftest should be done in bug 1228354
(Reporter)

Updated

3 years ago
Blocks: 1251161
(Assignee)

Comment 1

3 years ago
I'll be working on this bug to create relevant wpt test cases for mask-* properties.
Assignee: cku → aschen
Status: NEW → ASSIGNED
(Assignee)

Comment 3

3 years ago
Created attachment 8732137 [details]
try: -b do -p all -u all -t none

MozReview-Commit-ID: DPGY6QurBPI
(Assignee)

Updated

3 years ago
Attachment #8732137 - Attachment is obsolete: true
Attachment #8732137 - Attachment is patch: false
(Assignee)

Comment 4

3 years ago
Created attachment 8732158 [details] [diff] [review]
Update image resources for test

MozReview-Commit-ID: GWKCmJXVjOc
(Assignee)

Comment 5

3 years ago
Created attachment 8732160 [details] [diff] [review]
Part 1. Add mask-image property reftest

MozReview-Commit-ID: 4hXAzF5hL2x
(Assignee)

Comment 6

3 years ago
Created attachment 8732161 [details] [diff] [review]
Part 2. Add mask-clip property reftest

MozReview-Commit-ID: 23FKHj76Tnn
(Assignee)

Comment 7

3 years ago
Created attachment 8732163 [details] [diff] [review]
Part 3. Add mask-position property reftest

MozReview-Commit-ID: FzXdZqOL7Zr
(Assignee)

Comment 8

3 years ago
Created attachment 8732164 [details] [diff] [review]
Part 4. Add mask-repeat property reftest

MozReview-Commit-ID: 4sNQVhY4IiJ
(Assignee)

Comment 9

3 years ago
Created attachment 8732166 [details] [diff] [review]
Part 5. Add mask-origin property reftest

MozReview-Commit-ID: GglpnhldUv5
(Assignee)

Comment 10

3 years ago
Created attachment 8732167 [details] [diff] [review]
Part 6. Add mask-size property reftest

MozReview-Commit-ID: HRidwPQrBch
(Assignee)

Comment 12

3 years ago
Created attachment 8732248 [details] [diff] [review]
Part 1. Add mask-image property reftest

MozReview-Commit-ID: Jz3MwxZPqEI
(Assignee)

Updated

3 years ago
Attachment #8732160 - Attachment is obsolete: true
(Assignee)

Comment 13

3 years ago
Created attachment 8732250 [details] [diff] [review]
Part 2. Add mask-clip property reftest

MozReview-Commit-ID: BZyfy7p760c
(Assignee)

Updated

3 years ago
Attachment #8732161 - Attachment is obsolete: true
(Assignee)

Comment 14

3 years ago
Created attachment 8732251 [details] [diff] [review]
Part 3. Add mask-position property reftest

MozReview-Commit-ID: 4Mi6ALLXrcL
(Assignee)

Updated

3 years ago
Attachment #8732163 - Attachment is obsolete: true
(Assignee)

Comment 15

3 years ago
Created attachment 8732252 [details] [diff] [review]
Part 4. Add mask-repeat property reftest

MozReview-Commit-ID: KIiZVVOzJT3
(Assignee)

Updated

3 years ago
Attachment #8732164 - Attachment is obsolete: true
(Assignee)

Comment 16

3 years ago
Created attachment 8732253 [details] [diff] [review]
Part 5. Add mask-origin property reftest

MozReview-Commit-ID: 4CGQMOlKq2n
(Assignee)

Updated

3 years ago
Attachment #8732166 - Attachment is obsolete: true
(Assignee)

Comment 17

3 years ago
Created attachment 8732254 [details] [diff] [review]
Part 6. Add mask-size property reftest

MozReview-Commit-ID: ZlyQ5oP4CU
(Assignee)

Updated

3 years ago
Attachment #8732167 - Attachment is obsolete: true
(Assignee)

Comment 18

3 years ago
Created attachment 8732255 [details] [diff] [review]
Part 7. Add test cases to reftest.list

MozReview-Commit-ID: DQX0crMFOD0
(Assignee)

Comment 19

3 years ago
Created attachment 8733296 [details] [diff] [review]
Part 4. Add mask-repeat property reftest

MozReview-Commit-ID: 2XkDiCKql1w
(Assignee)

Updated

3 years ago
Attachment #8732252 - Attachment is obsolete: true
(Assignee)

Comment 20

3 years ago
Created attachment 8733297 [details] [diff] [review]
Part 5. Add mask-origin property reftest

MozReview-Commit-ID: HhVP7hnta4k
(Assignee)

Updated

3 years ago
Attachment #8732253 - Attachment is obsolete: true
(Assignee)

Comment 21

3 years ago
Created attachment 8733298 [details] [diff] [review]
Part 7. Add test cases to reftest.list

MozReview-Commit-ID: 8KI0kWMIr3H
(Assignee)

Updated

3 years ago
Attachment #8732255 - Attachment is obsolete: true
(Assignee)

Comment 22

3 years ago
Created attachment 8733328 [details] [diff] [review]
Update image resources for test

MozReview-Commit-ID: DpV0GZFOslj
(Assignee)

Updated

3 years ago
Attachment #8732158 - Attachment is obsolete: true
(Assignee)

Comment 23

3 years ago
Created attachment 8733329 [details] [diff] [review]
Update image resources for test

MozReview-Commit-ID: DpV0GZFOslj
(Assignee)

Updated

3 years ago
Attachment #8733328 - Attachment is obsolete: true
(Assignee)

Updated

3 years ago
Attachment #8732248 - Flags: review?(dbaron)
(Assignee)

Updated

3 years ago
Attachment #8732250 - Flags: review?(dbaron)
(Assignee)

Updated

3 years ago
Attachment #8732251 - Flags: review?(dbaron)
(Assignee)

Updated

3 years ago
Attachment #8732254 - Flags: review?(dbaron)
(Assignee)

Updated

3 years ago
Attachment #8733296 - Flags: review?(dbaron)
(Assignee)

Updated

3 years ago
Attachment #8733297 - Flags: review?(dbaron)
(Assignee)

Updated

3 years ago
Attachment #8733298 - Flags: review?(dbaron)
(Assignee)

Updated

3 years ago
Attachment #8733329 - Flags: review?(dbaron)
Comment on attachment 8732248 [details] [diff] [review]
Part 1. Add mask-image property reftest

In mask-mage-1-ref.html, please fix the "No newline at end of file".

In all of the mask-image-1* tests, please change the background-color
from blue to purple, so that it's a different color from the color
in the mask-image (since that color shouldn't matter).

Furthermore, mask-image-1c doesn't test what it claims to be testing;
there's no mask element in the image in question.  Please fix that.

(The SVG images in question also have the odd characteristic that they
only really make sense at 100x100, since they have some dimensions in
pixels (y="50") and the rest in percentages.)

In mask-image-2, could you make the two gradients use different colors
as well.

You also need to add the tests to a reftest.list file, or they
won't get run.
Attachment #8732248 - Flags: review?(dbaron) → review-
Comment on attachment 8732250 [details] [diff] [review]
Part 2. Add mask-clip property reftest

It would probably be nice to use padding, margin, and border
that are asymmetric, e.g.:
  margin: 1px 2px 3px 4px;
  border: solid transparent;
  border-width: 8px 2px 4px 6px;
  padding: 6px 9px 12px 3px;
although I wouldn't insist on it.

You should, again, use a background-color that's different from
the color in the image.

You also need to add the tests to the reftest.list file, or they won't
be run.

Also, is there a bug on implementing the other values of
mask-clip/origin that aren't values of background-clip/origin?  There
should be -- and it should *maybe* block the bug on shipping CSS
masking, depending on whether other implementations support them.

>+    <meta name="assert" content="Test checks whether mask-clip can work correctly or not.">

This should be a little more specific -- how about:

  border-box, padding-box, and content-box values of mask-clip should
  clip to the appropriate boxes.

r=dbaron with that
Attachment #8732250 - Flags: review?(dbaron) → review+
Comment on attachment 8732251 [details] [diff] [review]
Part 3. Add mask-position property reftest

Again, you need to add to the reftest.list for the tests to be run.

for mask-position-1*:

  please make the divs be 125x125 pixels so that the
  entire test fits within a 600x600 pixel space (which I believe
  is the size we agreed for CSS WG reftests).

  For the same tests, it would also probably be good if the reference
  were composed of colored divs rather than background-images, since
  this test won't catch a bug that breaks mask-position and
  background-position equally.

  And, again, it would be good if the color of the background-color
  were different from the color in the mask-image.

for mask-position-{2*,3*,4*,5*,6*,7*}:

  And, again, it would be good if the color of the background-color
  were different from the color in the mask-image.

  The reference should probably use a background-color rather than
  a background-image, both to make the former point easier, and to
  make the test and reference go through somewhat more different
  codepaths (as for my comment on mask-position-1*.

It would probably be good to also have a variant of test 5 that:
 (1) has the two mask images overlapping
 (2) uses not-fully-opaque mask images
(especially given that you don't have any mask-composite reftests...
though you should probably add those too!).  That should probably
be a separate patch (so it can be reviewed separately).

r=dbaron with that
Attachment #8732251 - Flags: review?(dbaron) → review+
Comment on attachment 8733296 [details] [diff] [review]
Part 4. Add mask-repeat property reftest

Again, you need to add to the reftest.list for the tests to be run.
(Do the tests with mask-repeat: space even pass?)

It would probably be good to rename the "float-*" ids to something
like "pos-*", since they're not floats.

mask-repeat-2 and mask-repeat-3 could probably use a background-color
different from the image color.

The ids in mask-repeat-3 should be called "round*" rather than
"space*".

r=dbaron with that

It might be nice to do the references for mask-repeat-1 without
background-image, but I'm ok with leaving them as they are.
Attachment #8733296 - Flags: review?(dbaron) → review+
Comment on attachment 8733298 [details] [diff] [review]
Part 7. Add test cases to reftest.list

This should be incorporated into the relevant patches for proper review and proper bisection.
Attachment #8733298 - Flags: review?(dbaron) → review-
Comment on attachment 8733329 [details] [diff] [review]
Update image resources for test

This should be incorporated into the relevant patches for proper review and proper bisection.
Attachment #8733329 - Flags: review?(dbaron) → review-
Comment on attachment 8733297 [details] [diff] [review]
Part 5. Add mask-origin property reftest

Again, you need to add to the reftest.list for the tests to be run.

Like for mask-clip, it would probably be good to use values for
padding and border than vary more.

Again, it would be nice to make the reference without background
and background-origin, but just using an inner div instead.

And, again, it would be good to use a different color background
from the color of the mask.


I didn't quite finish reviewing this one, but given the other comments, it's probably best to wait for a new set of patches before finishing.
Attachment #8733297 - Flags: review?(dbaron)
Comment on attachment 8732254 [details] [diff] [review]
Part 6. Add mask-size property reftest

Would like to wait for a new set of patches prior to finishing review.
Attachment #8732254 - Flags: review?(dbaron)
(Assignee)

Comment 32

3 years ago
(In reply to David Baron [:dbaron] ⌚️UTC (less responsive until April 4) from comment #29)
> Comment on attachment 8733329 [details] [diff] [review]
> Update image resources for test
> 
> This should be incorporated into the relevant patches for proper review and
> proper bisection.

Thank you for taking time to review the patches. I'll address your comments carefully and update the patches accordingly.
For r- patch, I will re-submit the patch with fixes. r+ patches with comments, I'll create a new patch and incorporate all needed fixes. Thanks.
(Assignee)

Comment 34

3 years ago
Comment on attachment 8733298 [details] [diff] [review]
Part 7. Add test cases to reftest.list

incorporated into the relevant patches.
Attachment #8733298 - Attachment is obsolete: true
(Assignee)

Comment 35

3 years ago
Comment on attachment 8733329 [details] [diff] [review]
Update image resources for test

incorporated into the relevant patches.
Attachment #8733329 - Attachment is obsolete: true
(Assignee)

Comment 36

3 years ago
Created attachment 8737455 [details] [diff] [review]
Part 1. Add mask-image property reftest

MozReview-Commit-ID: CvjgVprfoaw
Attachment #8737455 - Flags: review?(dbaron)
(Assignee)

Updated

3 years ago
Attachment #8732248 - Attachment is obsolete: true
(Assignee)

Comment 37

3 years ago
Created attachment 8737456 [details] [diff] [review]
Part 2. Add mask-clip property reftest

MozReview-Commit-ID: 3Gva7UpBDsd
Attachment #8737456 - Flags: review?(dbaron)
(Assignee)

Updated

3 years ago
Attachment #8732250 - Attachment is obsolete: true
(Assignee)

Comment 38

3 years ago
Created attachment 8737457 [details] [diff] [review]
Part 3. Add mask-position property reftest. r=dbaron

MozReview-Commit-ID: 5ViQaPZ5BI
(Assignee)

Updated

3 years ago
Attachment #8732251 - Attachment is obsolete: true
(Assignee)

Comment 39

3 years ago
Created attachment 8737458 [details] [diff] [review]
Part 4. Add mask-repeat property reftest. r=dbaron

MozReview-Commit-ID: 7DO9BmHhx8A
(Assignee)

Updated

3 years ago
Attachment #8733296 - Attachment is obsolete: true
(Assignee)

Comment 40

3 years ago
Created attachment 8737459 [details] [diff] [review]
Part 5. Add mask-origin property reftest

MozReview-Commit-ID: BFHnpSnyDuo
Attachment #8737459 - Flags: review?(dbaron)
(Assignee)

Updated

3 years ago
Attachment #8733297 - Attachment is obsolete: true
(Assignee)

Comment 41

3 years ago
Created attachment 8737460 [details] [diff] [review]
Part 6. Add mask-size property reftest

MozReview-Commit-ID: JXuhpre04Zz
Attachment #8737460 - Flags: review?(dbaron)
(Assignee)

Updated

3 years ago
Attachment #8732254 - Attachment is obsolete: true
(Assignee)

Comment 42

3 years ago
Created attachment 8737461 [details] [diff] [review]
Part 2. Add mask-clip property reftest. r=dbaron

MozReview-Commit-ID: 3Gva7UpBDsd
(Assignee)

Updated

3 years ago
Attachment #8737456 - Attachment is obsolete: true
Attachment #8737456 - Flags: review?(dbaron)
(Assignee)

Comment 43

3 years ago
(In reply to David Baron [:dbaron] ⌚️UTC+1 (less responsive until April 4) from comment #26)
> Comment on attachment 8732251 [details] [diff] [review]
> Part 3. Add mask-position property reftest
> 
> Again, you need to add to the reftest.list for the tests to be run.
> 
> for mask-position-1*:
> 
>   please make the divs be 125x125 pixels so that the
>   entire test fits within a 600x600 pixel space (which I believe
>   is the size we agreed for CSS WG reftests).
> 
>   For the same tests, it would also probably be good if the reference
>   were composed of colored divs rather than background-images, since
>   this test won't catch a bug that breaks mask-position and
>   background-position equally.
> 
>   And, again, it would be good if the color of the background-color
>   were different from the color in the mask-image.
> 
> for mask-position-{2*,3*,4*,5*,6*,7*}:
> 
>   And, again, it would be good if the color of the background-color
>   were different from the color in the mask-image.
> 
>   The reference should probably use a background-color rather than
>   a background-image, both to make the former point easier, and to
>   make the test and reference go through somewhat more different
>   codepaths (as for my comment on mask-position-1*.
> 
Already address the review feedback on updated patch. Please help to review again. Thanks.

> It would probably be good to also have a variant of test 5 that:
>  (1) has the two mask images overlapping
>  (2) uses not-fully-opaque mask images
> (especially given that you don't have any mask-composite reftests...
> though you should probably add those too!).  That should probably
> be a separate patch (so it can be reviewed separately).

mask-composite reftests should be already carried out along with bug 686281. I'll create more relevant test cases for mask-composite if you think its scope is insufficient.
Comment on attachment 8737455 [details] [diff] [review]
Part 1. Add mask-image property reftest


>+      div.mask-by-svg-mask {
>+        mask-image: url(support/transparent-100x50-blue-100x50.svg#mask);
>+      }

Instead of modifying the existing file to add the mask, could you put the mask def in its own file?  Otherwise things are rather confusing, and could even end up failing to test what we want to test.

>+  <defs>
>+    <mask id="mask" mask-type="alpha">
>+      <rect x="0" y="0"  width="100" height="50" fill-opacity="0"/>
>+      <rect x="0" y="50" width="100" height="50" fill-opacity="1"/>
>+    </mask>

When you put this in its own file, it should probably use %s on the x/y/width/height.

(twice, if needed, although I'm not sure why you added to two files)

>-fails == mask-mode-a.html mask-mode-ref.html # bug 1251161
>-fails == mask-mode-b.html mask-mode-ref.html # bug 1251161
>+
>+# mask-mode test cases
>+fails == mask-mode-a.html mask-mode-ref.html # bug 1228354
>+fails == mask-mode-b.html mask-mode-ref.html # bug 1228354

This bug number change doesn't seem to make sense.

You should also have a bug number for the failures of the tests you're adding.

r=dbaron with that
Attachment #8737455 - Flags: review?(dbaron) → review+
(Assignee)

Comment 45

3 years ago
Created attachment 8740787 [details] [diff] [review]
Part 1. Add mask-image property reftest

updated patch based on review comment 44.
(Assignee)

Updated

3 years ago
Attachment #8737455 - Attachment is obsolete: true
(Assignee)

Comment 46

3 years ago
Created attachment 8740789 [details] [diff] [review]
Part 1. Add mask-image property reftest

MozReview-Commit-ID: CvjgVprfoaw
(Assignee)

Updated

3 years ago
Attachment #8740787 - Attachment is obsolete: true
(Assignee)

Comment 47

3 years ago
Created attachment 8740790 [details] [diff] [review]
Part 1. Add mask-image property reftest. r=dbaron

update summary, no idea why bzexport fails to do that...
(Assignee)

Updated

3 years ago
Attachment #8740789 - Attachment is obsolete: true
(Assignee)

Comment 48

3 years ago
Comment on attachment 8740790 [details] [diff] [review]
Part 1. Add mask-image property reftest. r=dbaron

Carry r+:dbaron
Attachment #8740790 - Attachment description: Part 1. Add mask-image property reftest → Part 1. Add mask-image property reftest. r=dbaron
Attachment #8740790 - Flags: review+
(Assignee)

Comment 49

3 years ago
Comment on attachment 8737461 [details] [diff] [review]
Part 2. Add mask-clip property reftest. r=dbaron

carry r+:dbaron
Attachment #8737461 - Flags: review+
(Assignee)

Comment 50

3 years ago
Comment on attachment 8737457 [details] [diff] [review]
Part 3. Add mask-position property reftest. r=dbaron

carry r+:dbaron
Attachment #8737457 - Flags: review+
(Assignee)

Comment 51

3 years ago
Comment on attachment 8737458 [details] [diff] [review]
Part 4. Add mask-repeat property reftest. r=dbaron

carry r+:dbaron
Attachment #8737458 - Flags: review+
(Assignee)

Comment 52

3 years ago
(In reply to David Baron [:dbaron] ⌚️UTC-7 from comment #44)
> Comment on attachment 8737455 [details] [diff] [review]
> Part 1. Add mask-image property reftest
> 
> 
> >+      div.mask-by-svg-mask {
> >+        mask-image: url(support/transparent-100x50-blue-100x50.svg#mask);
> >+      }
> 
> Instead of modifying the existing file to add the mask, could you put the
> mask def in its own file?  Otherwise things are rather confusing, and could
> even end up failing to test what we want to test.
> 
> >+  <defs>
> >+    <mask id="mask" mask-type="alpha">
> >+      <rect x="0" y="0"  width="100" height="50" fill-opacity="0"/>
> >+      <rect x="0" y="50" width="100" height="50" fill-opacity="1"/>
> >+    </mask>
> 
> When you put this in its own file, it should probably use %s on the
> x/y/width/height.
> 
> (twice, if needed, although I'm not sure why you added to two files)
> 
Already put the mask def to its own file. However, I found that using percentage unit in mask element is not working. Not sure if it's a known bug of SVG support or my bad. I'll keep it as-is first and then come back to this issue later. 

> >-fails == mask-mode-a.html mask-mode-ref.html # bug 1251161
> >-fails == mask-mode-b.html mask-mode-ref.html # bug 1251161
> >+
> >+# mask-mode test cases
> >+fails == mask-mode-a.html mask-mode-ref.html # bug 1228354
> >+fails == mask-mode-b.html mask-mode-ref.html # bug 1228354
> 
> This bug number change doesn't seem to make sense.
> 
> You should also have a bug number for the failures of the tests you're
> adding.
> 
> r=dbaron with that
The failures are meant to be since mask shorthand properties support is not enabled yet. Tracked in bug1251161.
Comment on attachment 8737459 [details] [diff] [review]
Part 5. Add mask-origin property reftest

>+fails == mask-origin-1.html mask-origin-1-ref.html # bug 1258626

This bug doesn't seem like it explains why mask-origin-1 would fail, since it doesn't use mask-repeat: space or mask-repeat: round.


r=dbaron if you replace that with a bug number that actually explains the failures
Attachment #8737459 - Flags: review?(dbaron) → review+
(In reply to Astley Chen [:astley] (UTC+8) from comment #52)
> (In reply to David Baron [:dbaron] ⌚️UTC-7 from comment #44)
> > Comment on attachment 8737455 [details] [diff] [review]
> > Part 1. Add mask-image property reftest
> > 
> > 
> > >+      div.mask-by-svg-mask {
> > >+        mask-image: url(support/transparent-100x50-blue-100x50.svg#mask);
> > >+      }
> > 
> > Instead of modifying the existing file to add the mask, could you put the
> > mask def in its own file?  Otherwise things are rather confusing, and could
> > even end up failing to test what we want to test.
> > 
> > >+  <defs>
> > >+    <mask id="mask" mask-type="alpha">
> > >+      <rect x="0" y="0"  width="100" height="50" fill-opacity="0"/>
> > >+      <rect x="0" y="50" width="100" height="50" fill-opacity="1"/>
> > >+    </mask>
> > 
> > When you put this in its own file, it should probably use %s on the
> > x/y/width/height.
> > 
> > (twice, if needed, although I'm not sure why you added to two files)
> > 
> Already put the mask def to its own file. However, I found that using
> percentage unit in mask element is not working. Not sure if it's a known bug
> of SVG support or my bad. I'll keep it as-is first and then come back to
> this issue later. 

I'm not sure quite what you mean you're going to do here, but I would strongly prefer that you not add a mask element to these existing files.
Comment on attachment 8737460 [details] [diff] [review]
Part 6. Add mask-size property reftest

Would be good to annotate the manifest with why the tests fail (appropriate bug numbers), which might just be that the feature is enabled at compile time.

(Hopefully many of these tests pass if you push a try run with the feature enabled, by enabling the compile-time flag added in bug 1243734?)
Attachment #8737460 - Flags: review?(dbaron) → review+
(Assignee)

Comment 57

3 years ago
Created attachment 8741617 [details] [diff] [review]
Part 1. Add mask-image property reftest. r=dbaron

addressed comment 54 and elaborate description in reftest.list
(Assignee)

Updated

3 years ago
Attachment #8740790 - Attachment is obsolete: true
(Assignee)

Comment 58

3 years ago
Created attachment 8741618 [details] [diff] [review]
Part 5. Add mask-origin property reftest. r=dbaron

addressed comment 53 and correct bug number
(Assignee)

Updated

3 years ago
Attachment #8737459 - Attachment is obsolete: true
(Assignee)

Comment 59

3 years ago
Created attachment 8741619 [details] [diff] [review]
Part 6. Add mask-size property reftest. r=dbaron

addressed comment 55. annotation added in part 1 patch.
(Assignee)

Updated

3 years ago
Attachment #8737460 - Attachment is obsolete: true
(Assignee)

Comment 60

3 years ago
Comment on attachment 8741617 [details] [diff] [review]
Part 1. Add mask-image property reftest. r=dbaron

># HG changeset patch
># User Astley Chen <aschen@mozilla.com>
># Date 1460604224 -28800
>#      Thu Apr 14 11:23:44 2016 +0800
># Node ID 9f9347d78e23097c47896ece700a45951e3d3280
># Parent  8630367f5e3f750e23cd04f309a1b279ff07e4a2
>Bug 1243675 - Part 1. Add mask-image property reftest. r=dbaron
>
>MozReview-Commit-ID: CvjgVprfoaw
>
>diff --git a/layout/reftests/w3c-css/submitted/masking/mask-image-1-ref.html b/layout/reftests/w3c-css/submitted/masking/mask-image-1-ref.html
>new file mode 100644
>--- /dev/null
>+++ b/layout/reftests/w3c-css/submitted/masking/mask-image-1-ref.html
>@@ -0,0 +1,19 @@
>+<!DOCTYPE html>
>+<html>
>+  <head>
>+    <meta charset="utf-8">
>+    <title>CSS Masking: mask-image: mask layer image</title>
>+    <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com">
>+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
>+    <style type="text/css">
>+      div {
>+        background-color: purple;
>+        width: 100px;
>+        height: 50px;
>+      }
>+    </style>
>+  </head>
>+  <body>
>+    <div></div>
>+  </body>
>+</html>
>diff --git a/layout/reftests/w3c-css/submitted/masking/mask-image-1a.html b/layout/reftests/w3c-css/submitted/masking/mask-image-1a.html
>new file mode 100644
>--- /dev/null
>+++ b/layout/reftests/w3c-css/submitted/masking/mask-image-1a.html
>@@ -0,0 +1,26 @@
>+<!DOCTYPE html>
>+<html>
>+  <head>
>+    <meta charset="utf-8">
>+    <title>CSS Masking: mask-image: mask layer image</title>
>+    <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com">
>+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
>+    <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-mask-image">
>+    <link rel="match" href="mask-image-1-ref.html">
>+    <meta name="assert" content="Test checks whether image as mask layer works correctly or not.">
>+    <style type="text/css">
>+      div {
>+        background-color: purple;
>+        width: 100px;
>+        height: 100px;
>+      }
>+
>+      div.mask-by-png {
>+        mask-image: url(support/transparent-100x50-blue-100x50.png);
>+      }
>+    </style>
>+  </head>
>+  <body>
>+    <div class="mask-by-png"></div>
>+  </body>
>+</html>
>diff --git a/layout/reftests/w3c-css/submitted/masking/mask-image-1b.html b/layout/reftests/w3c-css/submitted/masking/mask-image-1b.html
>new file mode 100644
>--- /dev/null
>+++ b/layout/reftests/w3c-css/submitted/masking/mask-image-1b.html
>@@ -0,0 +1,26 @@
>+<!DOCTYPE html>
>+<html>
>+  <head>
>+    <meta charset="utf-8">
>+    <title>CSS Masking: mask-image: mask layer image</title>
>+    <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com">
>+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
>+    <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-mask-image">
>+    <link rel="match" href="mask-image-1-ref.html">
>+    <meta name="assert" content="Test checks whether SVG image as mask layer works correctly or not.">
>+    <style type="text/css">
>+      div {
>+        background-color: purple;
>+        width: 100px;
>+        height: 100px;
>+      }
>+
>+      div.mask-by-svg {
>+        mask-image: url(support/transparent-100x50-blue-100x50.svg);
>+      }
>+    </style>
>+  </head>
>+  <body>
>+    <div class="mask-by-svg"></div>
>+  </body>
>+</html>
>diff --git a/layout/reftests/w3c-css/submitted/masking/mask-image-1c.html b/layout/reftests/w3c-css/submitted/masking/mask-image-1c.html
>new file mode 100644
>--- /dev/null
>+++ b/layout/reftests/w3c-css/submitted/masking/mask-image-1c.html
>@@ -0,0 +1,26 @@
>+<!DOCTYPE html>
>+<html>
>+  <head>
>+    <meta charset="utf-8">
>+    <title>CSS Masking: mask-image: mask layer image</title>
>+    <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com">
>+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
>+    <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-mask-image">
>+    <link rel="match" href="mask-image-1-ref.html">
>+    <meta name="assert" content="Test checks whether SVG mask element as mask layer works correctly or not.">
>+    <style type="text/css">
>+      div {
>+        background-color: purple;
>+        width: 100px;
>+        height: 100px;
>+      }
>+
>+      div.mask-by-svg-mask {
>+        mask-image: url(support/mask-half-transparent-100x100.svg#mask);
>+      }
>+    </style>
>+  </head>
>+  <body>
>+    <div class="mask-by-svg-mask"></div>
>+  </body>
>+</html>
>diff --git a/layout/reftests/w3c-css/submitted/masking/mask-image-2-ref.html b/layout/reftests/w3c-css/submitted/masking/mask-image-2-ref.html
>new file mode 100644
>--- /dev/null
>+++ b/layout/reftests/w3c-css/submitted/masking/mask-image-2-ref.html
>@@ -0,0 +1,20 @@
>+<!DOCTYPE html>
>+<html>
>+  <head>
>+    <meta charset="utf-8">
>+    <title>CSS Masking: mask-image: mask layer image</title>
>+    <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com">
>+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
>+    <style type="text/css">
>+      div {
>+        background-image: linear-gradient(rgba(128,0,128,0), rgba(128,0,128,1));
>+        width: 100px;
>+        height: 100px;
>+      }
>+    </style>
>+  </head>
>+  <body>
>+    <div></div>
>+    <div></div>
>+  </body>
>+</html>
>diff --git a/layout/reftests/w3c-css/submitted/masking/mask-image-2.html b/layout/reftests/w3c-css/submitted/masking/mask-image-2.html
>new file mode 100644
>--- /dev/null
>+++ b/layout/reftests/w3c-css/submitted/masking/mask-image-2.html
>@@ -0,0 +1,31 @@
>+<!DOCTYPE html>
>+<html>
>+  <head>
>+    <meta charset="utf-8">
>+    <title>CSS Masking: mask-image: mask layer image</title>
>+    <link rel="author" title="Astley Chen" href="mailto:aschen@mozilla.com">
>+    <link rel="author" title="Mozilla" href="https://www.mozilla.org">
>+    <link rel="help" href="https://www.w3.org/TR/css-masking-1/#the-mask-image">
>+    <link rel="match" href="mask-image-2-ref.html">
>+    <meta name="assert" content="Test checks whether gradient CSS image as mask layer works correctly or not.">
>+    <style type="text/css">
>+      div {
>+        background-color: purple;
>+        width: 100px;
>+        height: 100px;
>+      }
>+
>+      div.mask-by-gradient-1 {
>+        mask-image: linear-gradient(rgba(0,0,255,0), rgba(0,0,255,1)); /* blue gradient mask */
>+      }
>+
>+      div.mask-by-gradient-2 {
>+        mask-image: linear-gradient(rgba(255,0,0,0), rgba(255,0,0,1)); /* red gradient mask */
>+      }
>+    </style>
>+  </head>
>+  <body>
>+    <div class="mask-by-gradient-1"></div>
>+    <div class="mask-by-gradient-2"></div>
>+  </body>
>+</html>
>diff --git a/layout/reftests/w3c-css/submitted/masking/reftest.list b/layout/reftests/w3c-css/submitted/masking/reftest.list
>--- a/layout/reftests/w3c-css/submitted/masking/reftest.list
>+++ b/layout/reftests/w3c-css/submitted/masking/reftest.list
>@@ -1,6 +1,19 @@
>-fails == mask-composite-1a.html mask-composite-1-ref.html # bug 1251161
>-fails == mask-composite-1b.html mask-composite-1-ref.html # bug 1251161
>-fails fails-if(cocoaWidget) == mask-composite-2a.html mask-composite-2-ref.html # bug 1231643;  bug 1251161
>-fails fails-if(cocoaWidget) == mask-composite-2b.html mask-composite-2-ref.html # bug 1231643; bug 1251161
>-fails == mask-mode-a.html mask-mode-ref.html # bug 1251161
>-fails == mask-mode-b.html mask-mode-ref.html # bug 1251161
>+# All mask properties test cases are meant to be failed
>+# until bug 1251161 is fixed, which means enabling mask shorthand.
>+# To enable it in compile time, refer to bug 1243734
>+
>+# mask-composite test cases
>+fails == mask-composite-1a.html mask-composite-1-ref.html
>+fails == mask-composite-1b.html mask-composite-1-ref.html
>+fails fails-if(cocoaWidget) == mask-composite-2a.html mask-composite-2-ref.html # bug 1231643;
>+fails fails-if(cocoaWidget) == mask-composite-2b.html mask-composite-2-ref.html # bug 1231643;
>+
>+# mask-mode test cases
>+fails == mask-mode-a.html mask-mode-ref.html
>+fails == mask-mode-b.html mask-mode-ref.html
>+
>+# mask-image test cases
>+fails == mask-image-1a.html mask-image-1-ref.html
>+fails == mask-image-1b.html mask-image-1-ref.html
>+fails == mask-image-1c.html mask-image-1-ref.html
>+fails == mask-image-2.html mask-image-2-ref.html
>diff --git a/layout/reftests/w3c-css/submitted/masking/support/blue-100x50-transparent-100x50.svg b/layout/reftests/w3c-css/submitted/masking/support/blue-100x50-transparent-100x50.svg
>--- a/layout/reftests/w3c-css/submitted/masking/support/blue-100x50-transparent-100x50.svg
>+++ b/layout/reftests/w3c-css/submitted/masking/support/blue-100x50-transparent-100x50.svg
>@@ -1,5 +1,5 @@
> <?xml version="1.0"?>
> <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
>   <rect x="0" y="0"  width="100%" height="50%" fill="blue" fill-opacity="0"/>
>-  <rect x="0" y="50" width="100%" height="50%" fill="blue" fill-opacity="1"/>
>-</svg>
>\ No newline at end of file
>+  <rect x="0" y="50%" width="100%" height="50%" fill="blue" fill-opacity="1"/>
>+</svg>
>diff --git a/layout/reftests/w3c-css/submitted/masking/support/mask-half-transparent-100x100.svg b/layout/reftests/w3c-css/submitted/masking/support/mask-half-transparent-100x100.svg
>new file mode 100644
>--- /dev/null
>+++ b/layout/reftests/w3c-css/submitted/masking/support/mask-half-transparent-100x100.svg
>@@ -0,0 +1,9 @@
>+<?xml version="1.0"?>
>+<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
>+  <defs>
>+    <mask id="mask" mask-type="alpha">
>+      <rect x="0" y="0"  width="100" height="50" fill-opacity="1"/>
>+      <rect x="0" y="50" width="100" height="50" fill-opacity="0"/>
>+    </mask>
>+  </defs>
>+</svg>
>diff --git a/layout/reftests/w3c-css/submitted/masking/support/transparent-100x50-blue-100x50.svg b/layout/reftests/w3c-css/submitted/masking/support/transparent-100x50-blue-100x50.svg
>--- a/layout/reftests/w3c-css/submitted/masking/support/transparent-100x50-blue-100x50.svg
>+++ b/layout/reftests/w3c-css/submitted/masking/support/transparent-100x50-blue-100x50.svg
>@@ -1,5 +1,5 @@
> <?xml version="1.0"?>
> <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
>   <rect x="0" y="0"  width="100%" height="50%" fill="blue" fill-opacity="1"/>
>-  <rect x="0" y="50" width="100%" height="50%" fill="blue" fill-opacity="0"/>
>-</svg>
>\ No newline at end of file
>+  <rect x="0" y="50%" width="100%" height="50%" fill="blue" fill-opacity="0"/>
>+</svg>
Attachment #8741617 - Attachment description: Part 1. Add mask-image property reftest → Part 1. Add mask-image property reftest. r=dbaron
Attachment #8741617 - Flags: review+
(Assignee)

Comment 61

3 years ago
Comment on attachment 8741618 [details] [diff] [review]
Part 5. Add mask-origin property reftest. r=dbaron

carry r+:dbaron
Attachment #8741618 - Attachment description: Part 5. Add mask-origin property reftest → Part 5. Add mask-origin property reftest. r=dbaron
Attachment #8741618 - Flags: review+
(Assignee)

Comment 62

3 years ago
Comment on attachment 8741619 [details] [diff] [review]
Part 6. Add mask-size property reftest. r=dbaron

carry r+:dbaron
Attachment #8741619 - Attachment description: Part 6. Add mask-size property reftest → Part 6. Add mask-size property reftest. r=dbaron
Attachment #8741619 - Flags: review+
(Assignee)

Updated

3 years ago
Keywords: checkin-needed
You need to log in before you can comment on or make changes to this bug.