Skip to content

Commit 21d7359

Browse files
author
Mike
committed
Revised test to match behaviour in spec, as revised in issue #245 
1 parent 0c6b6ed commit 21d7359

File tree

2 files changed

+29
-18
lines changed

2 files changed

+29
-18
lines changed

‎svg/painting/reftests/display-none-mask-ref.html

+11-11
Original file line numberDiff line numberDiff line change
@@ -8,12 +8,12 @@
88
<body>
99
<svg width="200" height="200">
1010
<foreignObject x="0" y="0" width="200" height="200">
11-
<div style="width: 200px; height: 200px; background: red"></div>
11+
<div style="width: 200px; height: 200px;"></div>
1212
</foreignObject>
1313
</svg>
1414
<svg width="200" height="200">
1515
<foreignObject x="0" y="0" width="200" height="200">
16-
<div style="width: 200px; height: 200px; background: red"></div>
16+
<div style="width: 200px; height: 200px; background: green"></div>
1717
</foreignObject>
1818
</svg>
1919
<svg width="200" height="200">
@@ -23,28 +23,28 @@
2323
</svg>
2424
<svg width="200" height="200">
2525
<foreignObject x="0" y="0" width="200" height="200">
26-
<div style="width: 200px; height: 200px;"></div>
26+
<div style="width: 200px; height: 200px; background: green"></div>
2727
</foreignObject>
2828
</svg>
2929

3030
<!-- make sure masking actually works -->
3131
<svg width="200" height="200">
32-
<rect x="0" y="0" width="100" height="50" fill="red"></rect>
33-
<rect x="0" y="100" width="100" height="50" fill="red"></rect>
32+
<rect x="0" y="0" width="100" height="50" fill="green"></rect>
33+
<rect x="0" y="100" width="100" height="50" fill="green"></rect>
3434
</svg>
3535
<svg width="200" height="200">
36-
<rect x="0" y="0" width="100" height="50" fill="red"></rect>
37-
<rect x="0" y="100" width="100" height="50" fill="red"></rect>
36+
<rect x="0" y="0" width="100" height="50" fill="green"></rect>
37+
<rect x="0" y="100" width="100" height="50" fill="green"></rect>
3838
</svg>
3939

4040
<!-- make sure masking works on active content -->
4141
<svg width="200" height="200">
42-
<rect x="0" y="0" width="100" height="50" fill="red"></rect>
43-
<rect x="0" y="100" width="100" height="50" fill="red"></rect>
42+
<rect x="0" y="0" width="100" height="50" fill="green"></rect>
43+
<rect x="0" y="100" width="100" height="50" fill="green"></rect>
4444
</svg>
4545
<svg width="200" height="200">
46-
<rect x="0" y="0" width="100" height="50" fill="red"></rect>
47-
<rect x="0" y="100" width="100" height="50" fill="red"></rect>
46+
<rect x="0" y="0" width="100" height="50" fill="green"></rect>
47+
<rect x="0" y="100" width="100" height="50" fill="green"></rect>
4848
</svg>
4949
</body>
5050
</html>

‎svg/painting/reftests/display-none-mask.html

+18-7
Original file line numberDiff line numberDiff line change
@@ -3,28 +3,39 @@
33

44
<head>
55
<meta charset="UTF-8">
6-
<link rel="match" href="display-none-mask-ref.html" />
6+
<title>Mask behaviour when mask image is missing or display:none</title>
7+
<link rel="match" href="display-none-mask-ref.html">
8+
<link name="author" title="Timothy Nikkel" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1624532">
9+
<link name="author" title="Mike Bremford" href="http://bfo.com"> <!-- edited 202010 -->
10+
<link rel="help" href="https://drafts.fxtf.org/css-masking-1/#the-mask-image">
11+
<link rel="help" href="https://drafts.fxtf.org/css-masking-1/#MaskElement">
12+
<link rel="help" href="https://github.com/w3c/fxtf-drafts/issues/245">
13+
<meta name="assert" content="A missing or invalid mask image is equivalent to transparent black (i.e. nothing is displayed). A mask with display:none is disabled (which is a change to the specified behaviour as of issue 245)">
714
</head>
815

916
<body>
1017
<svg width="200" height="200">
18+
<!-- missing/invalid mask is equivalent to transparent black - nothing displayed -->
1119
<foreignObject x="0" y="0" width="200" height="200" style="mask: url('#notfound');">
1220
<div style="width: 200px; height: 200px; background: red"></div>
1321
</foreignObject>
1422
</svg>
1523
<svg width="200" height="200">
24+
<!-- display:none on mask means mask is not applied (new in https://github.com/w3c/fxtf-drafts/issues/245) -->
1625
<foreignObject x="0" y="0" width="200" height="200" style="mask: url('#noneMask');">
17-
<div style="width: 200px; height: 200px; background: red"></div>
26+
<div style="width: 200px; height: 200px; background: green"></div>
1827
</foreignObject>
1928
</svg>
2029
<svg width="200" height="200">
2130
<foreignObject x="0" y="0" width="200" height="200">
31+
<!-- missing/invalid mask is equivalent to transparent black - nothing displayed -->
2232
<div style="width: 200px; height: 200px; background: red; mask: url('#notfound');"></div>
2333
</foreignObject>
2434
</svg>
2535
<svg width="200" height="200">
2636
<foreignObject x="0" y="0" width="200" height="200">
27-
<div style="width: 200px; height: 200px; background: red; mask: url('#noneMask');"></div>
37+
<!-- display:none on mask means mask is not applied (new in https://github.com/w3c/fxtf-drafts/issues/245) -->
38+
<div style="width: 200px; height: 200px; background: green; mask: url('#noneMask');"></div>
2839
</foreignObject>
2940
</svg>
3041

@@ -45,24 +56,24 @@
4556
</mask>
4657
</defs>
4758
<foreignObject x="0" y="0" width="200" height="200" style="mask: url('#aMask');">
48-
<div style="width: 200px; height: 200px; background: red;"></div>
59+
<div style="width: 200px; height: 200px; background: green;"></div>
4960
</foreignObject>
5061
</svg>
5162
<svg width="200" height="200">
5263
<foreignObject x="0" y="0" width="200" height="200">
53-
<div style="width: 200px; height: 200px; background: red; mask: url('#aMask');"></div>
64+
<div style="width: 200px; height: 200px; background: green; mask: url('#aMask');"></div>
5465
</foreignObject>
5566
</svg>
5667

5768
<!-- make sure masking works on active content -->
5869
<svg width="200" height="200">
5970
<foreignObject x="0" y="0" width="200" height="200" style="mask: url('#aMask');">
60-
<div style="width: 200px; height: 200px; background: red; will-change: transform"></div>
71+
<div style="width: 200px; height: 200px; background: green; will-change: transform"></div>
6172
</foreignObject>
6273
</svg>
6374
<svg width="200" height="200">
6475
<foreignObject x="0" y="0" width="200" height="200">
65-
<div style="width: 200px; height: 200px; background: red; will-change: transform; mask: url('#aMask');"></div>
76+
<div style="width: 200px; height: 200px; background: green; will-change: transform; mask: url('#aMask');"></div>
6677
</foreignObject>
6778
</svg>
6879
</body>

0 commit comments

Comments
 (0)