nested-query-containers.html (3410B)
1 <!DOCTYPE html> 2 <title>Nested query containers affecting each other</title> 3 <link rel="help" href="https://drafts.csswg.org/css-conditional-5/#size-container"> 4 <link rel="help" href="https://drafts.csswg.org/css-contain-2/#containment-size"> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <script src="support/cq-testcommon.js"></script> 8 <style> 9 body > section { 10 contain: strict; 11 width: 500px; 12 } 13 </style> 14 <body> 15 <script> 16 promise_setup(() => { 17 assert_implements_size_container_queries(); 18 return new Promise(resolve => { 19 addEventListener("load", () => { 20 requestAnimationFrame(() => { 21 requestAnimationFrame(() => { 22 document.body.className = "run"; 23 resolve(); 24 }); 25 }); 26 }, {once: true}); 27 }); 28 }); 29 30 function booleanTuples(n) { 31 const tuple = new Array(n); 32 function* recursion(i) { 33 if (i == n) { 34 yield tuple.slice(); 35 return; 36 } 37 tuple[i] = false; 38 yield* recursion(i + 1); 39 tuple[i] = true; 40 yield* recursion(i + 1); 41 } 42 return recursion(0); 43 } 44 45 // The following display values evaluate container queries to unknown. 46 const testCases = [ 47 { 48 display: "inline", 49 expected: { 50 width: depth => depth % 2 ? 0 : 500 - depth, 51 height: depth => 0, 52 }, 53 }, 54 { 55 display: "contents", 56 expected: { 57 width: depth => depth % 2 ? 0 : 500 - depth, 58 height: depth => 0, 59 }, 60 }, 61 { 62 display: "table-cell", 63 expected: { 64 width: depth => depth % 2 ? 2 : 0, 65 height: depth => depth % 2 ? 2 : 0, 66 }, 67 }, 68 { 69 display: "table", 70 expected: { 71 width: depth => depth % 2 ? 4 : 0, 72 height: depth => depth % 2 ? 4 : 0, 73 }, 74 }, 75 ]; 76 77 let testNum = 1; 78 for (let testCase of testCases) { 79 for (let tuple of booleanTuples(3)) { 80 const section = document.createElement("section"); 81 const id = "test" + testNum; 82 section.id = id; 83 const style = document.createElement("style"); 84 style.textContent = ` 85 :where(body${tuple[0] ? ".run" : ""}) > #${id} { 86 container-type: size; 87 container-name: name; 88 } 89 :where(body${tuple[1] ? ".run" : ""}) > #${id} div { 90 container-type: size; 91 container-name: name; 92 border: solid; 93 border-width: 1px; 94 } 95 @container name (width >= 0) { 96 :where(body${tuple[2] ? ".run" : ""}) > #${id} div { 97 display: ${testCase.display}; 98 border-style: dotted; 99 } 100 } 101 `; 102 section.appendChild(style); 103 section.insertAdjacentHTML( 104 "beforeend", 105 "<div><div><div><div><div><div></div></div></div></div></div></div>" 106 ); 107 document.body.appendChild(section); 108 promise_test(async function() { 109 let div = section.querySelector("div"); 110 let depth = 1; 111 while (div) { 112 const cs = getComputedStyle(div); 113 assert_equals(cs.display, depth % 2 ? testCase.display : "block"); 114 assert_equals(cs.borderStyle, depth % 2 ? "dotted" : "solid", "borderStyle"); 115 assert_equals(div.clientWidth, testCase.expected.width(depth), "clientWidth"); 116 assert_equals(div.clientHeight, testCase.expected.height(depth), "clientHeight"); 117 div = div.firstElementChild; 118 depth += 1; 119 } 120 }, id + " - " + testCase.display + " - 0b" + tuple.map(Number).join("")); 121 testNum += 1; 122 } 123 } 124 </script> 125 </body>