css-vars-custom-property-case-sensitive-001.html (1137B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>CSS Variables Test: custom property names are case-sensitive</title> 5 <meta charset="UTF-8"> 6 <link rel="author" title="Noah Collins" href="mailto:noahcollins@gmail.com"> 7 <link rel="help" href="http://www.w3.org/TR/css-variables-1/#using-variables"> 8 <meta name="assert" content="Custom property names are case-sensitive"> 9 <link rel="match" href="/css/reference/ref-filled-green-100px-square.xht"> 10 <style type="text/css"> 11 :root { 12 --lowercasegreen: green; 13 --MixedCaseGreen: green; 14 15 --lowercasered: red; 16 --MixedCaseRed: red; 17 } 18 div { 19 width: 100px; 20 height: 25px; 21 } 22 </style> 23 </head> 24 <body> 25 <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> 26 <div style="background-color: var(--lowercasegreen, red);"></div> 27 <div style="background-color: var(--MixedCaseGreen, red);"></div> 28 <div style="background-color: var(--LowerCaseRed, green);"></div> 29 <div style="background-color: var(--mixedcasered, green);"></div> 30 </body> 31 </html>