css/css-properties-values-api/determine-registration.html

<!DOCTYPE html>
<link rel="help" href="https://drafts.css-houdini.org/css-properties-values-api-1/#determining-registration">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="./resources/utils.js"></script>
<div id=outer>
  <div id=div></div>
</div>
<script>

test_with_at_property({
  syntax: '"<length>"',
  inherits: false,
  initialValue: '1px'
}, (name) => {
  assert_equals(getComputedStyle(div).getPropertyValue(name), '1px');
}, '@property determines the registration when uncontested');

test_with_at_property({
  syntax: '"<length>"',
  inherits: false,
  initialValue: '2px'
}, (name) => {
  CSS.registerProperty({
    name: name,
    syntax: '<color>',
    inherits: false,
    initialValue: 'green'
  });
  assert_equals(getComputedStyle(div).getPropertyValue(name), 'rgb(0, 128, 0)');
}, 'CSS.registerProperty wins over @property');

test_with_at_property({
  syntax: '"<length>"',
  inherits: false,
  initialValue: '3px'
}, (name1) => {
  with_at_property({
    name: name1,
    syntax: '"<integer>"',
    inherits: false,
    initialValue: '6'
  }, (name2) => {
    assert_equals(name1, name2);
    assert_equals(getComputedStyle(div).getPropertyValue(name2), '6');
  });
}, '@property later in document order wins');

test(() => {
  let name = generate_name();

  with_style_node(`
    @property ${name} {
      syntax: "<length>";
      inherits: false;
      initial-value: 4px;
    }

    @property ${name} {
      syntax: "<color>";
      inherits: false;
      initial-value: red;
    }
  `, () => {
    assert_equals(getComputedStyle(div).getPropertyValue(name), 'rgb(255, 0, 0)');
  });
}, '@property later in stylesheet wins');

test(() => {
  let name = generate_name();
  CSS.registerProperty({
    name: name,
    syntax: '<color>',
    inherits: false,
    initialValue: 'green'
  });
  assert_equals(getComputedStyle(div).getPropertyValue(name), 'rgb(0, 128, 0)');
}, 'CSS.registerProperty determines the registration when uncontested');

test(() => {
  let name = generate_name();

  // ${name} is initially not registered, hence has no initial value.
  assert_equals(getComputedStyle(div).getPropertyValue(name), '');

  with_at_property({
    name: name,
    syntax: '"<length>"',
    inherits: false,
    initialValue: '10px'
  }, () => {
    assert_equals(getComputedStyle(div).getPropertyValue(name), '10px');
  });

  // When the style node is removed, ${name} should be unregistered again.
  assert_equals(getComputedStyle(div).getPropertyValue(name), '');
}, '@property registrations are cleared when rule removed');

test(() => {
  let name = generate_name();

  with_style_node(`div { ${name}: calc(1px + 1px); }`, () => {
    // ${name} should be a token sequence at this point.
    assert_equals(getComputedStyle(div).getPropertyValue(name), ' calc(1px + 1px)');

    with_at_property({
      name: name,
      syntax: '"<length>"',
      inherits: false,
      initialValue: '0px'
    }, () => {
      // ${name} is now a <length>, hence the calc() should be simplified.
      assert_equals(getComputedStyle(div).getPropertyValue(name), '2px');
    });

    // ${name} should be a token sequence again.
    assert_equals(getComputedStyle(div).getPropertyValue(name), ' calc(1px + 1px)');
  });
}, 'Computed value becomes token sequence when @property is removed');

test(() => {
  let name = generate_name();

  with_style_node(`#outer { ${name}: 10px; }`, () => {
    assert_equals(getComputedStyle(div).getPropertyValue(name), ' 10px');

    with_at_property({
      name: name,
      syntax: '"<length>"',
      inherits: false,
      initialValue: '0px'
    }, () => {
      // ${name} is no longer inherited
      assert_equals(getComputedStyle(div).getPropertyValue(name), '0px');
    });

    assert_equals(getComputedStyle(div).getPropertyValue(name), ' 10px');
  });
}, 'Inherited status is reflected in computed styles when @property is removed');

test(() => {
  let name = generate_name();

  with_style_node(`
    @property ${name} {
      syntax: "<length>";
      inherits: false;
      initial-value: 1px;
    }

    @property ${name} {
      inherits: false;
      initial-value: green;
    }
  `, () => {
    assert_equals(getComputedStyle(div).getPropertyValue(name), '1px');
  });
}, 'Invalid @property rule (missing syntax) does not overwrite previous valid rule');

test(() => {
  let name = generate_name();

  with_style_node(`
    @property ${name} {
      syntax: "<length>";
      inherits: false;
      initial-value: 1px;
    }

    @property ${name} {
      syntax: "<color>";
      initial-value: green;
    }
  `, () => {
    assert_equals(getComputedStyle(div).getPropertyValue(name), '1px');
  });
}, 'Invalid @property rule (missing inherits descriptor) does not overwrite previous valid rule');

test(() => {
  let name = generate_name();

  with_style_node(`
    @property ${name} {
      syntax: "<length>";
      inherits: false;
      initial-value: 1px;
    }

    @property ${name} {
      syntax: "<color>";
      inherits: false;
    }
  `, () => {
    assert_equals(getComputedStyle(div).getPropertyValue(name), '1px');
  });
}, 'Invalid @property rule (missing initial-value) does not overwrite previous valid rule');

test(() => {
  let name = generate_name();

  with_style_node(`
    @property ${name} {
      syntax: "<color>";
      inherits: false;
    }

    @property ${name} {
      syntax: "<length>";
      inherits: false;
      initial-value: 1px;
    }
  `, () => {
    assert_equals(getComputedStyle(div).getPropertyValue(name), '1px');
  });
}, 'Previous invalid rule does not prevent valid rule from causing registration');

test(() => {
  let name = generate_name();

  with_style_node(`
    @property ${name} {
      syntax: "<length>";
      inherits: false;
      initial-value: 1px;
      quite-unknown: 200;
    }
  `, () => {
    assert_equals(getComputedStyle(div).getPropertyValue(name), '1px');
  });
}, 'Unknown descriptors are ignored and do not invalidate rule');

</script>