at-position-try-allowed-declarations.html (4139B)
1 <!DOCTYPE html> 2 <title>Tests which properties are allowed in @position-try</title> 3 <link rel="help" href="https://drafts.csswg.org/css-anchor-1/#fallback-rule"> 4 <link rel="author" href="mailto:xiaochengh@chromium.org"> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <style id="style"></style> 8 <script> 9 function cleanup() { 10 while (style.sheet.cssRules.length) 11 style.sheet.deleteRule(0); 12 } 13 14 function test_allowed_declaration(property, value = '1px') { 15 test(t => { 16 t.add_cleanup(cleanup); 17 const serialization = `${property}: ${value}`; 18 const rule = `@position-try --foo { ${property}: ${value}; }`; 19 const index = style.sheet.insertRule(rule); 20 const parsed = style.sheet.cssRules[index]; 21 assert_equals(parsed.cssText, `@position-try --foo { ${serialization}; }`); 22 }, `${property}: ${value} is allowed in @position-try`); 23 } 24 25 function test_disallowed_declaration(property, value = '1px') { 26 test(t => { 27 t.add_cleanup(cleanup); 28 const rule = `@position-try --foo { ${property}: ${value}; }`; 29 const index = style.sheet.insertRule(rule); 30 const parsed = style.sheet.cssRules[index]; 31 assert_equals(parsed.cssText, `@position-try --foo { }`); 32 }, `${property}: ${value} is disallowed in @position-try`); 33 } 34 35 // Inset properties are allowed 36 test_allowed_declaration('top'); 37 test_allowed_declaration('bottom'); 38 test_allowed_declaration('left'); 39 test_allowed_declaration('right'); 40 test_allowed_declaration('inset-block-start'); 41 test_allowed_declaration('inset-block-end'); 42 test_allowed_declaration('inset-inline-start'); 43 test_allowed_declaration('inset-inline-end'); 44 test_allowed_declaration('inset-block'); 45 test_allowed_declaration('inset-inline'); 46 test_allowed_declaration('inset'); 47 test_allowed_declaration('position-area', 'span-all'); 48 49 // Margin properties are allowed 50 test_allowed_declaration('margin-top'); 51 test_allowed_declaration('margin-bottom'); 52 test_allowed_declaration('margin-left'); 53 test_allowed_declaration('margin-right'); 54 test_allowed_declaration('margin-block-start'); 55 test_allowed_declaration('margin-block-end'); 56 test_allowed_declaration('margin-inline-start'); 57 test_allowed_declaration('margin-inline-end'); 58 test_allowed_declaration('margin-block'); 59 test_allowed_declaration('margin-inline'); 60 test_allowed_declaration('margin'); 61 62 // Sizing properties are allowed 63 test_allowed_declaration('width'); 64 test_allowed_declaration('height'); 65 test_allowed_declaration('block-size'); 66 test_allowed_declaration('inline-size'); 67 test_allowed_declaration('min-width'); 68 test_allowed_declaration('min-height'); 69 test_allowed_declaration('min-block-size'); 70 test_allowed_declaration('min-inline-size'); 71 test_allowed_declaration('max-width'); 72 test_allowed_declaration('max-height'); 73 test_allowed_declaration('max-block-size'); 74 test_allowed_declaration('max-inline-size'); 75 76 // Box alignment properties are allowed 77 test_allowed_declaration('justify-self', 'normal'); 78 test_allowed_declaration('align-self', 'normal'); 79 test_allowed_declaration('place-self', 'normal'); 80 81 // The 'position-anchor' property is allowed 82 test_allowed_declaration('position-anchor', '--anchor'); 83 84 // Custom properties are disallowed 85 test_disallowed_declaration('--custom'); 86 87 // Test some other disallowed properties 88 test_disallowed_declaration('font-size'); 89 test_disallowed_declaration('border-width'); 90 test_disallowed_declaration('padding'); 91 test_disallowed_declaration('display'); 92 test_disallowed_declaration('position'); 93 test_disallowed_declaration('float'); 94 test_disallowed_declaration('justify-content', 'normal'); 95 test_disallowed_declaration('align-content', 'normal'); 96 test_disallowed_declaration('justify-items', 'normal'); 97 test_disallowed_declaration('align-items', 'normal'); 98 99 // 'revert' and 'revert-layer' are allowed 100 test_allowed_declaration('top', 'revert'); 101 test_allowed_declaration('top', 'revert-layer'); 102 test_allowed_declaration('inset', 'revert'); 103 test_allowed_declaration('inset', 'revert-layer'); 104 105 // !important is disallowed 106 test_disallowed_declaration('top', '1px !important'); 107 test_disallowed_declaration('inset', '1px !important'); 108 </script>