unsupported-axis.html (5672B)
1 <!doctype html> 2 <title>Query against unsupported axis</title> 3 <link rel="help" href="https://drafts.csswg.org/css-conditional-5/#size-container"> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 <script src="support/cq-testcommon.js"></script> 7 <script> 8 setup(() => assert_implements_size_container_queries()); 9 </script> 10 11 <style> 12 #container { 13 width: 200px; 14 height: 100px; 15 container-type: inline-size; 16 } 17 </style> 18 19 <div id=container> 20 <div id=target> 21 Test 22 </div> 23 </div> 24 25 26 <style> 27 @container (width > 0px) { 28 #target { --width:true; } 29 } 30 </style> 31 <script> 32 test(function(t) { 33 assert_equals(getComputedStyle(target).getPropertyValue('--width'), 'true'); 34 }, '(width > 0px)'); 35 </script> 36 37 38 <style> 39 @container (height > 0px) { 40 #target { --height:true; } 41 } 42 </style> 43 <script> 44 test(function(t) { 45 // container-type:inline-size does not support queries along the block 46 // axis. 47 assert_equals(getComputedStyle(target).getPropertyValue('--height'), ''); 48 }, '(height > 0px)'); 49 </script> 50 51 52 <style> 53 @container ((height > 0px) or (width > 0px)) { 54 #target { --height-or-width:true; } 55 } 56 </style> 57 <script> 58 test(function(t) { 59 // (height > 0px) requires container-type:size. 60 assert_equals(getComputedStyle(target).getPropertyValue('--height-or-width'), ''); 61 }, '((height > 0px) or (width > 0px))'); 62 </script> 63 64 65 <style> 66 @container ((width > 0px) or (height > 0px)) { 67 #target { --width-or-height:true; } 68 } 69 </style> 70 <script> 71 test(function(t) { 72 // (height > 0px) requires container-type:size. 73 assert_equals(getComputedStyle(target).getPropertyValue('--width-or-height'), ''); 74 }, '((width > 0px) or (height > 0px))'); 75 </script> 76 77 <style> 78 @container ((orientation: landscape) or (width > 0px)) { 79 #target { --orientation-or-width:true; } 80 } 81 </style> 82 <script> 83 test(function(t) { 84 // (orientation: landscape) requires container-type:size. 85 assert_equals(getComputedStyle(target).getPropertyValue('--orientation-or-width'), ''); 86 }, '((orientation: landscape) or (width > 0px))'); 87 </script> 88 89 90 <style> 91 @container ((width > 0px) or (orientation: landscape)) { 92 #target { --width-or-orientation:true; } 93 } 94 </style> 95 <script> 96 test(function(t) { 97 // (orientation: landscape) requires container-type:size. 98 assert_equals(getComputedStyle(target).getPropertyValue('--width-or-orientation'), ''); 99 }, '((width > 0px) or (orientation: landscape))'); 100 </script> 101 102 103 <style> 104 @container ((height > 0px) or (orientation: landscape)) { 105 #target { --height-or-orientation:true; } 106 } 107 </style> 108 <script> 109 test(function(t) { 110 assert_equals(getComputedStyle(target).getPropertyValue('--height-or-orientation'), ''); 111 }, '((height > 0px) or (orientation: landscape))'); 112 </script> 113 114 115 <style> 116 @container ((height > 0px) or (orientation: landscape)) { 117 #target { --height-or-orientation2:true; } 118 } 119 </style> 120 <script> 121 test(function(t) { 122 // Adding full size containment via the 'contain' property does not 123 // make 'height' queryable. (Limited by container-type:inline-size). 124 t.add_cleanup(() => { target.style = ''; }); 125 target.style.contain = 'size'; 126 assert_equals(getComputedStyle(target).getPropertyValue('--height-or-orientation2'), ''); 127 }, '((height > 0px) or (orientation: landscape)), with contain:size'); 128 </script> 129 130 131 <style> 132 @container (inline-size > 0px) { 133 #target { --inline-size:true; } 134 } 135 </style> 136 <script> 137 test(function(t) { 138 assert_equals(getComputedStyle(target).getPropertyValue('--inline-size'), 'true'); 139 }, '(inline-size > 0px)'); 140 </script> 141 142 143 <style> 144 @container (block-size > 0px) { 145 #target { --block-size:true; } 146 } 147 </style> 148 <script> 149 test(function(t) { 150 // container-type:inline-size does not support queries along the block 151 // axis. 152 assert_equals(getComputedStyle(target).getPropertyValue('--block-size'), ''); 153 }, '(block-size > 0px)'); 154 </script> 155 156 157 <style> 158 @container (block-size > 0px) { 159 #target { --block-size2:true; } 160 } 161 </style> 162 <script> 163 test(function(t) { 164 // Changing the writing-mode does not affect the evaluation of block-size. 165 t.add_cleanup(() => { target.style = ''; }); 166 target.style.writingMode = 'vertical-rl'; 167 assert_equals(getComputedStyle(target).getPropertyValue('--block-size2'), ''); 168 }, '(block-size > 0px), with writing-mode:vertical-rl'); 169 </script> 170 171 172 <style> 173 @container not (width < 0px) { 174 #target { --not-width:true; } 175 } 176 </style> 177 <script> 178 test(function(t) { 179 assert_equals(getComputedStyle(target).getPropertyValue('--not-width'), 'true'); 180 }, 'not (width < 0px)'); 181 </script> 182 183 184 <style> 185 @container not (height < 0px) { 186 #target { --not-height:true; } 187 } 188 </style> 189 <script> 190 test(function(t) { 191 assert_equals(getComputedStyle(target).getPropertyValue('--not-height'), ''); 192 }, 'not (height < 0px)'); 193 </script> 194 195 196 <style> 197 @container not (inline-size < 0px) { 198 #target { --not-inline-size:true; } 199 } 200 </style> 201 <script> 202 test(function(t) { 203 assert_equals(getComputedStyle(target).getPropertyValue('--not-inline-size'), 'true'); 204 }, 'not (inline-size < 0px)'); 205 </script> 206 207 208 <style> 209 @container not (block-size < 0px) { 210 #target { --not-block-size:true; } 211 } 212 </style> 213 <script> 214 test(function(t) { 215 assert_equals(getComputedStyle(target).getPropertyValue('--not-block-size'), ''); 216 }, 'not (block-size < 0px)'); 217 </script> 218 219 <style> 220 @container not (orientation) { 221 #target { --not-orientation:true; } 222 } 223 </style> 224 <script> 225 test(function(t) { 226 assert_equals(getComputedStyle(target).getPropertyValue('--not-orientation'), ''); 227 }, 'not (orientation)'); 228 </script>