position-area-computed.html (7587B)
1 <!DOCTYPE html> 2 <title>CSS Anchor Positioning: position-area getComputedStyle()</title> 3 <link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/#position-area-computed"> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 <script src="/css/support/computed-testcommon.js"></script> 7 <script src="/css/support/inheritance-testcommon.js"></script> 8 <div id="container"> 9 <div id="target"></div> 10 </div> 11 <script> 12 // Keywords that refer to the physical horizontal/vertical axes. 13 14 const horizontal = [ 15 "left", 16 "right", 17 "span-left", 18 "span-right", 19 "x-start", 20 "x-end", 21 "span-x-start", 22 "span-x-end", 23 "self-x-start", 24 "self-x-end", 25 "span-self-x-start", 26 "span-self-x-end" 27 ]; 28 29 const vertical = [ 30 "top", 31 "bottom", 32 "span-top", 33 "span-bottom", 34 "y-start", 35 "y-end", 36 "span-y-start", 37 "span-y-end", 38 "self-y-start", 39 "self-y-end", 40 "span-self-y-start", 41 "span-self-y-end" 42 ]; 43 44 // Keywords that refer to the logical block/inline axis. 45 // Key is the full form of the keyword, value is the equivalent reduced keyword. 46 47 const inline = { 48 "inline-start": "start", 49 "inline-end": "end", 50 "span-inline-start": "span-start", 51 "span-inline-end": "span-end", 52 } 53 54 const block = { 55 "block-start": "start", 56 "block-end": "end", 57 "span-block-start": "span-start", 58 "span-block-end": "span-end", 59 } 60 61 const self_inline = { 62 "self-inline-start": "self-start", 63 "self-inline-end": "self-end", 64 "span-self-inline-start": "span-self-start", 65 "span-self-inline-end": "span-self-end", 66 } 67 68 const self_block = { 69 "self-block-start": "self-start", 70 "self-block-end": "self-end", 71 "span-self-block-start": "span-self-start", 72 "span-self-block-end": "span-self-end", 73 } 74 75 // Keywords that refer to an ambiguous axis. 76 // Key is the keyword, value is the equivalent keyword if the original keyword refers 77 // to a block or inline axis. 78 79 const start_end = { 80 "start": { "block": "block-start", "inline": "inline-start" }, 81 "end": { "block": "block-end", "inline": "inline-end" }, 82 "span-start": { "block": "span-block-start", "inline": "span-inline-start" }, 83 "span-end": { "block": "span-block-end", "inline": "span-inline-end" }, 84 }; 85 86 const self_start_end = { 87 "self-start": { "block": "self-block-start", "inline": "self-inline-start" }, 88 "self-end": { "block": "self-block-end", "inline": "self-inline-end" }, 89 "span-self-start": { "block": "span-self-block-start", "inline": "span-self-inline-start" }, 90 "span-self-end": { "block": "span-self-block-end", "inline": "span-self-inline-end" }, 91 }; 92 93 function test_single_keyword(keywords) { 94 for (const keyword of keywords) 95 test_computed_value("position-area", keyword); 96 } 97 98 function test_physical_keywords(horizontal_keywords, vertical_keywords) { 99 for (const horizontal of horizontal_keywords) { 100 for (const vertical of vertical_keywords) { 101 test_computed_value("position-area", `${horizontal} ${vertical}`); 102 test_computed_value("position-area", `${vertical} ${horizontal}`, `${horizontal} ${vertical}`); 103 } 104 } 105 106 for (const keyword of horizontal_keywords) { 107 test_computed_value("position-area", `${keyword} span-all`, keyword); 108 test_computed_value("position-area", `span-all ${keyword}`, keyword); 109 110 test_computed_value("position-area", `${keyword} center`); 111 test_computed_value("position-area", `center ${keyword}`, `${keyword} center`); 112 } 113 114 for (const keyword of vertical_keywords) { 115 test_computed_value("position-area", `span-all ${keyword}`, keyword); 116 test_computed_value("position-area", `${keyword} span-all`, keyword); 117 118 test_computed_value("position-area", `center ${keyword}`); 119 test_computed_value("position-area", `${keyword} center`, `center ${keyword}`); 120 } 121 } 122 123 function test_unambiguous_logical_keywords(block_keywords, inline_keywords) { 124 for (const [block_long_keyword, block_short_keyword] of Object.entries(block_keywords)) { 125 for (const [inline_long_keyword, inline_short_keyword] of Object.entries(inline_keywords)) { 126 let expected_computed = `${block_short_keyword} ${inline_short_keyword}`; 127 if (block_short_keyword == inline_short_keyword) 128 expected_computed = block_short_keyword; 129 130 test_computed_value("position-area", `${block_long_keyword} ${inline_long_keyword}`, expected_computed); 131 test_computed_value("position-area", `${inline_long_keyword} ${block_long_keyword}`, expected_computed); 132 } 133 } 134 135 for (const [long_keyword, short_keyword] of Object.entries(block_keywords)) { 136 test_computed_value("position-area", `${long_keyword} span-all`, long_keyword); 137 test_computed_value("position-area", `span-all ${long_keyword}`, long_keyword); 138 139 test_computed_value("position-area", `${long_keyword} center`, `${short_keyword} center`); 140 test_computed_value("position-area", `center ${long_keyword}`, `${short_keyword} center`); 141 } 142 143 for (const [long_keyword, short_keyword] of Object.entries(inline_keywords)) { 144 test_computed_value("position-area", `${long_keyword} span-all`, long_keyword); 145 test_computed_value("position-area", `span-all ${long_keyword}`, long_keyword); 146 147 test_computed_value("position-area", `${long_keyword} center`, `center ${short_keyword}`); 148 test_computed_value("position-area", `center ${long_keyword}`, `center ${short_keyword}`); 149 } 150 } 151 152 function test_ambiguous_logical_keywords(keywords) { 153 for (const keyword1 of Object.keys(keywords)) { 154 for (const keyword2 of Object.keys(keywords)) { 155 if (keyword1 == keyword2) 156 test_computed_value("position-area", `${keyword1} ${keyword2}`, `${keyword1}`); 157 else 158 test_computed_value("position-area", `${keyword1} ${keyword2}`); 159 } 160 } 161 162 for (const [keyword, { block: block_keyword, inline: inline_keyword }] of Object.entries(keywords)) { 163 test_computed_value("position-area", `${keyword} span-all`, block_keyword); 164 test_computed_value("position-area", `span-all ${keyword}`, inline_keyword); 165 166 test_computed_value("position-area", `${keyword} center`); 167 test_computed_value("position-area", `center ${keyword}`); 168 }; 169 } 170 171 // Test computed value when position-area is a single keyword. 172 test_computed_value("position-area", "none"); 173 test_computed_value("position-area", "span-all"); 174 test_computed_value("position-area", "center"); 175 test_single_keyword(horizontal); 176 test_single_keyword(vertical); 177 test_single_keyword(Object.keys(inline)); 178 test_single_keyword(Object.keys(block)); 179 test_single_keyword(Object.keys(self_inline)); 180 test_single_keyword(Object.keys(self_block)); 181 test_single_keyword(Object.keys(start_end)); 182 test_single_keyword(Object.keys(self_start_end)); 183 184 // Test computed value when position-area are two keywords. 185 test_physical_keywords(horizontal, vertical); 186 test_unambiguous_logical_keywords(block, inline); 187 test_unambiguous_logical_keywords(self_block, self_inline); 188 test_ambiguous_logical_keywords(start_end); 189 test_ambiguous_logical_keywords(self_start_end); 190 191 test_computed_value("position-area", "span-all span-all", "span-all"); 192 test_computed_value("position-area", "span-all center"); 193 test_computed_value("position-area", "center span-all"); 194 test_computed_value("position-area", "center center", "center"); 195 196 assert_not_inherited("position-area", "none", "span-all"); 197 </script>