LayoutTests/css-custom-properties-api/initialValue.html

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

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

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

    .parent4 {
      width: 500px;
      background: blue;
    }
    .child4 {
      background: green;
      width: var(--my-custom-prop2, 300px);
    }

    .parent5 {
      width: 500px;
      background: blue;
    }
    .child5 {
      background: green;
      width: var(--my-custom-prop3, 300px);
    }

    .parent6 {
      width: 500px;
      background: blue;
    }
    .child6 {
      background: green;
      --my-custom-prop: 100px;
      width: var(--my-custom-prop3, --my-custom-prop1);
    }

    .parent7 {
      width: 500px;
      background: blue;
    }
    .child7 {
      background: green;
      --my-custom-prop: 100px;
      width: var(--my-custom-prop4);
    }
  </style>
  <script>
    CSS.registerProperty({
      name: '--my-custom-prop',
      syntax: '<length>',
      inherits: false,
      initialValue: '200px'
    })

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

    CSS.registerProperty({
      name: '--my-custom-prop4',
      syntax: '<length>',
      inherits: false,
      initialValue: 'var(--my-custom-prop)'
    })
  </script>
</head>
<body>
  <p> Single values </p>
  <p> Specified </p>
  <div class="parent1"><div class="child1"><p>100px green</p></div> </div>
  <p> Not specified, use initial value </p>
  <div class="parent2"><div class="child2"><p>200px green</p></div> </div>
  <p> Not specified, but not registered so use initial value for width </p>
  <div class="parent3"><div class="child3"><p>500px green</p></div> </div>
  <p> Has a fallback for registered property </p>
  <div class="parent4"><div class="child4"><p>200px green</p></div> </div>
  <p> Has a fallback for unregistered property </p>
  <div class="parent5"><div class="child5"><p>300px green</p></div> </div>
  <p> Having a fallback for a registered property that is a variable should not work</p>
  <div class="parent6"><div class="child6"><p>500px green</p></div> </div>
  <p> Having a variable in the initial value should not work</p>
  <div class="parent7"><div class="child7"><p>500px green</p></div> </div>
</body>
</html>