| <html> |
| <head> |
| <style> |
| html { |
| background: grey; |
| } |
| .parent1 { |
| width: 500px; |
| background: blue; |
| } |
| .child1 { |
| background: green; |
| width: 100px; |
| } |
| |
| .parent2 { |
| width: 500px; |
| background: blue; |
| } |
| .child2 { |
| background: green; |
| width: 200px; |
| } |
| |
| .parent3 { |
| width: 500px; |
| background: blue; |
| } |
| .child3 { |
| background: green; |
| width: 500px; |
| } |
| |
| .parent4 { |
| width: 500px; |
| background: blue; |
| } |
| .child4 { |
| background: green; |
| width: 200px; |
| } |
| |
| .parent5 { |
| width: 500px; |
| background: blue; |
| } |
| .child5 { |
| background: green; |
| width: 300px; |
| } |
| |
| .parent6 { |
| width: 500px; |
| background: blue; |
| } |
| .child6 { |
| background: green; |
| width: 500px; |
| } |
| |
| .parent7 { |
| width: 500px; |
| background: blue; |
| } |
| .child7 { |
| background: green; |
| width: 500px; |
| } |
| </style> |
| </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> |
