anchor-parse-valid.html

Enable keyboard shortcuts

This test has a WPT meta file that expects 1105 subtest issues.
This WPT test may be referenced by the following Test IDs:
- /css/css-anchor-position/anchor-parse-valid.html - WPT Dashboard Interop Dashboard

<!DOCTYPE html>

<title>Tests parsing of 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>

const anchorNames = [

'',

  '--foo',

];

const insetProperties = [

  'left',

  'right',

  'top',

  'bottom',

  'inset-block-start',

  'inset-block-end',

  'inset-inline-start',

  'inset-inline-end',

];

const anchorSides = [

  'inside',

  'outside',

  'left',

  'right',

  'top',

  'bottom',

  'start',

  'end',

  'self-start',

  'self-end',

  'center',

  '50%',

  'calc(50%)',

  'min(50%, 100%)',

];

const fallbacks = [

  null,

  '1px',

  '50%',

  'calc(50% + 1px)',

  'anchor(left)',

  'anchor(--bar left)',

  'anchor(--bar left, anchor(--baz right))',

];

// Tests basic combinations

for (let property of insetProperties) {

  // Using a wrong anchor-side (e.g., `top: anchor(--foo left)`) doesn't cause a

  // parse error, but triggers the fallback when resolved.

  for (let name of anchorNames) {

    for (let side of anchorSides) {

      for (let fallback of fallbacks) {

        let value = `anchor(${name ? name + ' ' : ''}${side}${fallback ? ', ' + fallback : ''})`;

        test_valid_value(property, value);

        if (name) {

          // The <anchor-element> is allowed to appear after the <anchor-side>

          let value_flip_order = `anchor(${side} ${name}${fallback ? ', ' + fallback : ''})`;

          test_valid_value(property, value_flip_order, value);

// Tests that anchor() can be used in a calc tree

// Still follow the simplification process as outlined in https://drafts.csswg.org/css-values-4/#calc-simplification

test_valid_value('top', 'calc((anchor(--foo top) + anchor(--bar bottom)) / 2)', 'calc(0.5 * (anchor(--foo top) + anchor(--bar bottom)))');

test_valid_value('top', 'calc(0.5 * (anchor(--foo top) + anchor(--bar bottom)))');

test_valid_value('top', 'anchor(--foo top, calc(0.5 * anchor(--bar bottom)))');

test_valid_value('top', 'min(100px, 10%, anchor(--foo top), anchor(--bar bottom))');

</script>