| <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> |
