<!DOCTYPE html><!-- webkit-test-runner [ experimental:CSSCustomPropertiesAndValuesEnabled=true ] -->
<script src="../resources/testharness.js"></script>
<script src="../resources/testharnessreport.js"></script>

<style>
  #parent1 {
    width: 500px;
    background: blue;
    --my-custom-prop: 100px;
  }
  #child1 {
    background: green;
    width: var(--my-custom-prop);
  }

  #parent2 {
    width: 500px;
    background: blue;
    --my-custom-prop2: 100px;
  }
  #child2 {
    background: green;
    width: var(--my-custom-prop2);
  }

  #parent3 {
    width: 500px;
    background: blue;
    --my-custom-prop3: 100px;
  }
  #child3 {
    background: green;
    width: var(--my-custom-prop3);
  }

  #parent4 {
    width: 500px;
    background: blue;
    --my-custom-prop: 100px;
  }
  #child4 {
    background: green;
    --my-custom-prop: initial;
    width: var(--my-custom-prop, 300px);
  }

  #parent5 {
    width: 500px;
    background: blue;
    --my-custom-prop: 100px;
  }
  #child5 {
    background: green;
    --my-custom-prop: unset;
    width: var(--my-custom-prop, 300px);
  }

  #parent6 {
    width: 500px;
    background: blue;
    --my-custom-prop2: 100px;
  }
  #child6 {
    background: green;
    --my-custom-prop2: unset;
    width: var(--my-custom-prop2, 300px);
  }

  #parent7 {
    width: 500px;
    background: blue;
    --my-custom-prop: 100px;
  }
  #child7 {
    background: green;
    --my-custom-prop: var(--my-custom-prop2);
    --my-custom-prop2: var(--my-custom-prop);
    width: var(--my-custom-prop2, 300px);
  }

  #parent8 {
    width: 500px;
    background: blue;
  }
  #child8 {
    background: green;
    --my-custom-prop: 400px;
    --my-custom-prop2: var(--my-custom-prop);
    --my-custom-prop: var(--my-custom-prop2);
    width: var(--my-custom-prop, 300px);
  }

  #parent9 {
    width: 500px;
    background: blue;
    --my-custom-prop: 100px;
  }
  #child9 {
    background: green;
    --my-custom-prop: var(--my-custom-prop2, 400px);
    --my-custom-prop2: var(--my-custom-prop);
    width: var(--my-custom-prop2, 300px);
  }

  #parent10 {
    width: 500px;
    background: blue;
    --my-custom-prop: 100px;
  }
  #child10 {
    background: green;
    --my-custom-prop2: calc(var(--my-custom-prop) + 10px);
    width: var(--my-custom-prop2, 300px);
  }

  #parent11 {
    width: 500px;
    background: blue;
    --my-custom-prop-unreg2: 100px;
  }
  #child11 {
    background: green;
    --my-custom-prop-unreg: var(--my-custom-prop2-unreg);
    --my-custom-prop2-unreg: var(--my-custom-prop-unreg);
    width: var(--my-custom-prop2-unreg, 300px);
  }

  #parent12 {
    width: 500px;
    background: blue;
    --my-custom-prop: 100px;
  }
  #child12 {
    background: green;
    --my-custom-prop: 190px;
    width: calc(var(--my-custom-prop, 300px) + 5px);
  }
  #childchild12 {
    background: purple;
    --my-custom-prop: revert;
    width: var(--my-custom-prop, 300px);
  }

  #parent13 {
    width: 500px;
    background: blue;
    --my-custom-prop2: 100px;
  }
  #child13 {
    background: green;
    --my-custom-prop2: 190px;
    width: var(--my-custom-prop2, 300px);
  }
  #childchild13 {
    background: purple;
    --my-custom-prop2: revert;
    width: var(--my-custom-prop2, 300px);
  }

  #parent14 {
    width: 500px;
    background: blue;
    --my-custom-prop-unreg: 100px;
  }
  #child14 {
    background: green;
    --my-custom-prop-unreg: 190px;
    width: calc(var(--my-custom-prop-unreg, 300px) + 5px);
  }
  #childchild14 {
    background: purple;
    --my-custom-prop-unreg: revert;
    width: var(--my-custom-prop-unreg, 300px);
  }

  #parent14-1 {
    width: 500px;
    background: blue;
    --my-custom-prop-unreg: 100px;
  }
  #child14-1 {
    background: green;
    --my-custom-prop-unreg: 190px;
    width: calc(var(--my-custom-prop-unreg, 300px) + 5px);
  }
  #childchild14-1 {
    background: purple;
    --my-custom-prop-unreg: inherit;
    width: var(--my-custom-prop-unreg, 300px);
  }

  #parent15 {
    width: 500px;
    background: blue;
    font-size: 16px;
    --my-custom-prop: calc(1em + 10px);
    word-spacing: var(--my-custom-prop);
  }
  #child15 {
    font-size: 32px;
  }

  #parent16 {
    width: 500px;
    background: blue;
    font-size: 16px;
    --my-custom-prop-unreg: calc(1em + 10px);
    word-spacing: var(--my-custom-prop-unreg);
  }
  #child16 {
    font-size: 32px;
  }

  #parent17 {
    width: 500px;
    background: blue;
    --my-custom-prop2: 100px;
  }
  #child17 {
    background: green;
    width: var(--my-custom-prop2);
  }

  #parent18 {
    width: 500px;
    background: blue;
    --my-custom-prop-no-initial-value: 100px;
  }
  #child18 {
    background: green;
    width: var(--my-custom-prop-no-initial-value);
  }

  #parent19 {
    width: 500px;
    background: blue;
    --my-custom-prop-unreg: 100px;
  }
  #child19 {
    background: green;
    --my-custom-prop-unreg: inherit;
    width: var(--my-custom-prop-unreg);
  }
</style>
<div>
  <p> Specified in parent, inherits=true</p>
  <div id="parent1"><div id="child1"><p>test</p></div> </div>
  <p> Specified in parent, inherits=false </p>
  <div id="parent2"><div id="child2"><p>test</p></div> </div>
  <p> Specified in parent, not registered </p>
  <div id="parent3"><div id="child3"><p>test</p></div> </div>
  <p> Initial </p>
  <div id="parent4"><div id="child4"><p>test</p></div> </div>
  <p> Unset, inherits=true </p>
  <div id="parent5"><div id="child5"><p>test</p></div> </div>
  <p> Unset, inherits=false </p>
  <div id="parent6"><div id="child6"><p>test</p></div> </div>
  <p> A cycle between an inherits=true and inherits=false property </p>
  <div id="parent7"><div id="child7"><p>test</p></div> </div>
  <p> A cycle between an inherits=true and inherits=false property </p>
  <div id="parent8"><div id="child8"><p>test</p></div> </div>
  <p> A cycle between an inherits=true and inherits=false property with fallback </p>
  <div id="parent9"><div id="child9"><p>test</p></div> </div>
  <p> Inheritance should not create a cycle </p>
  <div id="parent10"><div id="child10"><p>test</p></div></div>
  <p> A cycle between two unregistered properties </p>
  <div id="parent11"><div id="child11"><p>test</p></div> </div>

  <p> Revert, inherits=true </p>
  <div id="parent12"><div id="child12"><div id="childchild12"><p>test</p></div></div></div>
  <p> Revert, inherits=false </p>
  <div id="parent13"><div id="child13"><div id="childchild13"><p>test</p></div></div> </div>
  <p> Revert, unregistered </p>
  <div id="parent14"><div id="child14"><div id="childchild14"><p>test</p></div></div> </div>
  <p> Inherit, unregistered </p>
  <div id="parent14-1"><div id="child14-1"><div id="childchild14-1"><p>test</p></div></div> </div>

  <p> Test that inherited properties do variable substitution before being inherited - registered</p>
  <div id="parent15"><div id="child15"><p>test</p></div> </div>
  <p> Test that inherited properties do variable substitution before being inherited - unregistered</p>
  <div id="parent16"><div id="child16"><p>test</p></div> </div>

  <p> No initial value in registered property should act like unregistered</p>
  <div id="parent17"><div id="child17"><p>test</p></div> </div>
  <p> (unregistered) </p>
  <div id="parent18"><div id="child18"><p>test</p></div> </div>

  <p>Inherit should be substituted for unregistered property</p>
  <div id="parent19"><div id="child19"><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: '--my-custom-prop',
    syntax: '<length>',
    inherits: true,
    initialValue: '200px'
  })

  CSS.registerProperty({
    name: '--my-custom-prop2',
    syntax: '<length>',
    inherits: false,
    initialValue: '200px'
  })

  CSS.registerProperty({
    name: '--my-custom-prop-no-initial-value',
    syntax: '*',
    inherits: false
  })
}, "Registration is successful");
test(function() {
  test_prop('child1', 'width', '100px');
  test_prop('child1', '--my-custom-prop', '100px');
  test_prop('child1', '--my-custom-prop2', '200px');
}, "JS Attributes are valid for element 1");
test(function() {
  test_prop('child2', 'width', '200px');
  test_prop('child2', '--my-custom-prop', '200px');
  test_prop('child2', '--my-custom-prop2', '200px');
}, "JS Attributes are valid for element 2");
test(function() {
  test_prop('child3', 'width', '100px');
  test_prop('child3', '--my-custom-prop3', '100px');
  test_prop('child3', '--my-custom-prop2', '200px');
}, "JS Attributes are valid for element 3");
test(function() {
  test_prop('child4', 'width', '200px');
  test_prop('child4', '--my-custom-prop', '200px');
  test_prop('child4', '--my-custom-prop2', '200px');
}, "JS Attributes are valid for element 4");
test(function() {
  test_prop('child5', 'width', '100px');
  test_prop('child5', '--my-custom-prop', '100px');
  test_prop('child5', '--my-custom-prop2', '200px');
}, "JS Attributes are valid for element 5");
test(function() {
  test_prop('child6', 'width', '200px');
  test_prop('child6', '--my-custom-prop', '200px');
  test_prop('child6', '--my-custom-prop2', '200px');
}, "JS Attributes are valid for element 6");
test(function() {
  test_prop('child7', 'width', '300px');
  test_prop('child7', '--my-custom-prop', '');
  test_prop('child7', '--my-custom-prop2', '');
}, "JS Attributes are valid for element 7");
test(function() {
  test_prop('child8', 'width', '300px');
  test_prop('child8', '--my-custom-prop', '');
  test_prop('child8', '--my-custom-prop2', '');
}, "JS Attributes are valid for element 8");
test(function() {
  test_prop('child9', 'width', '300px');
  test_prop('child9', '--my-custom-prop', '');
  test_prop('child9', '--my-custom-prop2', '');
}, "JS Attributes are valid for element 9");
test(function() {
  test_prop('child10', 'width', '110px');
  test_prop('child10', '--my-custom-prop', '100px');
  test_prop('child10', '--my-custom-prop2', '110px');
}, "JS Attributes are valid for element 10");
test(function() {
  test_prop('child11', 'width', '300px');
  test_prop('child11', '--my-custom-prop-unreg', '');
  test_prop('child11', '--my-custom-prop2-unreg', '');
}, "JS Attributes are valid for element 11");

test(function() {
  test_prop('childchild12', 'width', '190px');
  test_prop('childchild12', '--my-custom-prop', '190px');
  test_prop('child12', 'width', '195px');
  test_prop('child12', '--my-custom-prop', '190px');
  test_prop('parent12', '--my-custom-prop', '100px');
}, "JS Attributes are valid for element 12");
test(function() {
  test_prop('childchild13', 'width', '200px');
  test_prop('childchild13', '--my-custom-prop2', '200px');
  test_prop('child13', 'width', '190px');
  test_prop('child13', '--my-custom-prop2', '190px');
  test_prop('parent13', '--my-custom-prop2', '100px');
}, "JS Attributes are valid for element 13");
test(function() {
  // Chrome and firefox do not pass this because they do not
  // support revert, as of September 2018
  test_prop('childchild14', 'width', '190px');
  test_prop('childchild14', '--my-custom-prop-unreg', '190px');
  test_prop('child14', 'width', '195px');
  test_prop('child14', '--my-custom-prop-unreg', '190px');
  test_prop('parent14', '--my-custom-prop-unreg', '100px');
}, "JS Attributes are valid for element 14");
test(function() {
  test_prop('childchild14-1', 'width', '190px');
  test_prop('childchild14-1', '--my-custom-prop-unreg', '190px');
  test_prop('child14-1', 'width', '195px');
  test_prop('child14-1', '--my-custom-prop-unreg', '190px');
  test_prop('parent14-1', '--my-custom-prop-unreg', '100px');
}, "JS Attributes are valid for element 14-1");

test(function() {
  test_prop('parent15', 'word-spacing', '26px');
  test_prop('child15', 'word-spacing', '26px');
  test_prop('parent15', '--my-custom-prop', '26px');
  test_prop('child15', '--my-custom-prop', '26px');
}, "JS Attributes are valid for element 15");
test(function() {
  test_prop('parent16', 'word-spacing', '26px');
  test_prop('child16', 'word-spacing', '26px');
  test_prop('parent16', '--my-custom-prop-unreg', 'calc(1em + 10px)');
  test_prop('child16', '--my-custom-prop-unreg', 'calc(1em + 10px)');
}, "JS Attributes are valid for element 16");

test(function() {
  test_prop('child17', 'width', '200px');
  test_prop('child17', '--my-custom-prop2', '200px');
}, "JS Attributes are valid for element 17");
test(function() {
  test_prop('child18', 'width', '500px');
  test_prop('child18', '--my-custom-prop-no-initial-value', '');
}, "JS Attributes are valid for element 18");

test(function() {
  test_prop('child19', 'width', '100px');
  test_prop('child19', '--my-custom-prop-unreg', '100px');
}, "JS Attributes are valid for element 19");
</script>