anchor-name-basics.html (1374B)
1 <!DOCTYPE html> 2 <title>Tests basics of the 'anchor-name' property</title> 3 <link rel="help" href="https://drafts.csswg.org/css-anchor-1/#propdef-anchor-name"> 4 <link rel="author" href="mailto:xiaochengh@chromium.org"> 5 <script src="/resources/testharness.js"></script> 6 <script src="/resources/testharnessreport.js"></script> 7 <script src="/css/support/parsing-testcommon.js"></script> 8 <script src="/css/support/computed-testcommon.js"></script> 9 <script src="/css/support/inheritance-testcommon.js"></script> 10 <script src="/css/support/interpolation-testcommon.js"></script> 11 12 <div id="container"> 13 <div id="target"></div> 14 </div> 15 16 <script> 17 // anchor-name: none | <dashed-ident># 18 test_valid_value('anchor-name', 'none'); 19 test_valid_value('anchor-name', '--foo'); 20 test_valid_value('anchor-name', '--foo, --bar') 21 test_invalid_value('anchor-name', 'foo-bar'); 22 test_invalid_value('anchor-name', '--foo --bar') 23 test_invalid_value('anchor-name', '100px'); 24 test_invalid_value('anchor-name', '100%'); 25 26 // Computed value: as specified 27 test_computed_value('anchor-name', 'none'); 28 test_computed_value('anchor-name', '--foo'); 29 test_computed_value('anchor-name', '--foo, --bar'); 30 31 // Initial: none 32 // Inherited: no 33 assert_not_inherited('anchor-name', 'none', '--foo'); 34 35 // Animation type: discrete 36 test_no_interpolation({ 37 property: 'anchor-name', 38 from: '--foo', 39 to: 'none', 40 }); 41 </script>