<!DOCTYPE html><!-- webkit-test-runner [ experimental:CSSCustomPropertiesAndValuesEnabled=true ] -->
<!-- https://chromium.googlesource.com/chromium/src/+/01ce431409e3a019858677626a983c55168da6dc/third_party/WebKit/LayoutTests/custom-properties/register-property.html -->
<script src="../resources/testharness.js"></script>
<script src="../resources/testharnessreport.js"></script>

<style>
  #parent1 {
    width: 500px;
    background: blue;
  }
  #child1 {
    background: green;
    font-size: 10px;
    --a: 10em;
    width: var(--a);
  }

  #parent2 {
    width: 500px;
    background: blue;
    --a: 10em;
    font-size: calc( var(--a) + -150px);
  }
  #child2 {
    background: green;
    width: var(--a);
  }

  #parent3 {
    width: 500px;
    background: blue;
    --b: 10em;
    font-size: calc( var(--b) + -150px);
  }
  #child3 {
    background: green;
    width: var(--b);
  }

  #parent4 {
    width: 500px;
    background: blue;
    --b: 10em;
    font-size: calc( var(--b) + -150px);
  }
  #child4 {
    background: green;
    --a: var(--b);
    font-size: var(--a);
    width: var(--a);
  }

  #parent5 {
    width: 500px;
    background: blue;
    --b: 5em;
    font-size: calc( var(--b) + -70px);
  }
  #child5 {
    background: green;
    --c: var(--b);
    font-size: var(--c);
    width: var(--c);
  }
</style>
<div>
  <div id="parent1"><div id="child1"><p>test</p></div></div>
  <div id="parent2"><div id="child2"><p>test</p></div></div>
  <div id="parent3"><div id="child3"><p>test</p></div></div>
  <div id="parent4"><div id="child4"><p>test</p></div></div>
  <div id="parent5"><div id="child5"><p>test</p></div></div>
</div>
<script>

function test_prop(id, prop, expected) {
  assert_equals(window.getComputedStyle(document.getElementById(id)).getPropertyValue(prop).trim(), expected);
}

test(function() {
  CSS.registerProperty({
    name: '--a',
    syntax: '<length>',
    inherits: true,
    initialValue: '200px'
  })
}, "Registration is successful");
test(function() {
  test_prop('child1', 'width', '100px');
  test_prop('child1', '--a', '100px');
  test_prop('child1', '--b', '');
  test_prop('parent1', '--a', '200px');
  test_prop('parent1', '--b', '');
}, "JS Attributes are valid for element 1");
test(function() {
  test_prop('child2', 'width', '160px');
  test_prop('child2', '--a', '160px');
  test_prop('child2', '--b', '');
  test_prop('child2', 'font-size', '16px');
  test_prop('parent2', '--a', '160px');
  test_prop('parent2', '--b', '');
  test_prop('parent2', 'font-size', '16px');
}, "JS Attributes are valid for element 2");
test(function() {
  test_prop('child3', 'width', '100px');
  test_prop('child3', '--a', '200px');
  test_prop('child3', '--b', '10em');
  test_prop('child3', 'font-size', '10px');
  test_prop('parent3', '--a', '200px');
  test_prop('parent3', '--b', '10em');
  test_prop('parent3', 'font-size', '10px');
}, "JS Attributes are valid for element 3");
test(function() {
  test_prop('child4', 'width', '100px');
  test_prop('child4', '--a', '100px');
  test_prop('child4', '--b', '10em');
  test_prop('child4', 'font-size', '10px');
  test_prop('parent4', '--a', '200px');
  test_prop('parent4', '--b', '10em');
  test_prop('parent4', 'font-size', '10px');
}, "JS Attributes are valid for element 4");
test(function() {
  test_prop('child5', 'width', '250px');
  test_prop('child5', '--c', '5em');
  test_prop('child5', '--b', '5em');
  test_prop('child5', 'font-size', '50px');
  test_prop('parent5', '--a', '200px');
  test_prop('parent5', '--b', '5em');
  test_prop('parent5', 'font-size', '10px');
}, "JS Attributes are valid for element 5");
</script>