auto-007.html (3241B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>Last remembered size</title> 4 <link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com"> 5 <link rel="help" href="https://drafts.csswg.org/css-sizing-4/#last-remembered"> 6 <link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override"> 7 <link rel="help" href="https://drafts.csswg.org/css-contain-2/#content-visibility"> 8 <meta name="assert" content="Tests that the last remembered size works well in a variety of different elements or boxes." /> 9 10 <style> 11 .test { 12 width: max-content; 13 height: max-content; 14 border: 1px solid; 15 } 16 .test::before { 17 content: ""; 18 display: block; 19 width: 320px; 20 height: 240px; 21 } 22 .contain-size { 23 contain: size; 24 } 25 .auto-width { 26 contain-intrinsic-width: auto 1px; 27 } 28 .auto-height { 29 contain-intrinsic-height: auto 2px; 30 } 31 .auto-both { 32 contain-intrinsic-size: auto 3px auto 4px; 33 } 34 .skip-contents .test { 35 content-visibility: hidden; 36 } 37 .scroll { 38 overflow: scroll; 39 } 40 .columns { 41 columns: 60px 2; 42 } 43 .grid { 44 display: grid; 45 } 46 .flex { 47 display: flex; 48 } 49 </style> 50 51 <div id="log"></div> 52 53 <div id="tests"> 54 <div></div> 55 <div class="scroll"></div> 56 <div class="columns"></div> 57 <div class="grid"></div> 58 <div class="flex"></div> 59 <fieldset></fieldset> 60 <img src="resources/dice.png"> 61 <svg></svg> 62 <canvas></canvas> 63 <iframe></iframe> 64 <video></video> 65 <button></button> 66 <select><option>Lorem ipsum</option></select> 67 <select multiple><option>Lorem ipsum</option></select> 68 </div> 69 70 <script src="/resources/testharness.js"></script> 71 <script src="/resources/testharnessreport.js"></script> 72 <script src="/resources/check-layout-th.js"></script> 73 <script> 74 function nextRendering() { 75 return new Promise(resolve => { 76 requestAnimationFrame(() => requestAnimationFrame(() => resolve())); 77 }); 78 } 79 addEventListener("load", async function() { 80 const wrapper = document.getElementById("tests"); 81 const tests = new DocumentFragment(); 82 for (let template of wrapper.children) { 83 template.classList.add("test"); 84 const autoWidthTest = template.cloneNode(true); 85 const autoHeightTest = template.cloneNode(true); 86 const autoBothTest = template.cloneNode(true); 87 autoWidthTest.classList.add("auto-width"); 88 autoHeightTest.classList.add("auto-height"); 89 autoBothTest.classList.add("auto-both"); 90 91 const normalWidth = template.clientWidth; 92 const normalHeight = template.clientHeight; 93 template.classList.add("contain-size"); 94 const containedWidth = template.clientWidth; 95 const containedHeight = template.clientHeight; 96 97 autoWidthTest.dataset.expectedClientWidth = normalWidth; 98 autoWidthTest.dataset.expectedClientHeight = containedHeight; 99 autoHeightTest.dataset.expectedClientWidth = containedWidth; 100 autoHeightTest.dataset.expectedClientHeight = normalHeight; 101 autoBothTest.dataset.expectedClientWidth = normalWidth; 102 autoBothTest.dataset.expectedClientHeight = normalHeight; 103 104 tests.append(autoWidthTest, autoHeightTest, autoBothTest); 105 } 106 wrapper.textContent = ""; 107 wrapper.appendChild(tests); 108 109 // Wait so that the last remembered size can be stored. 110 await nextRendering(); 111 112 wrapper.classList.add("skip-contents"); 113 checkLayout(".test"); 114 }); 115 </script>