1243675 - Additional reftest for mask-image

Status: RESOLVED FIXED

(Core :: Layout, defect)

Description

[u459114]

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

Comment 1

[Astley Chen (inactive)]

I'll be working on this bug to create relevant wpt test cases for mask-* properties.

Comment 2

[Astley Chen (inactive)]

https://treeherder.mozilla.org/#/jobs?repo=try&revision=50bcc8636c5b

Comment 3

[Astley Chen (inactive)]

Attachment: try: -b do -p all -u all -t none

MozReview-Commit-ID: DPGY6QurBPI

Comment 4

[Astley Chen (inactive)]

Attachment: Update image resources for test

MozReview-Commit-ID: GWKCmJXVjOc

Comment 5

[Astley Chen (inactive)]

Attachment: Part 1. Add mask-image property reftest

MozReview-Commit-ID: 4hXAzF5hL2x

Comment 6

[Astley Chen (inactive)]

Attachment: Part 2. Add mask-clip property reftest

MozReview-Commit-ID: 23FKHj76Tnn

Comment 7

[Astley Chen (inactive)]

Attachment: Part 3. Add mask-position property reftest

MozReview-Commit-ID: FzXdZqOL7Zr

Comment 8

[Astley Chen (inactive)]

Attachment: Part 4. Add mask-repeat property reftest

MozReview-Commit-ID: 4sNQVhY4IiJ

Comment 9

[Astley Chen (inactive)]

Attachment: Part 5. Add mask-origin property reftest

MozReview-Commit-ID: GglpnhldUv5

Comment 10

[Astley Chen (inactive)]

Attachment: Part 6. Add mask-size property reftest

MozReview-Commit-ID: HRidwPQrBch

Comment 11

[Astley Chen (inactive)]

https://treeherder.mozilla.org/#/jobs?repo=try&revision=6a37bb3ba45f

Comment 12

[Astley Chen (inactive)]

Attachment: Part 1. Add mask-image property reftest

MozReview-Commit-ID: Jz3MwxZPqEI

Comment 13

[Astley Chen (inactive)]

Attachment: Part 2. Add mask-clip property reftest

MozReview-Commit-ID: BZyfy7p760c

Comment 14

[Astley Chen (inactive)]

Attachment: Part 3. Add mask-position property reftest

MozReview-Commit-ID: 4Mi6ALLXrcL

Comment 15

[Astley Chen (inactive)]

Attachment: Part 4. Add mask-repeat property reftest

MozReview-Commit-ID: KIiZVVOzJT3

Comment 16

[Astley Chen (inactive)]

Attachment: Part 5. Add mask-origin property reftest

MozReview-Commit-ID: 4CGQMOlKq2n

Comment 17

[Astley Chen (inactive)]

Attachment: Part 6. Add mask-size property reftest

MozReview-Commit-ID: ZlyQ5oP4CU

Comment 18

[Astley Chen (inactive)]

Attachment: Part 7. Add test cases to reftest.list

MozReview-Commit-ID: DQX0crMFOD0

Comment 19

[Astley Chen (inactive)]

Attachment: Part 4. Add mask-repeat property reftest

MozReview-Commit-ID: 2XkDiCKql1w

Comment 20

[Astley Chen (inactive)]

Attachment: Part 5. Add mask-origin property reftest

MozReview-Commit-ID: HhVP7hnta4k

Comment 21

[Astley Chen (inactive)]

Attachment: Part 7. Add test cases to reftest.list

MozReview-Commit-ID: 8KI0kWMIr3H

Comment 22

[Astley Chen (inactive)]

Attachment: Update image resources for test

MozReview-Commit-ID: DpV0GZFOslj

Comment 23

[Astley Chen (inactive)]

Attachment: Update image resources for test

MozReview-Commit-ID: DpV0GZFOslj

Comment 24

[David Baron :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.

Comment 25

[David Baron :dbaron:]

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

Comment 26

[David Baron :dbaron:]

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

Comment 27

[David Baron :dbaron:]

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.

Comment 28

[David Baron :dbaron:]

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.

Comment 29

[David Baron :dbaron:]

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.

Comment 30

[David Baron :dbaron:]

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.

Comment 31

[David Baron :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.

Comment 32

[Astley Chen (inactive)]

(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 33

[Astley Chen (inactive)]

https://treeherder.mozilla.org/#/jobs?repo=try&revision=d7dd2a55fb56

Comment 34

[Astley Chen (inactive)]

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

incorporated into the relevant patches.

Comment 35

[Astley Chen (inactive)]

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

incorporated into the relevant patches.

Comment 36

[Astley Chen (inactive)]

Attachment: Part 1. Add mask-image property reftest

MozReview-Commit-ID: CvjgVprfoaw

Comment 37

[Astley Chen (inactive)]

Attachment: Part 2. Add mask-clip property reftest

MozReview-Commit-ID: 3Gva7UpBDsd

Comment 38

[Astley Chen (inactive)]

Attachment: Part 3. Add mask-position property reftest. r=dbaron

MozReview-Commit-ID: 5ViQaPZ5BI

Comment 39

[Astley Chen (inactive)]

Attachment: Part 4. Add mask-repeat property reftest. r=dbaron

MozReview-Commit-ID: 7DO9BmHhx8A

Comment 40

[Astley Chen (inactive)]

Attachment: Part 5. Add mask-origin property reftest

MozReview-Commit-ID: BFHnpSnyDuo

Comment 41

[Astley Chen (inactive)]

Attachment: Part 6. Add mask-size property reftest

MozReview-Commit-ID: JXuhpre04Zz

Comment 42

[Astley Chen (inactive)]

Attachment: Part 2. Add mask-clip property reftest. r=dbaron

MozReview-Commit-ID: 3Gva7UpBDsd

Comment 43

[Astley Chen (inactive)]

(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 44

[David Baron :dbaron:]

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

Comment 45

[Astley Chen (inactive)]

Attachment: Part 1. Add mask-image property reftest

updated patch based on review comment 44.

Comment 46

[Astley Chen (inactive)]

Attachment: Part 1. Add mask-image property reftest

MozReview-Commit-ID: CvjgVprfoaw

Comment 47

[Astley Chen (inactive)]

Attachment: Part 1. Add mask-image property reftest. r=dbaron

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

Comment 48

[Astley Chen (inactive)]

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

Carry r+:dbaron

Comment 49

[Astley Chen (inactive)]

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

carry r+:dbaron

Comment 50

[Astley Chen (inactive)]

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

carry r+:dbaron

Comment 51

[Astley Chen (inactive)]

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

carry r+:dbaron

Comment 52

[Astley Chen (inactive)]

(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 53

[David Baron :dbaron:]

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

Comment 54

[David Baron :dbaron:]

(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 55

[David Baron :dbaron:]

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?)

Comment 56

[Astley Chen (inactive)]

https://treeherder.mozilla.org/#/jobs?repo=try&revision=bc7d4c062696

Comment 57

[Astley Chen (inactive)]

Attachment: Part 1. Add mask-image property reftest. r=dbaron

addressed comment 54 and elaborate description in reftest.list

Comment 58

[Astley Chen (inactive)]

Attachment: Part 5. Add mask-origin property reftest. r=dbaron

addressed comment 53 and correct bug number

Comment 59

[Astley Chen (inactive)]

Attachment: Part 6. Add mask-size property reftest. r=dbaron

addressed comment 55. annotation added in part 1 patch.

Comment 60

[Astley Chen (inactive)]

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

># HG changeset patch
># User Astley Chen <[e-mail]>
># 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:[e-mail]">
>+    <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:[e-mail]">
>+    <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:[e-mail]">
>+    <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:[e-mail]">
>+    <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:[e-mail]">
>+    <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:[e-mail]">
>+    <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>

Comment 61

[Astley Chen (inactive)]

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

carry r+:dbaron

Comment 62

[Astley Chen (inactive)]

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

carry r+:dbaron

Comment 63

[Pulsebot]

https://hg.mozilla.org/integration/mozilla-inbound/rev/a841c9e635bb
https://hg.mozilla.org/integration/mozilla-inbound/rev/dd6c0512cb05
https://hg.mozilla.org/integration/mozilla-inbound/rev/eb10276fd467
https://hg.mozilla.org/integration/mozilla-inbound/rev/ac8b9a02deb5
https://hg.mozilla.org/integration/mozilla-inbound/rev/ceee74a15bb1
https://hg.mozilla.org/integration/mozilla-inbound/rev/15a4d633bd2d

Comment 64

[Carsten Book [:Tomcat]]

https://hg.mozilla.org/mozilla-central/rev/a841c9e635bb
https://hg.mozilla.org/mozilla-central/rev/dd6c0512cb05
https://hg.mozilla.org/mozilla-central/rev/eb10276fd467
https://hg.mozilla.org/mozilla-central/rev/ac8b9a02deb5
https://hg.mozilla.org/mozilla-central/rev/ceee74a15bb1
https://hg.mozilla.org/mozilla-central/rev/15a4d633bd2d