z-index-020.html (956B)
1 <!DOCTYPE html> 2 <html class="reftest-wait"> 3 <title>CSS Test: z-index - dynamic changes</title> 4 <link rel="author" title="Oriol Brufau" href="obrufau@igalia.com"> 5 <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#z-index" /> 6 <link rel="match" href="../../reference/ref-filled-green-200px-square.html"> 7 <meta name="assert" content="Checks that z-index can be changed dynamically."> 8 <style> 9 div { 10 width: 200px; 11 height: 200px; 12 position: absolute; 13 } 14 #red { 15 background: red; 16 } 17 #target { 18 background: green; 19 z-index: -1; 20 } 21 #target.front { 22 z-index: 1; 23 } 24 </style> 25 26 <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> 27 28 <div id="red"></div> 29 <div id="target"></div> 30 31 <script src="/common/reftest-wait.js"></script> 32 <script src="/common/rendering-utils.js"></script> 33 <script> 34 waitForAtLeastOneFrame().then(() => { 35 document.getElementById("target").className = "front"; 36 takeScreenshot(); 37 }); 38 </script> 39 </html>