108 lines
4 KiB
HTML
108 lines
4 KiB
HTML
<!DOCTYPE html>
|
|
<title>Tests which properties are allowed in @position-try</title>
|
|
<link rel="help" href="https://drafts.csswg.org/css-anchor-1/#fallback-rule">
|
|
<link rel="author" href="mailto:xiaochengh@chromium.org">
|
|
<script src="/resources/testharness.js"></script>
|
|
<script src="/resources/testharnessreport.js"></script>
|
|
<style id="style"></style>
|
|
<script>
|
|
function cleanup() {
|
|
while (style.sheet.cssRules.length)
|
|
style.sheet.deleteRule(0);
|
|
}
|
|
|
|
function test_allowed_declaration(property, value = '1px') {
|
|
test(t => {
|
|
t.add_cleanup(cleanup);
|
|
const serialization = `${property}: ${value}`;
|
|
const rule = `@position-try --foo { ${property}: ${value}; }`;
|
|
const index = style.sheet.insertRule(rule);
|
|
const parsed = style.sheet.cssRules[index];
|
|
assert_equals(parsed.cssText, `@position-try --foo { ${serialization}; }`);
|
|
}, `${property}: ${value} is allowed in @position-try`);
|
|
}
|
|
|
|
function test_disallowed_declaration(property, value = '1px') {
|
|
test(t => {
|
|
t.add_cleanup(cleanup);
|
|
const rule = `@position-try --foo { ${property}: ${value}; }`;
|
|
const index = style.sheet.insertRule(rule);
|
|
const parsed = style.sheet.cssRules[index];
|
|
assert_equals(parsed.cssText, `@position-try --foo { }`);
|
|
}, `${property}: ${value} is disallowed in @position-try`);
|
|
}
|
|
|
|
// Inset properties are allowed
|
|
test_allowed_declaration('top');
|
|
test_allowed_declaration('bottom');
|
|
test_allowed_declaration('left');
|
|
test_allowed_declaration('right');
|
|
test_allowed_declaration('inset-block-start');
|
|
test_allowed_declaration('inset-block-end');
|
|
test_allowed_declaration('inset-inline-start');
|
|
test_allowed_declaration('inset-inline-end');
|
|
test_allowed_declaration('inset-block');
|
|
test_allowed_declaration('inset-inline');
|
|
test_allowed_declaration('inset');
|
|
test_allowed_declaration('position-area', 'span-all');
|
|
|
|
// Margin properties are allowed
|
|
test_allowed_declaration('margin-top');
|
|
test_allowed_declaration('margin-bottom');
|
|
test_allowed_declaration('margin-left');
|
|
test_allowed_declaration('margin-right');
|
|
test_allowed_declaration('margin-block-start');
|
|
test_allowed_declaration('margin-block-end');
|
|
test_allowed_declaration('margin-inline-start');
|
|
test_allowed_declaration('margin-inline-end');
|
|
test_allowed_declaration('margin-block');
|
|
test_allowed_declaration('margin-inline');
|
|
test_allowed_declaration('margin');
|
|
|
|
// Sizing properties are allowed
|
|
test_allowed_declaration('width');
|
|
test_allowed_declaration('height');
|
|
test_allowed_declaration('block-size');
|
|
test_allowed_declaration('inline-size');
|
|
test_allowed_declaration('min-width');
|
|
test_allowed_declaration('min-height');
|
|
test_allowed_declaration('min-block-size');
|
|
test_allowed_declaration('min-inline-size');
|
|
test_allowed_declaration('max-width');
|
|
test_allowed_declaration('max-height');
|
|
test_allowed_declaration('max-block-size');
|
|
test_allowed_declaration('max-inline-size');
|
|
|
|
// Box alignment properties are allowed
|
|
test_allowed_declaration('justify-self', 'normal');
|
|
test_allowed_declaration('align-self', 'normal');
|
|
test_allowed_declaration('place-self', 'normal');
|
|
|
|
// The 'position-anchor' property is allowed
|
|
test_allowed_declaration('position-anchor', '--anchor');
|
|
|
|
// Custom properties are disallowed
|
|
test_disallowed_declaration('--custom');
|
|
|
|
// Test some other disallowed properties
|
|
test_disallowed_declaration('font-size');
|
|
test_disallowed_declaration('border-width');
|
|
test_disallowed_declaration('padding');
|
|
test_disallowed_declaration('display');
|
|
test_disallowed_declaration('position');
|
|
test_disallowed_declaration('float');
|
|
test_disallowed_declaration('justify-content', 'normal');
|
|
test_disallowed_declaration('align-content', 'normal');
|
|
test_disallowed_declaration('justify-items', 'normal');
|
|
test_disallowed_declaration('align-items', 'normal');
|
|
|
|
// 'revert' and 'revert-layer' are allowed
|
|
test_allowed_declaration('top', 'revert');
|
|
test_allowed_declaration('top', 'revert-layer');
|
|
test_allowed_declaration('inset', 'revert');
|
|
test_allowed_declaration('inset', 'revert-layer');
|
|
|
|
// !important is disallowed
|
|
test_disallowed_declaration('top', '1px !important');
|
|
test_disallowed_declaration('inset', '1px !important');
|
|
</script>
|