auto-017.html (2623B)
1 <!DOCTYPE html> 2 <meta charset="utf-8"> 3 <title>contain-intrinsic-width: auto length in vertical writing mode</title> 4 <link rel="author" title="Rob Buis" href="mailto:rbuis@igalia.com"> 5 <link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override"> 6 <meta name="assert" content="Tests that 'contain-intrinsic-width: auto length' respects the auto keyword in vertical writing mode"> 7 8 <style> 9 #target { 10 width: max-content; 11 height: max-content; 12 } 13 .cis-auto { 14 contain-intrinsic-width: auto 2px; 15 } 16 .skip-contents { 17 content-visibility: hidden; 18 } 19 .size-100-50 { 20 inline-size: 100px; 21 block-size: 50px; 22 } 23 .size-75-25 { 24 inline-size: 75px; 25 block-size: 25px; 26 } 27 .vertical { 28 writing-mode: vertical-lr; 29 } 30 </style> 31 32 <div id="log"></div> 33 34 <div id="parent"> 35 <div id="target"> 36 <div id="contents"></div> 37 </div> 38 </div> 39 40 <script src="/resources/testharness.js"></script> 41 <script src="/resources/testharnessreport.js"></script> 42 <script> 43 const parent = document.getElementById("parent"); 44 const target = document.getElementById("target"); 45 const contents = document.getElementById("contents"); 46 47 function checkSize(expectedWidth, expectedHeight, msg) { 48 assert_equals(target.clientWidth, expectedWidth, msg + " - clientWidth"); 49 assert_equals(target.clientHeight, expectedHeight, msg + " - clientHeight"); 50 } 51 52 function nextRendering() { 53 return new Promise(resolve => { 54 requestAnimationFrame(() => requestAnimationFrame(() => resolve())); 55 }); 56 } 57 58 function cleanup() { 59 parent.className = ""; 60 target.className = ""; 61 contents.className = ""; 62 checkSize(0, 0, "Sizing after cleanup"); 63 } 64 65 promise_test(async function() { 66 this.add_cleanup(cleanup); 67 parent.classList.add("vertical"); 68 target.className = "cis-auto skip-contents"; 69 contents.classList.add("size-100-50"); 70 checkSize(2, 0, "Size containment with no last remembered width"); 71 72 target.classList.remove("skip-contents"); 73 checkSize(50, 100, "Sizing normally"); 74 75 await nextRendering(); 76 target.classList.add("skip-contents"); 77 checkSize(50, 0, "Using last remembered width"); 78 79 contents.classList.remove("size-100-50"); 80 contents.classList.add("size-75-25"); 81 checkSize(50, 0, "Still using last remembered width"); 82 83 target.classList.remove("skip-contents"); 84 checkSize(25, 75, "Sizing normally with different size"); 85 86 target.classList.add("skip-contents"); 87 checkSize(50, 0, "Going back to last remembered width"); 88 89 target.classList.remove("skip-contents"); 90 await nextRendering(); 91 target.classList.add("skip-contents"); 92 checkSize(25, 0, "Using the new last remembered width"); 93 }, "Basic usage"); 94 </script>