<!DOCTYPE html>
<title>CSS Anchor Positioning: inset-area parsing</title>
<link rel="help" href="https://drafts.csswg.org/css-anchor-position/#inset-area">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/parsing-testcommon.js"></script>
<body>
<script>
function test_valid_single_inset_area_values(valid_keywords) {
for (const keyword of valid_keywords) {
test_valid_value("inset-area", keyword);
}
};
function test_valid_inset_area_value_pairs(valid_keywords1,
valid_keywords2,
flip_order) {
for (const keyword1 of valid_keywords1) {
for (const keyword2 of valid_keywords2) {
if (keyword1 === keyword2) {
test_valid_value("inset-area", keyword1 + " " + keyword2, keyword1);
} else {
test_valid_value("inset-area", keyword1 + " " + keyword2,
flip_order ? keyword2 + " " + keyword1 : keyword1 + " " + keyword2);
}
}
}
};
function test_valid_inset_area_value_pairs_with_span_all_center(
valid_keywords, flip_order) {
for (const keyword of valid_keywords) {
test_valid_value("inset-area", keyword + " center",
flip_order ? "center " + keyword : keyword + " center");
test_valid_value("inset-area", "center " + keyword,
flip_order ? "center " + keyword : keyword + " center");
test_valid_value("inset-area", keyword + " span-all", keyword);
test_valid_value("inset-area", "span-all " + keyword, keyword);
}
};
function test_valid_inset_area_value_start_end_pairs_with_span_all_center(
valid_keywords) {
for (const keyword of valid_keywords) {
test_valid_value("inset-area", keyword + " center");
test_valid_value("inset-area", "center " + keyword);
test_valid_value("inset-area", keyword + " span-all");
test_valid_value("inset-area", "span-all " + keyword);
}
}
function test_invalid_inset_area_value_pairs(valid_keywords1,
valid_keywords2) {
for (const keyword1 of valid_keywords1) {
for (const keyword2 of valid_keywords2) {
test_invalid_value("inset-area", keyword1 + " " + keyword2);
test_invalid_value("inset-area", keyword2 + " " + keyword1);
}
}
};
function test_invalid_inset_area_value_equal_pairs(valid_keywords) {
for (const keyword of valid_keywords) {
test_invalid_value("inset-area", keyword + " " + keyword);
}
};
const horizontal = [ "left", "right", "span-left", "span-right", "x-start",
"x-end", "span-x-start", "span-x-end", "x-self-start",
"x-self-end", "span-x-self-start", "span-x-self-end" ];
const vertical = [ "top", "bottom", "span-top", "span-bottom", "y-start",
"y-end", "span-y-start", "span-y-end", "y-self-start",
"y-self-end", "span-y-self-start", "span-y-self-end" ];
const inline = [ "inline-start", "inline-end", "span-inline-start",
"span-inline-end" ];
const block = [ "block-start", "block-end", "span-block-start",
"span-block-end" ];
const self_inline = [ "self-inline-start", "self-inline-end",
"span-self-inline-start", "span-self-inline-end" ];
const self_block = [ "self-block-start", "self-block-end",
"span-self-block-start", "span-self-block-end" ];
const start_end = [ "start", "end", "span-start", "span-end" ];
const self_start_end = [ "self-start", "self-end", "span-self-start",
"span-self-end" ];
// Test initial value 'none'
test_valid_value("inset-area", "none");
test_invalid_value("inset-area", "none none");
test_invalid_value("inset-area", "start none");
test_invalid_value("inset-area", "none start");
test_invalid_value("inset-area", "top left top");
// Test keywords allowed in all axes
test_valid_value("inset-area", "center");
test_valid_value("inset-area", "center center", "center")
test_valid_value("inset-area", "span-all");
test_valid_value("inset-area", "span-all span-all", "span-all");
test_valid_value("inset-area", "center span-all");
test_valid_value("inset-area", "span-all center");
test_valid_single_inset_area_values(horizontal);
test_valid_single_inset_area_values(vertical);
test_valid_single_inset_area_values(inline);
test_valid_single_inset_area_values(block);
test_valid_single_inset_area_values(start_end);
test_valid_single_inset_area_values(self_start_end);
// Used if the sets of valid keywords are serialized in a different order than
// the argument order
const flip_order = true;
// Test all valid combinations in both orders
test_valid_inset_area_value_pairs(horizontal, vertical);
test_valid_inset_area_value_pairs(vertical, horizontal, flip_order);
test_valid_inset_area_value_pairs(block, inline);
test_valid_inset_area_value_pairs(inline, block, flip_order);
test_valid_inset_area_value_pairs(self_block, self_inline);
test_valid_inset_area_value_pairs(self_inline, self_block, flip_order);
test_valid_inset_area_value_pairs(start_end, start_end);
test_valid_inset_area_value_pairs(self_start_end, self_start_end);
// Test all valid combinations with 'span-all' and 'center' in both orders
test_valid_inset_area_value_pairs_with_span_all_center(horizontal);
test_valid_inset_area_value_pairs_with_span_all_center(vertical, flip_order);
test_valid_inset_area_value_pairs_with_span_all_center(block);
test_valid_inset_area_value_pairs_with_span_all_center(inline, flip_order);
test_valid_inset_area_value_pairs_with_span_all_center(self_block);
test_valid_inset_area_value_pairs_with_span_all_center(self_inline, flip_order);
test_valid_inset_area_value_start_end_pairs_with_span_all_center(start_end);
test_valid_inset_area_value_start_end_pairs_with_span_all_center(self_start_end);
// Test all invalid combinations with incompatible axes in both orders
test_invalid_inset_area_value_pairs(horizontal, inline);
test_invalid_inset_area_value_pairs(horizontal, block);
test_invalid_inset_area_value_pairs(horizontal, self_inline);
test_invalid_inset_area_value_pairs(horizontal, self_block);
test_invalid_inset_area_value_pairs(horizontal, start_end);
test_invalid_inset_area_value_pairs(horizontal, self_start_end);
test_invalid_inset_area_value_pairs(vertical, inline);
test_invalid_inset_area_value_pairs(vertical, block);
test_invalid_inset_area_value_pairs(vertical, self_inline);
test_invalid_inset_area_value_pairs(vertical, self_block);
test_invalid_inset_area_value_pairs(vertical, start_end);
test_invalid_inset_area_value_pairs(vertical, self_start_end);
test_invalid_inset_area_value_pairs(inline, self_inline);
test_invalid_inset_area_value_pairs(inline, self_block);
test_invalid_inset_area_value_pairs(inline, start_end);
test_invalid_inset_area_value_pairs(inline, self_start_end);
test_invalid_inset_area_value_pairs(block, self_inline);
test_invalid_inset_area_value_pairs(block, self_block);
test_invalid_inset_area_value_pairs(block, start_end);
test_invalid_inset_area_value_pairs(block, self_start_end);
test_invalid_inset_area_value_pairs(start_end, self_start_end);
// Test all invalid combinations of same axis
test_invalid_inset_area_value_equal_pairs(horizontal);
test_invalid_inset_area_value_equal_pairs(vertical);
test_invalid_inset_area_value_equal_pairs(inline);
test_invalid_inset_area_value_equal_pairs(block);
test_invalid_inset_area_value_equal_pairs(self_inline);
test_invalid_inset_area_value_equal_pairs(self_block);
</script>
Codebase Browser
chromium