auto-013.html (1904B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>Last remembered size</title> 4 <link rel="author" title="Jihye Hong" href="mailto:jihye@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://github.com/w3c/csswg-drafts/issues/8407"> 9 <meta name="assert" content="Tests that content-visibility: auto forces contain-intrinsic-size to gain an auto value." /> 10 11 <style> 12 #t1 { 13 position: absolute; 14 left: 0vmax; 15 content-visibility: auto; 16 contain-intrinsic-size: 1000vmax 1000vmax; 17 background: red; 18 } 19 #t1::before { 20 content: ""; 21 display: block; 22 width: 10px; 23 height: 10px; 24 } 25 </style> 26 <div id="t1"></div> 27 28 <script src="/resources/testharness.js"></script> 29 <script src="/resources/testharnessreport.js"></script> 30 <script> 31 function nextRendering() { 32 return new Promise(resolve => { 33 requestAnimationFrame(() => requestAnimationFrame(() => resolve())); 34 }); 35 } 36 37 promise_test(async () => { 38 // Size normally. 39 await nextRendering(); 40 41 assert_equals(t1.clientWidth, 10, "Sizing normally: clientWidth"); 42 assert_equals(t1.clientHeight, 10, "Sizing normally: clientHeight"); 43 44 await nextRendering(); 45 46 // Move off-screen the target. Same size as in previous step! 47 t1.style.left = "-200vmax"; 48 49 assert_true(window.getComputedStyle(t1).containIntrinsicSize.includes("auto"), "containIntrinsicSize should be adjusted to auto"); 50 51 await nextRendering(); 52 53 assert_equals(t1.clientWidth, 10, "Sizing with new last remembered size: clientWidth"); 54 assert_equals(t1.clientHeight, 10, "Sizing with new last remembered size: clientHeight"); 55 }, 'content-visibility: auto forces contain-intrinsic-size to gain an auto value'); 56 57 </script>