overflow-clip-margin-invalidation.html (1637B)
1 <!DOCTYPE html> 2 <html class="reftest-wait"> 3 <head> 4 <title>CSS Overflow: overflow-clip-margin: invalidation on change</title> 5 <link rel="help" href="https://www.w3.org/TR/css-overflow-3/#propdef-overflow-clip-margin"> 6 <meta name="assert" content="overflow-clip-margin: toggling should invalidate."> 7 <link rel="author" title="Scott Violet" href="mailto:sky@chromium.org"> 8 <link rel="match" href="overflow-clip-margin-invalidation-ref.html"> 9 <style> 10 .container { 11 display: flex; 12 } 13 .parent { 14 flex: none; 15 width: 100px; 16 height: 100px; 17 flex: none; 18 overflow: clip; 19 } 20 .child { 21 width: 200px; 22 height: 200px; 23 position: relative; 24 top: -50px; 25 left: -50px; 26 background-color: green; 27 } 28 .spacer { 29 flex: none; 30 height: 100px; 31 width: 100px; 32 } 33 .margin { 34 overflow-clip-margin: 10px; 35 } 36 </style> 37 <script src="/common/reftest-wait.js"></script> 38 <script src="/common/rendering-utils.js"></script> 39 </head> 40 <body> 41 <div class="spacer"></div> 42 <div class="container"> 43 <div class="spacer"></div> 44 <div id="div_with_margin" class="parent margin"> 45 <div class="child"></div> 46 </div> 47 <div class="spacer"></div> 48 <div class="container"> 49 <div class="spacer"></div> 50 <div id="div_without_margin" class="parent"> 51 <div class="child"></div> 52 </div> 53 </body> 54 <script> 55 async function runTest() { 56 document.getElementById('div_with_margin').classList.remove("margin"); 57 document.getElementById('div_without_margin').classList.add("margin"); 58 takeScreenshot(); 59 } 60 onload = () => { 61 waitForAtLeastOneFrame().then(() => { runTest() }); 62 } 63 </script> 64 </html>