diff options
Diffstat (limited to 'tests/wpt/css-tests/css-variables-1_dev/xhtml1/css-vars-custom-property-case-sensitive-001.xht')
| -rw-r--r-- | tests/wpt/css-tests/css-variables-1_dev/xhtml1/css-vars-custom-property-case-sensitive-001.xht | 26 |
1 files changed, 14 insertions, 12 deletions
diff --git a/tests/wpt/css-tests/css-variables-1_dev/xhtml1/css-vars-custom-property-case-sensitive-001.xht b/tests/wpt/css-tests/css-variables-1_dev/xhtml1/css-vars-custom-property-case-sensitive-001.xht index 809531004fe..dd06c41a7ea 100644 --- a/tests/wpt/css-tests/css-variables-1_dev/xhtml1/css-vars-custom-property-case-sensitive-001.xht +++ b/tests/wpt/css-tests/css-variables-1_dev/xhtml1/css-vars-custom-property-case-sensitive-001.xht @@ -1,26 +1,27 @@ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"><head> - <title>CSS Variables Test: custom property names start with "var-" in lower case</title> + <title>CSS Variables Test: custom property names are case-sensitive</title> <meta charset="UTF-8" /> <link href="mailto:noahcollins@gmail.com" rel="author" title="Noah Collins" /> <link href="http://www.w3.org/TR/css-variables-1/#using-variables" rel="help" /> - <meta content="Custom property names start with var- which must be lower case" name="assert" /> + <meta content="Custom property names are case-sensitive" name="assert" /> <link href="reference/css-vars-custom-property-case-sensitive-ref.xht" rel="match" /> <style type="text/css"> :root { - /* these should be VALID custom property names */ - var-veryblue: #22e; - var-AlsoBlue: #22e; + --veryblue: #22e; + --AlsoBlue: #22e; - /* these should be INVALID custom property names */ - VAR-veryred: #f00; - Var-AlsoRed: #f00; + --veryred: #f00; + --AlsoRed: #f00; } - .blue-good-1 { color: var(veryblue); } - .blue-good-2 { color: var(AlsoBlue); } - .red-bad-1 { color: var(veryred); } - .red-bad-2 { color: var(AlsoRed); } + /* These match the case of the declarations */ + .blue-good-1 { color: var(--veryblue); } + .blue-good-2 { color: var(--AlsoBlue); } + + /* These DO NOT match the case of the declarations */ + .red-bad-1 { color: var(--VeryRed); } + .red-bad-2 { color: var(--alsored); } </style> </head> <body> @@ -32,4 +33,5 @@ <p class="red-bad-1">This paragraph is styled using an invalid CSS Variable name. Fail if red.</p> <p class="red-bad-2">This paragraph is styled using an invalid CSS Variable name. Fail if red.</p> + </body></html>
\ No newline at end of file |