Closed Bug 1243675 Opened 8 years ago Closed 8 years ago

Additional reftest for mask-image

Categories

(Core :: Layout, defect)

defect
Not set
normal

Tracking

()

RESOLVED FIXED
mozilla48
Tracking Status
firefox48 --- fixed

People

(Reporter: u459114, Assigned: bmo)

References

(Blocks 1 open bug)

Details

Attachments

(6 files, 27 obsolete files)

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
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
Blocks: mask-ship
I'll be working on this bug to create relevant wpt test cases for mask-* properties.
Assignee: cku → aschen
Status: NEW → ASSIGNED
Attached file try: -b do -p all -u all -t none (obsolete) —
MozReview-Commit-ID: DPGY6QurBPI
Attachment #8732137 - Attachment is obsolete: true
Attachment #8732137 - Attachment is patch: false
Attached patch Update image resources for test (obsolete) — Splinter Review
MozReview-Commit-ID: GWKCmJXVjOc
MozReview-Commit-ID: 4hXAzF5hL2x
MozReview-Commit-ID: 23FKHj76Tnn
MozReview-Commit-ID: FzXdZqOL7Zr
MozReview-Commit-ID: 4sNQVhY4IiJ
MozReview-Commit-ID: GglpnhldUv5
MozReview-Commit-ID: HRidwPQrBch
MozReview-Commit-ID: Jz3MwxZPqEI
Attachment #8732160 - Attachment is obsolete: true
MozReview-Commit-ID: BZyfy7p760c
Attachment #8732161 - Attachment is obsolete: true
MozReview-Commit-ID: 4Mi6ALLXrcL
Attachment #8732163 - Attachment is obsolete: true
MozReview-Commit-ID: KIiZVVOzJT3
Attachment #8732164 - Attachment is obsolete: true
MozReview-Commit-ID: 4CGQMOlKq2n
Attachment #8732166 - Attachment is obsolete: true
MozReview-Commit-ID: ZlyQ5oP4CU
Attachment #8732167 - Attachment is obsolete: true
MozReview-Commit-ID: DQX0crMFOD0
MozReview-Commit-ID: 2XkDiCKql1w
Attachment #8732252 - Attachment is obsolete: true
MozReview-Commit-ID: HhVP7hnta4k
Attachment #8732253 - Attachment is obsolete: true
MozReview-Commit-ID: 8KI0kWMIr3H
Attachment #8732255 - Attachment is obsolete: true
Attached patch Update image resources for test (obsolete) — Splinter Review
MozReview-Commit-ID: DpV0GZFOslj
Attachment #8732158 - Attachment is obsolete: true
Attached patch Update image resources for test (obsolete) — Splinter Review
MozReview-Commit-ID: DpV0GZFOslj
Attachment #8733328 - Attachment is obsolete: true
Attachment #8732248 - Flags: review?(dbaron)
Attachment #8732250 - Flags: review?(dbaron)
Attachment #8732251 - Flags: review?(dbaron)
Attachment #8732254 - Flags: review?(dbaron)
Attachment #8733296 - Flags: review?(dbaron)
Attachment #8733297 - Flags: review?(dbaron)
Attachment #8733298 - Flags: review?(dbaron)
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)
(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.
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
Comment on attachment 8733329 [details] [diff] [review]
Update image resources for test

incorporated into the relevant patches.
Attachment #8733329 - Attachment is obsolete: true
MozReview-Commit-ID: CvjgVprfoaw
Attachment #8737455 - Flags: review?(dbaron)
Attachment #8732248 - Attachment is obsolete: true
MozReview-Commit-ID: 3Gva7UpBDsd
Attachment #8737456 - Flags: review?(dbaron)
Attachment #8732250 - Attachment is obsolete: true
MozReview-Commit-ID: 5ViQaPZ5BI
Attachment #8732251 - Attachment is obsolete: true
MozReview-Commit-ID: 7DO9BmHhx8A
Attachment #8733296 - Attachment is obsolete: true
MozReview-Commit-ID: BFHnpSnyDuo
Attachment #8737459 - Flags: review?(dbaron)
Attachment #8733297 - Attachment is obsolete: true
MozReview-Commit-ID: JXuhpre04Zz
Attachment #8737460 - Flags: review?(dbaron)
Attachment #8732254 - Attachment is obsolete: true
MozReview-Commit-ID: 3Gva7UpBDsd
Attachment #8737456 - Attachment is obsolete: true
Attachment #8737456 - Flags: review?(dbaron)
(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+
updated patch based on review comment 44.
Attachment #8737455 - Attachment is obsolete: true
MozReview-Commit-ID: CvjgVprfoaw
Attachment #8740787 - Attachment is obsolete: true
update summary, no idea why bzexport fails to do that...
Attachment #8740789 - Attachment is obsolete: true
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+
Comment on attachment 8737461 [details] [diff] [review]
Part 2. Add mask-clip property reftest. r=dbaron

carry r+:dbaron
Attachment #8737461 - Flags: review+
Comment on attachment 8737457 [details] [diff] [review]
Part 3. Add mask-position property reftest. r=dbaron

carry r+:dbaron
Attachment #8737457 - Flags: review+
Comment on attachment 8737458 [details] [diff] [review]
Part 4. Add mask-repeat property reftest. r=dbaron

carry r+:dbaron
Attachment #8737458 - Flags: review+
(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+
addressed comment 54 and elaborate description in reftest.list
Attachment #8740790 - Attachment is obsolete: true
addressed comment 53 and correct bug number
Attachment #8737459 - Attachment is obsolete: true
addressed comment 55. annotation added in part 1 patch.
Attachment #8737460 - Attachment is obsolete: true
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+
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+
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+
Keywords: checkin-needed
You need to log in before you can comment on or make changes to this bug.