clip-path-stacking-context-001.html (1276B)
1 <!DOCTYPE html> 2 <html class="reftest-wait"> 3 <meta charset="utf-8"> 4 <title>CSS Masking: clip-path changing dynamically</title> 5 <link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com"> 6 <link rel="help" href="https://drafts.fxtf.org/css-masking/#the-clip-path"> 7 <link rel="help" href="https://github.com/servo/servo/issues/38506"> 8 <meta name="assert" content="Dynamic changes of clip-path can start or stop establishing a stacking context."> 9 <link rel="match" href="../../reference/ref-filled-green-200px-square.html"> 10 <style> 11 .target { 12 width: 200px; 13 height: 100px; 14 position: relative; 15 } 16 .target > div { 17 position: absolute; 18 inset: 0; 19 z-index: -1; 20 } 21 </style> 22 <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> 23 <div id="a" class="target" style="clip-path: none; background: red"> 24 <div style="background: green"></div> 25 </div> 26 <div id="b" class="target" style="clip-path: inset(0); background: green"> 27 <div style="background: red"></div> 28 </div> 29 <script src="/common/reftest-wait.js"></script> 30 <script> 31 requestAnimationFrame(() => requestAnimationFrame(() => { 32 document.getElementById("a").style.clipPath = "inset(0)"; 33 document.getElementById("b").style.clipPath = "none"; 34 takeScreenshot(); 35 })); 36 </script> 37 </html>