92 lines
3.0 KiB
HTML
92 lines
3.0 KiB
HTML
<!DOCTYPE html>
|
|
<title>Tests parsing of the anchor() function</title>
|
|
<link rel="help" href="https://drafts.csswg.org/css-anchor-1/#anchor-pos">
|
|
<link rel="author" href="mailto:xiaochengh@chromium.org">
|
|
<script src="/resources/testharness.js"></script>
|
|
<script src="/resources/testharnessreport.js"></script>
|
|
<script src="/css/support/parsing-testcommon.js"></script>
|
|
|
|
<script>
|
|
const anchorNames = [
|
|
'',
|
|
'--foo',
|
|
];
|
|
|
|
const insetProperties = [
|
|
'left',
|
|
'right',
|
|
'top',
|
|
'bottom',
|
|
'inset-block-start',
|
|
'inset-block-end',
|
|
'inset-inline-start',
|
|
'inset-inline-end',
|
|
];
|
|
|
|
const anchorSides = [
|
|
'inside',
|
|
'outside',
|
|
'left',
|
|
'right',
|
|
'top',
|
|
'bottom',
|
|
'start',
|
|
'end',
|
|
'self-start',
|
|
'self-end',
|
|
'center',
|
|
'50%',
|
|
'calc(50%)',
|
|
// Array entry in the test list: the first value is the value to be specified;
|
|
// subsequent values are alternative serializations that will also be accepted
|
|
// when checking that the value was set.
|
|
['min(50%, 100%)', 'calc(50%)'],
|
|
];
|
|
|
|
const fallbacks = [
|
|
null,
|
|
'1px',
|
|
'50%',
|
|
'calc(50% + 1px)',
|
|
'anchor(left)',
|
|
'anchor(--bar left)',
|
|
'anchor(--bar left, anchor(--baz right))',
|
|
];
|
|
|
|
// Tests basic combinations
|
|
for (let property of insetProperties) {
|
|
// Using a wrong anchor-side (e.g., `top: anchor(--foo left)`) doesn't cause a
|
|
// parse error, but triggers the fallback when resolved.
|
|
for (let name of anchorNames) {
|
|
for (let side of anchorSides) {
|
|
// 'side' is either a single value, or an array with a value followed by allowable simplifications.
|
|
let anchorSide = Array.isArray(side) ? side[0] : side;
|
|
for (let fallback of fallbacks) {
|
|
let value = `anchor(${name ? name + ' ' : ''}${anchorSide}${fallback ? ', ' + fallback : ''})`;
|
|
let expect = Array.isArray(side)
|
|
? side.map((s) => `anchor(${name ? name + ' ' : ''}${s}${fallback ? ', ' + fallback : ''})`)
|
|
: value;
|
|
test_valid_value(property, value, expect);
|
|
if (name) {
|
|
// The <anchor-element> is allowed to appear after the <anchor-side>
|
|
let value_flip_order = `anchor(${anchorSide} ${name}${fallback ? ', ' + fallback : ''})`;
|
|
test_valid_value(property, value_flip_order, expect);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Tests that anchor() can be used in a calc tree
|
|
// Still follow the simplification process as outlined in https://drafts.csswg.org/css-values-4/#calc-simplification
|
|
test_valid_value('top', 'calc((anchor(--foo top) + anchor(--bar bottom)) / 2)', 'calc(0.5 * (anchor(--foo top) + anchor(--bar bottom)))');
|
|
test_valid_value('top', 'calc(0.5 * (anchor(--foo top) + anchor(--bar bottom)))');
|
|
test_valid_value('top', 'anchor(--foo top, calc(0.5 * anchor(--bar bottom)))');
|
|
test_valid_value('top', 'min(100px, 10%, anchor(--foo top), anchor(--bar bottom))');
|
|
test_valid_value('top', 'calc(anchor(--foo left, 1px) + 10%)', 'calc(10% + anchor(--foo left, 1px))');
|
|
|
|
// Should accept unitless zero
|
|
test_valid_value('top', "anchor(--foo left, 0)", "anchor(--foo left, 0px)");
|
|
test_valid_value('top', "calc(anchor(--foo left, 0))", "anchor(--foo left, 0px)");
|
|
</script>
|