anchor-parse-invalid.html

Enable keyboard shortcuts

This WPT test may be referenced by the following Test IDs:
- /css/css-anchor-position/anchor-parse-invalid.html - WPT Dashboard Interop Dashboard

<!DOCTYPE html>

<title>Tests values that are invalid at parse time for 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>

// anchor() can only be used in inset properties

test_invalid_value('margin-top', 'anchor(--foo top)');

test_invalid_value('height', 'anchor(--foo top)');

test_invalid_value('font-size', 'anchor(--foo top)');

// Invalid parameter format

test_invalid_value('top', 'anchor(--foo, top)');

test_invalid_value('top', 'anchor(--foo top,)');

test_invalid_value('top', 'anchor(--foo top bottom)');

test_invalid_value('top', 'anchor(--foo top, 10px 20%)');

test_invalid_value('top', 'anchor(--foo top, 10px, 20%)');

test_invalid_value('top', 'anchor(2 * 20%)');

test_invalid_value('top', 'anchor((2 * 20%))');

// Anchor name must be a dashed ident

test_invalid_value('top', 'anchor(foo top)');

test_invalid_value('top', 'anchor(top foo)');

// Invalid anchor side values

test_invalid_value('top', 'anchor(--foo height)');

test_invalid_value('top', 'anchor(--foo 10em)');

test_invalid_value('top', 'anchor(--foo 100s)');

// Invalid fallback values

test_invalid_value('top', 'anchor(--foo top, 1)');

test_invalid_value('top', 'anchor(--foo top, 100s)');

test_invalid_value('top', 'anchor(--foo top, bottom)');

test_invalid_value('top', 'anchor(--foo top, anchor(bar top))');

test_invalid_value('top', 'anchor(--foo top, anchor-size(bar height))');

test_invalid_value('top', 'anchor(--foo top, auto');

// Invalid anchor values in calc tree

test_invalid_value('top', 'calc(anchor(foo top) + 10px + 10%)');

test_invalid_value('top', 'calc(10px + 100 * anchor(--foo top, anchor(bar bottom)))');

test_invalid_value('top', 'min(anchor(--foo top), anchor(--bar bottom), anchor-size(baz height))');

</script>