outline-dynamic.html (891B)
1 <!DOCTYPE html> 2 <html class="reftest-wait"> 3 <title>CSS Test: outline - dynamic changes</title> 4 <link rel="author" title="Oriol Brufau" href="obrufau@igalia.com"> 5 <link rel="help" href="https://drafts.csswg.org/css-ui-4/#outline" /> 6 <link rel="match" href="../reference/ref-filled-green-100px-square-only.html"> 7 <meta name="assert" content="Checks that outline can be changed dynamically."> 8 <style> 9 div { 10 position: absolute; 11 } 12 #red { 13 background: red; 14 } 15 #target { 16 margin: 50px; 17 } 18 #target.outline { 19 outline: solid 50px green; 20 } 21 </style> 22 23 <p>Test passes if there is a filled green square.</p> 24 25 <div id="red"></div> 26 <div id="target"></div> 27 28 <script src="/common/reftest-wait.js"></script> 29 <script src="/common/rendering-utils.js"></script> 30 <script> 31 waitForAtLeastOneFrame().then(() => { 32 document.getElementById("target").className = "outline"; 33 takeScreenshot(); 34 }); 35 </script> 36 </html>