| <!DOCTYPE html> |
| <title>CSS Anchor Positioning: position-area getComputedStyle()</title> |
| <link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/#position-area-computed"> |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| <script src="/css/support/computed-testcommon.js"></script> |
| <script src="/css/support/inheritance-testcommon.js"></script> |
| <div id="container"> |
| <div id="target"></div> |
| </div> |
| <script> |
| // Keywords that refer to the physical horizontal/vertical axes. |
| |
| const horizontal = [ |
| "left", |
| "right", |
| "span-left", |
| "span-right", |
| "x-start", |
| "x-end", |
| "span-x-start", |
| "span-x-end", |
| "self-x-start", |
| "self-x-end", |
| "span-self-x-start", |
| "span-self-x-end" |
| ]; |
| |
| const vertical = [ |
| "top", |
| "bottom", |
| "span-top", |
| "span-bottom", |
| "y-start", |
| "y-end", |
| "span-y-start", |
| "span-y-end", |
| "self-y-start", |
| "self-y-end", |
| "span-self-y-start", |
| "span-self-y-end" |
| ]; |
| |
| // Keywords that refer to the logical block/inline axis. |
| // Key is the full form of the keyword, value is the equivalent reduced keyword. |
| |
| const inline = { |
| "inline-start": "start", |
| "inline-end": "end", |
| "span-inline-start": "span-start", |
| "span-inline-end": "span-end", |
| } |
| |
| const block = { |
| "block-start": "start", |
| "block-end": "end", |
| "span-block-start": "span-start", |
| "span-block-end": "span-end", |
| } |
| |
| const self_inline = { |
| "self-inline-start": "self-start", |
| "self-inline-end": "self-end", |
| "span-self-inline-start": "span-self-start", |
| "span-self-inline-end": "span-self-end", |
| } |
| |
| const self_block = { |
| "self-block-start": "self-start", |
| "self-block-end": "self-end", |
| "span-self-block-start": "span-self-start", |
| "span-self-block-end": "span-self-end", |
| } |
| |
| // Keywords that refer to an ambiguous axis. |
| // Key is the keyword, value is the equivalent keyword if the original keyword refers |
| // to a block or inline axis. |
| |
| const start_end = { |
| "start": { "block": "block-start", "inline": "inline-start" }, |
| "end": { "block": "block-end", "inline": "inline-end" }, |
| "span-start": { "block": "span-block-start", "inline": "span-inline-start" }, |
| "span-end": { "block": "span-block-end", "inline": "span-inline-end" }, |
| }; |
| |
| const self_start_end = { |
| "self-start": { "block": "self-block-start", "inline": "self-inline-start" }, |
| "self-end": { "block": "self-block-end", "inline": "self-inline-end" }, |
| "span-self-start": { "block": "span-self-block-start", "inline": "span-self-inline-start" }, |
| "span-self-end": { "block": "span-self-block-end", "inline": "span-self-inline-end" }, |
| }; |
| |
| function test_single_keyword(keywords) { |
| for (const keyword of keywords) |
| test_computed_value("position-area", keyword); |
| } |
| |
| function test_physical_keywords(horizontal_keywords, vertical_keywords) { |
| for (const horizontal of horizontal_keywords) { |
| for (const vertical of vertical_keywords) { |
| test_computed_value("position-area", `${horizontal} ${vertical}`); |
| test_computed_value("position-area", `${vertical} ${horizontal}`, `${horizontal} ${vertical}`); |
| } |
| } |
| |
| for (const keyword of horizontal_keywords) { |
| test_computed_value("position-area", `${keyword} span-all`, keyword); |
| test_computed_value("position-area", `span-all ${keyword}`, keyword); |
| |
| test_computed_value("position-area", `${keyword} center`); |
| test_computed_value("position-area", `center ${keyword}`, `${keyword} center`); |
| } |
| |
| for (const keyword of vertical_keywords) { |
| test_computed_value("position-area", `span-all ${keyword}`, keyword); |
| test_computed_value("position-area", `${keyword} span-all`, keyword); |
| |
| test_computed_value("position-area", `center ${keyword}`); |
| test_computed_value("position-area", `${keyword} center`, `center ${keyword}`); |
| } |
| } |
| |
| function test_unambiguous_logical_keywords(block_keywords, inline_keywords) { |
| for (const [block_long_keyword, block_short_keyword] of Object.entries(block_keywords)) { |
| for (const [inline_long_keyword, inline_short_keyword] of Object.entries(inline_keywords)) { |
| let expected_computed = `${block_short_keyword} ${inline_short_keyword}`; |
| if (block_short_keyword == inline_short_keyword) |
| expected_computed = block_short_keyword; |
| |
| test_computed_value("position-area", `${block_long_keyword} ${inline_long_keyword}`, expected_computed); |
| test_computed_value("position-area", `${inline_long_keyword} ${block_long_keyword}`, expected_computed); |
| } |
| } |
| |
| for (const [long_keyword, short_keyword] of Object.entries(block_keywords)) { |
| test_computed_value("position-area", `${long_keyword} span-all`, long_keyword); |
| test_computed_value("position-area", `span-all ${long_keyword}`, long_keyword); |
| |
| test_computed_value("position-area", `${long_keyword} center`, `${short_keyword} center`); |
| test_computed_value("position-area", `center ${long_keyword}`, `${short_keyword} center`); |
| } |
| |
| for (const [long_keyword, short_keyword] of Object.entries(inline_keywords)) { |
| test_computed_value("position-area", `${long_keyword} span-all`, long_keyword); |
| test_computed_value("position-area", `span-all ${long_keyword}`, long_keyword); |
| |
| test_computed_value("position-area", `${long_keyword} center`, `center ${short_keyword}`); |
| test_computed_value("position-area", `center ${long_keyword}`, `center ${short_keyword}`); |
| } |
| } |
| |
| function test_ambiguous_logical_keywords(keywords) { |
| for (const keyword1 of Object.keys(keywords)) { |
| for (const keyword2 of Object.keys(keywords)) { |
| if (keyword1 == keyword2) |
| test_computed_value("position-area", `${keyword1} ${keyword2}`, `${keyword1}`); |
| else |
| test_computed_value("position-area", `${keyword1} ${keyword2}`); |
| } |
| } |
| |
| for (const [keyword, { block: block_keyword, inline: inline_keyword }] of Object.entries(keywords)) { |
| test_computed_value("position-area", `${keyword} span-all`, block_keyword); |
| test_computed_value("position-area", `span-all ${keyword}`, inline_keyword); |
| |
| test_computed_value("position-area", `${keyword} center`); |
| test_computed_value("position-area", `center ${keyword}`); |
| }; |
| } |
| |
| // Test computed value when position-area is a single keyword. |
| test_computed_value("position-area", "none"); |
| test_computed_value("position-area", "span-all"); |
| test_computed_value("position-area", "center"); |
| test_single_keyword(horizontal); |
| test_single_keyword(vertical); |
| test_single_keyword(Object.keys(inline)); |
| test_single_keyword(Object.keys(block)); |
| test_single_keyword(Object.keys(self_inline)); |
| test_single_keyword(Object.keys(self_block)); |
| test_single_keyword(Object.keys(start_end)); |
| test_single_keyword(Object.keys(self_start_end)); |
| |
| // Test computed value when position-area are two keywords. |
| test_physical_keywords(horizontal, vertical); |
| test_unambiguous_logical_keywords(block, inline); |
| test_unambiguous_logical_keywords(self_block, self_inline); |
| test_ambiguous_logical_keywords(start_end); |
| test_ambiguous_logical_keywords(self_start_end); |
| |
| test_computed_value("position-area", "span-all span-all", "span-all"); |
| test_computed_value("position-area", "span-all center"); |
| test_computed_value("position-area", "center span-all"); |
| test_computed_value("position-area", "center center", "center"); |
| |
| assert_not_inherited("position-area", "none", "span-all"); |
| </script> |
