anchor-parse-invalid.html (2118B)
1 <!DOCTYPE html> 2 <title>Tests values that are invalid at parse time for the anchor() function</title> 3 <link rel="help" href="https://drafts.csswg.org/css-anchor-1/#anchor-pos"> 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 9 <script> 10 // anchor() can only be used in inset properties 11 test_invalid_value('margin-top', 'anchor(--foo top)'); 12 test_invalid_value('height', 'anchor(--foo top)'); 13 test_invalid_value('font-size', 'anchor(--foo top)'); 14 15 // Invalid parameter format 16 test_invalid_value('top', 'anchor(--foo, top)'); 17 test_invalid_value('top', 'anchor(--foo top,)'); 18 test_invalid_value('top', 'anchor(--foo top bottom)'); 19 test_invalid_value('top', 'anchor(--foo top, 10px 20%)'); 20 test_invalid_value('top', 'anchor(--foo top, 10px, 20%)'); 21 test_invalid_value('top', 'anchor(2 * 20%)'); 22 test_invalid_value('top', 'anchor((2 * 20%))'); 23 24 // Anchor name must be a dashed ident 25 test_invalid_value('top', 'anchor(foo top)'); 26 test_invalid_value('top', 'anchor(top foo)'); 27 28 // Invalid anchor side values 29 test_invalid_value('top', 'anchor(--foo height)'); 30 test_invalid_value('top', 'anchor(--foo 10em)'); 31 test_invalid_value('top', 'anchor(--foo 100s)'); 32 33 // Invalid fallback values 34 test_invalid_value('top', 'anchor(--foo top, 1)'); 35 test_invalid_value('top', 'anchor(--foo top, 100s)'); 36 test_invalid_value('top', 'anchor(--foo top, bottom)'); 37 test_invalid_value('top', 'anchor(--foo top, anchor(bar top))'); 38 test_invalid_value('top', 'anchor(--foo top, anchor-size(bar height))'); 39 test_invalid_value('top', 'anchor(--foo top, auto'); 40 41 // Invalid anchor values in calc tree 42 test_invalid_value('top', 'calc(anchor(foo top) + 10px + 10%)'); 43 test_invalid_value('top', 'calc(10px + 100 * anchor(--foo top, anchor(bar bottom)))'); 44 test_invalid_value('top', 'min(anchor(--foo top), anchor(--bar bottom), anchor-size(baz height))'); 45 46 // Invalid unit anchor fallback value in calc tree 47 test_invalid_value('top', 'calc(anchor(--foo top, 1) + 1px)'); 48 </script>