auto-010.html (2887B)
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-multicol-1/"> 9 <link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7598"> 10 <meta name="assert" content="Tests that the last remembered size takes all fragments into account." /> 11 12 <style> 13 #wrapper { 14 column-width: 100px; 15 width: max-content; 16 height: 100px; 17 } 18 #target { 19 width: max-content; 20 height: max-content; 21 background: orange; 22 } 23 #target::before { 24 content: ""; 25 display: block; 26 } 27 .content-50-150::before { 28 width: 50px; 29 height: 150px; 30 } 31 .content-50-175::before { 32 width: 50px; 33 height: 175px; 34 } 35 .content-skip { 36 content-visibility: hidden; 37 } 38 .cis-auto { 39 contain-intrinsic-size: auto 1px; 40 } 41 </style> 42 43 <div id="log"></div> 44 45 <div id="wrapper"> 46 <div id="target"></div> 47 </div> 48 49 <script src="/resources/testharness.js"></script> 50 <script src="/resources/testharnessreport.js"></script> 51 <script> 52 const target = document.getElementById("target"); 53 54 function checkSizes(expectedSizes, msg) { 55 const rects = target.getClientRects(); 56 assert_equals(rects.length, expectedSizes.length, msg + " - fragments"); 57 for (let i = 0; i < rects.length; ++i) { 58 assert_equals(rects[i].width, expectedSizes[i][0], `${msg} - fragment #${i+1} width`); 59 assert_equals(rects[i].height, expectedSizes[i][1], `${msg} - fragment #${i+1} height`); 60 } 61 } 62 63 function checkSize(expectedWidth, expectedHeight, msg) { 64 assert_equals(target.clientWidth, expectedWidth, msg + " - clientWidth"); 65 assert_equals(target.clientHeight, expectedHeight, msg + " - clientHeight"); 66 } 67 68 function nextRendering() { 69 return new Promise(resolve => { 70 requestAnimationFrame(() => requestAnimationFrame(() => resolve())); 71 }); 72 } 73 74 promise_test(async function() { 75 target.className = "cis-auto content-50-150"; 76 checkSizes([[50, 100], [50, 50]], "Sizing normally"); 77 78 await nextRendering(); 79 target.className = "cis-auto content-skip"; 80 checkSize(50, 150, "Using last remembered size"); 81 }, "Last remembered size supports multiple fragments"); 82 83 promise_test(async function() { 84 target.className = "cis-auto content-50-150"; 85 checkSizes([[50, 100], [50, 50]], "Sizing normally"); 86 87 await nextRendering(); 88 target.className = "cis-auto content-50-175"; 89 checkSizes([[50, 100], [50, 75]], "Sizing normally with new size"); 90 91 await nextRendering(); 92 target.className = "cis-auto content-skip"; 93 checkSize(50, 175, "Using updated last remembered size"); 94 }, "Last remembered size is updated when 2nd fragment changes size"); 95 </script>