registered-property-cssom.html

Enable keyboard shortcuts

This WPT test may be referenced by the following Test IDs:
- /css/css-properties-values-api/registered-property-cssom.html - WPT Dashboard Interop Dashboard

<!DOCTYPE HTML>

<link rel="help" href="https://drafts.css-houdini.org/css-properties-values-api/#dom-css-registerproperty" />

<script src="/resources/testharness.js"></script>

<script src="/resources/testharnessreport.js"></script>

<style>

#inner {

  --length: 10px;

  --color: red;

#outer {

  --length: 77px;

  --color: blue;

</style>

<div id=outer>

  <div id=inner></div>

</div>

<script>

var computedStyle = getComputedStyle(inner);

var inlineStyle = inner.style;

var sheetStyle = document.styleSheets[0].cssRules[0].style;

test(function() {

  // Nothing registered yet, whatever you specify works

  assert_equals(computedStyle.getPropertyValue('--length'), '10px');

  assert_equals(computedStyle.getPropertyValue('--color'), 'red');

}, "Initially unregistered values from stylesheet");

test(function() {

  inlineStyle.setProperty('--length', '5');

  inlineStyle.setProperty('--color', 'hello');

  assert_equals(inlineStyle.getPropertyValue('--length'), '5');

  assert_equals(inlineStyle.getPropertyValue('--color'), 'hello');

  assert_equals(computedStyle.getPropertyValue('--length'), '5');

  assert_equals(computedStyle.getPropertyValue('--color'), 'hello');

}, "CSSOM setters function as expected for unregistered properties");

test(function() {

  CSS.registerProperty({name: '--length', syntax: '<length>', initialValue: '0px', inherits: false});

  CSS.registerProperty({name: '--color', syntax: '<color>', initialValue: 'white', inherits: true});

}, "CSS.registerProperty");

test(function() {

  assert_equals(inlineStyle.getPropertyValue('--length'), '5');

  assert_equals(inlineStyle.getPropertyValue('--color'), 'hello');

  assert_equals(computedStyle.getPropertyValue('--length'), '0px');

  assert_equals(computedStyle.getPropertyValue('--color'), 'rgb(0, 0, 255)');

}, "Formerly valid values are still readable from inline styles but are computed as the unset value");

test(function() {

  inlineStyle.setProperty('--length', 'hi');

  inlineStyle.setProperty('--color', '20');

  assert_equals(inlineStyle.getPropertyValue('--length'), 'hi');

  assert_equals(inlineStyle.getPropertyValue('--color'), '20');

}, "Values not matching the registered type can still be set");

test(function() {

  inlineStyle.removeProperty('--length');

  inlineStyle.setProperty('--color', '');

  assert_equals(inlineStyle.getPropertyValue('--length'), '');

  assert_equals(inlineStyle.getPropertyValue('--color'), '');

  assert_equals(computedStyle.getPropertyValue('--length'), '10px');

  assert_equals(computedStyle.getPropertyValue('--color'), 'rgb(255, 0, 0)');

}, "Values can be removed from inline styles");

test(function() {

  // 'banana' is not a valid <length>, but still accepted.

  sheetStyle.setProperty('--length', 'banana');

  assert_equals(computedStyle.getPropertyValue('--length'), '0px');

  sheetStyle.setProperty('--length', '20px');

  assert_equals(computedStyle.getPropertyValue('--length'), '20px');

  sheetStyle.setProperty('--length', 'initial');

  assert_equals(computedStyle.getPropertyValue('--length'), '0px');

}, "Stylesheets can be modified by CSSOM");

test(function() {

  inlineStyle.setProperty('--length', '30px');

  inlineStyle.setProperty('--color', 'pink');

  assert_equals(inlineStyle.getPropertyValue('--length'), '30px');

  assert_equals(inlineStyle.getPropertyValue('--color'), 'pink');

  assert_equals(computedStyle.getPropertyValue('--length'), '30px');

  assert_equals(computedStyle.getPropertyValue('--color'), 'rgb(255, 192, 203)');

  inlineStyle.setProperty('--color', 'inherit');

  assert_equals(inlineStyle.getPropertyValue('--color'), 'inherit');

  assert_equals(computedStyle.getPropertyValue('--color'), 'rgb(0, 0, 255)');

}, "Valid values can be set on inline styles");

</script>