flex-item-contains-size-layout-001.html (1202B)
1 <!doctype html> 2 <html class=reftest-wait> 3 <link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> 4 <link rel="help" href=""> 5 <meta name="assert" content="Flex items with contain: layout size are sized properly."> 6 <link rel="bookmark" href="https://crbug.com/1108675"> 7 <link rel="match" href="../reference/ref-filled-green-100px-square.xht"> 8 <style> 9 #flex { 10 display: flex; 11 width: 100px; 12 height: 100px; 13 } 14 #grid { 15 background-color: green; 16 display: grid; 17 flex: 1; 18 contain: layout size; 19 } 20 .item { 21 height: 50px; 22 width: 50px; 23 } 24 #reference-overlapped-red { 25 position: absolute; 26 background-color: red; 27 width: 100px; 28 height: 100px; 29 z-index: -1; 30 } 31 </style> 32 33 <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> 34 <div id="reference-overlapped-red"></div> 35 36 <div id="flex"> 37 <div id="grid" data-expected-height=100 data-expected-width=100> 38 <div class="item"></div> 39 </div> 40 </div> 41 42 <script> 43 document.body.offsetTop; 44 let item = document.querySelector(".item"); 45 let cloned = item.cloneNode(true); 46 let parent = item.parentElement; 47 parent.appendChild(cloned); 48 document.documentElement.classList.remove("reftest-wait"); 49 </script>