auto-011.html (2819B)
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 <link rel="help" href="https://drafts.csswg.org/css-contain-3/#containment-inline-size"> 9 <link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7807"> 10 <meta name="assert" content="Tests that the last remembered size can be updated when the element has size containment but doesn't skip its contents." /> 11 12 <style> 13 #target { 14 width: max-content; 15 height: max-content; 16 border: 1px solid; 17 } 18 #target::before { 19 content: ""; 20 display: block; 21 } 22 .content-100-50::before { 23 width: 100px; 24 height: 50px; 25 } 26 .content-skip { 27 content-visibility: hidden; 28 } 29 .contain-size { 30 contain: size; 31 } 32 .contain-inline-size { 33 contain: inline-size; 34 } 35 .ciw-auto-2 { 36 contain-intrinsic-width: auto 2px; 37 } 38 .ciw-auto-20 { 39 contain-intrinsic-width: auto 20px; 40 } 41 .cih-auto-1 { 42 contain-intrinsic-height: auto 1px; 43 } 44 .cih-auto-10 { 45 contain-intrinsic-height: auto 10px; 46 } 47 </style> 48 49 <div id="log"></div> 50 51 <div id="target"></div> 52 53 <script src="/resources/testharness.js"></script> 54 <script src="/resources/testharnessreport.js"></script> 55 <script> 56 const target = document.getElementById("target"); 57 58 function checkSize(expectedWidth, expectedHeight, msg) { 59 assert_equals(target.clientWidth, expectedWidth, msg + " - clientWidth"); 60 assert_equals(target.clientHeight, expectedHeight, msg + " - clientHeight"); 61 } 62 63 function nextRendering() { 64 return new Promise(resolve => { 65 requestAnimationFrame(() => requestAnimationFrame(() => resolve())); 66 }); 67 } 68 69 promise_test(async function() { 70 target.className = "content-100-50"; 71 checkSize(100, 50, "Sizing normally"); 72 73 await nextRendering(); 74 target.className = "content-100-50 ciw-auto-20 cih-auto-10 contain-size"; 75 checkSize(20, 10, "Size containment"); 76 77 await nextRendering(); 78 target.className = "content-skip ciw-auto-2 cih-auto-1"; 79 checkSize(20, 10, "Using last remembered size"); 80 }, "contain:size does not prevent recording last remembered size"); 81 82 promise_test(async function() { 83 target.className = "content-100-50"; 84 checkSize(100, 50, "Sizing normally"); 85 86 await nextRendering(); 87 target.className = "content-100-50 ciw-auto-20 cih-auto-10 contain-inline-size"; 88 checkSize(20, 50, "Size containment for inline axis"); 89 90 await nextRendering(); 91 target.className = "content-skip ciw-auto-2 cih-auto-1"; 92 checkSize(20, 50, "Using last remembered block size"); 93 }, "contain:inline-size does not prevent recording last remembered inline size"); 94 </script>