container-selection.html (4737B)
1 <!doctype html> 2 <title>@container: selection using name and implicit selection</title> 3 <link rel="help" href="https://drafts.csswg.org/css-conditional-5/#container-rule"> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 <script src="support/cq-testcommon.js"></script> 7 <style> 8 9 main { background-color: lightgray; } 10 main > div { background-color: skyblue; } 11 main > div > div { background-color: seagreen; } 12 main > div > div > div { background-color: tomato; } 13 14 main { 15 width: 64px; 16 height: 64px; 17 } 18 19 main div { 20 width: 50%; 21 height: 50%; 22 } 23 24 .inline { container-type: inline-size; } 25 .size { container-type: size; } 26 27 .a-inline { container: a / inline-size; } 28 .a-size { container: a / size; } 29 30 .b-size { container: inline- b / size; } 31 .b-size { container: b / size; } 32 33 .ab-size { container: a b / size; } 34 35 .a { container-name: a; contain: strict; } 36 37 </style> 38 39 <main> 40 <div class="inline"> 41 <div class="size"> 42 <span></span> 43 </div> 44 </div> 45 </main> 46 47 <main> 48 <div class="size"> 49 <div class="inline"> 50 <span></span> 51 </div> 52 </div> 53 </main> 54 55 <main> 56 <div class="inline"> 57 <div class="inline"> 58 <span></span> 59 </div> 60 </div> 61 </main> 62 63 <main> 64 <div class="a-size"> 65 <div class="b-size"> 66 <span></span> 67 </div> 68 </div> 69 </main> 70 71 <main> 72 <div class="a-size"> 73 <div class="a-size"> 74 <span></span> 75 </div> 76 </div> 77 </main> 78 79 <main> 80 <div class="a-size"> 81 <div class="a"> 82 <span></span> 83 </div> 84 </div> 85 </main> 86 87 <main> 88 <div class="a-size"> 89 <div class="b-size"> 90 <div class="a-inline"> 91 <span></span> 92 </div> 93 </div> 94 </div> 95 </main> 96 97 <main> 98 <div class="a-inline"> 99 <div class="b-size"> 100 <span></span> 101 </div> 102 </div> 103 </main> 104 105 <main> 106 <div class="ab-size"> 107 <div class="size"> 108 <span></span> 109 </div> 110 </div> 111 </main> 112 113 <script> 114 setup(() => assert_implements_size_container_queries()); 115 116 function test_query(prelude, selector, expected) { 117 test(t => { 118 let elements = document.querySelectorAll(selector); 119 assert_equals(elements.length, 1); 120 let element = elements[0]; 121 122 let style = document.createElement('style'); 123 t.add_cleanup(() => { style.remove(); }); 124 style.innerText = `@container ${prelude} { span { --match:true; } } `; 125 document.body.append(style); 126 127 assert_equals(getComputedStyle(element).getPropertyValue('--match'), expected); 128 }, `${prelude} for ${selector}`); 129 } 130 131 // Test that a given container query applies to the specified element. 132 // The provided selector must unique identify the element. 133 function test_applied(prelude, selector) { 134 test_query(prelude, selector, 'true'); 135 } 136 137 function test_rejected(prelude, selector) { 138 test_query(prelude, selector, ''); 139 } 140 141 // For the following tests, the inner container has a size of 16x16px, 142 // and the outer container has a size of 32x32px. 143 144 // Implicit selection: 145 test_applied('(width: 16px)', '.size > .inline > span'); 146 test_applied('(height: 16px)', '.inline > .size > span'); 147 test_applied('(width: 16px)', '.inline > .size > span'); 148 test_applied('(height: 32px)', '.size > .inline > span'); 149 test_rejected('(height: 16px)', '.size > .inline > span'); 150 151 // Name selection: 152 test_applied('a (width: 32px)', '.a-size > .b-size > span'); 153 test_applied('b (width: 16px)', '.a-size > .b-size > span'); 154 test_rejected('c (width)', '.a-size > .b-size > span'); 155 test_applied('a (width: 16px)', '.a-size > .a-size > span'); 156 157 // container-name alone does not establish a container: 158 test_applied('a (width: 32px)', '.a-size > .a > span'); 159 160 // Can query container with multiple names: 161 test_applied('a (width: 32px)', '.ab-size > .size > span'); 162 test_applied('b (width: 32px)', '.ab-size > .size > span'); 163 test_rejected('c (width)', '.ab-size > .size > span'); 164 165 // The following tests have three containers: 166 // 167 // outer -> 32x32px 168 // middle -> 16x16px 169 // inner -> 8x8px 170 171 // Combinations of name and implicit selection: 172 test_applied('a (width: 8px)', '.a-size > .b-size > .a-inline > span'); 173 test_applied('b (width: 16px)', '.a-size > .b-size > .a-inline > span'); 174 test_applied('a (height: 32px)', '.a-size > .b-size > .a-inline > span'); 175 test_rejected('a (height)', '.a-inline > .b-size'); 176 177 // Same tests as above, but logical versions: 178 test_applied('a (inline-size: 8px)', '.a-size > .b-size > .a-inline > span'); 179 test_applied('b (inline-size: 16px)', '.a-size > .b-size > .a-inline > span'); 180 test_applied('a (block-size: 32px)', '.a-size > .b-size > .a-inline > span'); 181 test_rejected('a (block-size)', '.a-inline > .b-size'); 182 183 </script>