position-area-parsing.html (8852B)
1 <!DOCTYPE html> 2 <title>CSS Anchor Positioning: position-area parsing</title> 3 <link rel="help" href="https://drafts.csswg.org/css-anchor-position/#position-area"> 4 <script src="/resources/testharness.js"></script> 5 <script src="/resources/testharnessreport.js"></script> 6 <script src="/css/support/parsing-testcommon.js"></script> 7 <body> 8 <script> 9 function test_valid_single_position_area_values(valid_keywords) { 10 for (const keyword of valid_keywords) { 11 test_valid_value("position-area", keyword); 12 } 13 }; 14 15 function test_valid_position_area_value_pairs(valid_keywords1, 16 valid_keywords2, 17 flip_order) { 18 for (const keyword1 of valid_keywords1) { 19 for (const keyword2 of valid_keywords2) { 20 if (keyword1 === keyword2) { 21 test_valid_value("position-area", keyword1 + " " + keyword2, keyword1); 22 } else { 23 test_valid_value("position-area", keyword1 + " " + keyword2, 24 flip_order ? keyword2 + " " + keyword1 : keyword1 + " " + keyword2); 25 } 26 } 27 } 28 }; 29 30 function test_valid_position_area_value_pairs_with_span_all_center( 31 valid_keywords, flip_order) { 32 for (const keyword of valid_keywords) { 33 test_valid_value("position-area", keyword + " center", 34 flip_order ? "center " + keyword : keyword + " center"); 35 test_valid_value("position-area", "center " + keyword, 36 flip_order ? "center " + keyword : keyword + " center"); 37 test_valid_value("position-area", keyword + " span-all", keyword); 38 test_valid_value("position-area", "span-all " + keyword, keyword); 39 } 40 }; 41 42 function test_valid_position_area_value_start_end_pairs_with_span_all_center( 43 valid_keywords) { 44 for (const keyword of valid_keywords) { 45 test_valid_value("position-area", keyword + " center"); 46 test_valid_value("position-area", "center " + keyword); 47 test_valid_value("position-area", keyword + " span-all"); 48 test_valid_value("position-area", "span-all " + keyword); 49 } 50 } 51 52 function test_invalid_position_area_value_pairs(valid_keywords1, 53 valid_keywords2) { 54 for (const keyword1 of valid_keywords1) { 55 for (const keyword2 of valid_keywords2) { 56 test_invalid_value("position-area", keyword1 + " " + keyword2); 57 test_invalid_value("position-area", keyword2 + " " + keyword1); 58 } 59 } 60 }; 61 62 function test_invalid_position_area_value_equal_pairs(valid_keywords) { 63 for (const keyword of valid_keywords) { 64 test_invalid_value("position-area", keyword + " " + keyword); 65 } 66 }; 67 68 const horizontal = [ "left", "right", "span-left", "span-right", "x-start", 69 "x-end", "span-x-start", "span-x-end", "self-x-start", 70 "self-x-end", "span-self-x-start", "span-self-x-end" ]; 71 const vertical = [ "top", "bottom", "span-top", "span-bottom", "y-start", 72 "y-end", "span-y-start", "span-y-end", "self-y-start", 73 "self-y-end", "span-self-y-start", "span-self-y-end" ]; 74 const inline = [ "inline-start", "inline-end", "span-inline-start", 75 "span-inline-end" ]; 76 const block = [ "block-start", "block-end", "span-block-start", 77 "span-block-end" ]; 78 const self_inline = [ "self-inline-start", "self-inline-end", 79 "span-self-inline-start", "span-self-inline-end" ]; 80 const self_block = [ "self-block-start", "self-block-end", 81 "span-self-block-start", "span-self-block-end" ]; 82 const start_end = [ "start", "end", "span-start", "span-end" ]; 83 const self_start_end = [ "self-start", "self-end", "span-self-start", 84 "span-self-end" ]; 85 86 // Test initial value 'none' 87 test_valid_value("position-area", "none"); 88 test_invalid_value("position-area", "none none"); 89 test_invalid_value("position-area", "start none"); 90 test_invalid_value("position-area", "none start"); 91 test_invalid_value("position-area", "top left top"); 92 93 // Test keywords allowed in all axes 94 test_valid_value("position-area", "center"); 95 test_valid_value("position-area", "center center", "center") 96 test_valid_value("position-area", "span-all"); 97 test_valid_value("position-area", "span-all span-all", "span-all"); 98 test_valid_value("position-area", "center span-all"); 99 test_valid_value("position-area", "span-all center"); 100 101 test_valid_single_position_area_values(horizontal); 102 test_valid_single_position_area_values(vertical); 103 test_valid_single_position_area_values(inline); 104 test_valid_single_position_area_values(block); 105 test_valid_single_position_area_values(self_inline); 106 test_valid_single_position_area_values(self_block); 107 test_valid_single_position_area_values(start_end); 108 test_valid_single_position_area_values(self_start_end); 109 110 // Used if the sets of valid keywords are serialized in a different order than 111 // the argument order 112 const flip_order = true; 113 114 // Test all valid combinations in both orders 115 test_valid_position_area_value_pairs(horizontal, vertical); 116 test_valid_position_area_value_pairs(vertical, horizontal, flip_order); 117 test_valid_position_area_value_pairs(block, inline); 118 test_valid_position_area_value_pairs(inline, block, flip_order); 119 test_valid_position_area_value_pairs(self_block, self_inline); 120 test_valid_position_area_value_pairs(self_inline, self_block, flip_order); 121 test_valid_position_area_value_pairs(start_end, start_end); 122 test_valid_position_area_value_pairs(self_start_end, self_start_end); 123 124 // Test all valid combinations with 'span-all' and 'center' in both orders 125 test_valid_position_area_value_pairs_with_span_all_center(horizontal); 126 test_valid_position_area_value_pairs_with_span_all_center(vertical, flip_order); 127 test_valid_position_area_value_pairs_with_span_all_center(block); 128 test_valid_position_area_value_pairs_with_span_all_center(inline, flip_order); 129 test_valid_position_area_value_pairs_with_span_all_center(self_block); 130 test_valid_position_area_value_pairs_with_span_all_center(self_inline, flip_order); 131 test_valid_position_area_value_start_end_pairs_with_span_all_center(start_end); 132 test_valid_position_area_value_start_end_pairs_with_span_all_center(self_start_end); 133 134 // Test all invalid combinations with incompatible axes in both orders 135 test_invalid_position_area_value_pairs(horizontal, inline); 136 test_invalid_position_area_value_pairs(horizontal, block); 137 test_invalid_position_area_value_pairs(horizontal, self_inline); 138 test_invalid_position_area_value_pairs(horizontal, self_block); 139 test_invalid_position_area_value_pairs(horizontal, start_end); 140 test_invalid_position_area_value_pairs(horizontal, self_start_end); 141 test_invalid_position_area_value_pairs(vertical, inline); 142 test_invalid_position_area_value_pairs(vertical, block); 143 test_invalid_position_area_value_pairs(vertical, self_inline); 144 test_invalid_position_area_value_pairs(vertical, self_block); 145 test_invalid_position_area_value_pairs(vertical, start_end); 146 test_invalid_position_area_value_pairs(vertical, self_start_end); 147 test_invalid_position_area_value_pairs(inline, self_inline); 148 test_invalid_position_area_value_pairs(inline, self_block); 149 test_invalid_position_area_value_pairs(inline, start_end); 150 test_invalid_position_area_value_pairs(inline, self_start_end); 151 test_invalid_position_area_value_pairs(block, self_inline); 152 test_invalid_position_area_value_pairs(block, self_block); 153 test_invalid_position_area_value_pairs(block, start_end); 154 test_invalid_position_area_value_pairs(block, self_start_end); 155 test_invalid_position_area_value_pairs(start_end, self_start_end); 156 157 // Test all invalid combinations of same axis 158 test_invalid_position_area_value_equal_pairs(horizontal); 159 test_invalid_position_area_value_equal_pairs(vertical); 160 test_invalid_position_area_value_equal_pairs(inline); 161 test_invalid_position_area_value_equal_pairs(block); 162 test_invalid_position_area_value_equal_pairs(self_inline); 163 test_invalid_position_area_value_equal_pairs(self_block); 164 165 // Test one invalid keyword 166 test_invalid_value("position-area", "foobar"); 167 test_invalid_value("position-area", "visible"); 168 test_invalid_value("position-area", "hidden"); 169 170 // Test one valid and one invalid keyword 171 test_invalid_value("position-area", "start foobar"); 172 test_invalid_value("position-area", "end visible"); 173 test_invalid_value("position-area", "block-start hidden"); 174 test_invalid_value("position-area", "hidden inline-end"); 175 176 // Test two invalid keywords 177 test_invalid_value("position-area", "foo bar"); 178 test_invalid_value("position-area", "visible hidden"); 179 test_invalid_value("position-area", "hidden visible"); 180 </script>