overflow-hidden-resize-with-stacking-context-child.html (1081B)
1 <!doctype html> 2 <html class="reftest-wait"> 3 <title>overflow:hidden changes size with stacking context child</title> 4 <link rel="help" href="https://drafts.csswg.org/css-overflow/#valdef-overflow-hidden"> 5 <link rel="help" href="https://www.w3.org/TR/CSS22/zindex.html"> 6 <link rel="match" href="../reference/ref-filled-green-100px-square-only.html"> 7 <script src="/common/rendering-utils.js"></script> 8 <script src="/common/reftest-wait.js"></script> 9 <style> 10 #container { 11 overflow: hidden; 12 width: 100px; 13 height: 20px; 14 } 15 #stacking-context { 16 position: relative; 17 background: red; 18 z-index: 100; 19 } 20 .content { 21 width: 100px; 22 height: 20px; 23 background: green; 24 } 25 </style> 26 <p>Test passes if there is a filled green square.</p> 27 <div id="container"> 28 <div id="stacking-context"> 29 <div class="content"></div> 30 <div class="content"></div> 31 <div class="content"></div> 32 <div class="content"></div> 33 <div class="content"></div> 34 </div> 35 </div> 36 <script> 37 waitForAtLeastOneFrame().then(() => { 38 container.style.height = '100px'; 39 takeScreenshot(); 40 }); 41 </script> 42 </html>