display-none-mask.html (3613B)
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 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)"> 14 </head> 15 16 <body> 17 <svg width="200" height="200"> 18 <!-- missing/invalid mask is equivalent to transparent black - nothing displayed --> 19 <foreignObject x="0" y="0" width="200" height="200" style="mask: url('#notfound');"> 20 <div style="width: 200px; height: 200px; background: red"></div> 21 </foreignObject> 22 </svg> 23 <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) --> 25 <foreignObject x="0" y="0" width="200" height="200" style="mask: url('#noneMask');"> 26 <div style="width: 200px; height: 200px; background: green"></div> 27 </foreignObject> 28 </svg> 29 <svg width="200" height="200"> 30 <foreignObject x="0" y="0" width="200" height="200"> 31 <!-- missing/invalid mask is equivalent to transparent black - nothing displayed --> 32 <div style="width: 200px; height: 200px; background: red; mask: url('#notfound');"></div> 33 </foreignObject> 34 </svg> 35 <svg width="200" height="200"> 36 <foreignObject x="0" y="0" width="200" height="200"> 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> 39 </foreignObject> 40 </svg> 41 42 <svg width="200" height="200" style="display:none"> 43 <defs> 44 <mask id="noneMask"> 45 <rect x="0" y="0" width="200" height="200" fill="#4d4d4d"></rect> 46 </mask> 47 </defs> 48 </svg> 49 50 <!-- make sure masking actually works --> 51 <svg width="200" height="200"> 52 <defs> 53 <mask id="aMask"> 54 <rect x="0" y="0" width="100" height="50" fill="#ffffff"></rect> 55 <rect x="0" y="100" width="100" height="50" fill="#ffffff"></rect> 56 </mask> 57 </defs> 58 <foreignObject x="0" y="0" width="200" height="200" style="mask: url('#aMask');"> 59 <div style="width: 200px; height: 200px; background: green;"></div> 60 </foreignObject> 61 </svg> 62 <svg width="200" height="200"> 63 <foreignObject x="0" y="0" width="200" height="200"> 64 <div style="width: 200px; height: 200px; background: green; mask: url('#aMask');"></div> 65 </foreignObject> 66 </svg> 67 68 <!-- make sure masking works on active content --> 69 <svg width="200" height="200"> 70 <foreignObject x="0" y="0" width="200" height="200" style="mask: url('#aMask');"> 71 <div style="width: 200px; height: 200px; background: green; will-change: transform"></div> 72 </foreignObject> 73 </svg> 74 <svg width="200" height="200"> 75 <foreignObject x="0" y="0" width="200" height="200"> 76 <div style="width: 200px; height: 200px; background: green; will-change: transform; mask: url('#aMask');"></div> 77 </foreignObject> 78 </svg> 79 </body> 80 </html>