symbol-in-mask.html (861B)
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Mask behaviour when mask contains a symbol element</title> 6 <link rel="match" href="green-100x100.svg"> 7 <link rel="help" href="https://drafts.fxtf.org/css-masking-1/#MaskElement"> 8 <meta name="assert" content="A symbol in a mask should not be displayed"> 9 </head> 10 <style> 11 html, body, svg { 12 padding: 0; 13 margin: 0; 14 } 15 </style> 16 <body> 17 <svg width="200" height="200"> 18 <defs> 19 <mask id="aMask"> 20 <symbol> 21 <rect x="0" y="0" width="100" height="100" fill="#ffffff"/> 22 </symbol> 23 </mask> 24 </defs> 25 <rect width="100" height="100" fill="green"/> 26 <foreignObject width="200" height="200" style="mask: url('#aMask');"> 27 <div style="width: 200px; height: 200px; background: red;"></div> 28 </foreignObject> 29 </svg> 30 </body> 31 </html>