| <!DOCTYPE html> |
| <script src="../../../resources/testharness.js"></script> |
| <script src="../../../resources/testharnessreport.js"></script> |
| <style> |
| #testElem { |
| --foo:pretty much anything; |
| --space: space at start; |
| --bar:including this(</style> |
| <style> |
| #testElem { |
| --far\ :this is OK too (); |
| --foo\ \ :and this \(; |
| } |
| </style> |
| <style> |
| #testElem { |
| --wow: wow!; |
| } |
| </style> |
| <style> |
| #testElem { |
| --yay: yay :-); |
| } |
| </style> |
| <style> |
| #testElem { |
| --n: |
| </style> |
| <style> |
| #testElem { |
| --wrong: ' |
| </style> |
| <div id='testElem'></div> |
| <script> |
| test(function() { |
| assert_true(CSS.supports('--foo', 'pretty much anything')); |
| assert_true(CSS.supports('--bar', 'including this(')); |
| assert_true(CSS.supports('--far ', 'this is OK too ()')); |
| assert_true(CSS.supports('--foo ', 'and this \\(')); |
| assert_false(CSS.supports('--wow', 'wow!')); |
| assert_false(CSS.supports('--yay', 'yay :-)')); |
| assert_true(CSS.supports('--n', '\n')); |
| assert_false(CSS.supports('--wrong', "'\n")); |
| assert_true(CSS.supports('--space', ' space at start')); |
| |
| assert_false(CSS.supports('--width', '100px) and (width: 100px'), |
| "it's tempting to implement this supports function in terms of the other one. Don't."); |
| }, "Test that CSS.supports(prop, val) returns true for custom properties."); |
| |
| test(function() { |
| assert_equals(getComputedStyle(testElem).getPropertyValue('--foo'), 'pretty much anything'); |
| assert_equals(getComputedStyle(testElem).getPropertyValue('--bar'), 'including this('); |
| assert_equals(getComputedStyle(testElem).getPropertyValue('--far '), 'this is OK too ()'); |
| assert_equals(getComputedStyle(testElem).getPropertyValue('--foo '), 'and this \\('); |
| assert_equals(getComputedStyle(testElem).getPropertyValue('--wow'), ''); |
| assert_equals(getComputedStyle(testElem).getPropertyValue('--yay'), ''); |
| assert_equals(getComputedStyle(testElem).getPropertyValue('--n'), ' '); |
| assert_equals(getComputedStyle(testElem).getPropertyValue('--wrong'), ''); |
| assert_equals(getComputedStyle(testElem).getPropertyValue('--space'), ' space at start'); |
| }, "Test that above CSS.supports values can be specified in style."); |
| |
| test(function() { |
| testElem.style.setProperty('--foo', 'pretty much anything'); |
| testElem.style.setProperty('--bar', 'including this('); |
| testElem.style.setProperty('--far ', 'this is OK too ()'); |
| testElem.style.setProperty('--foo ', 'and this \\('); |
| testElem.style.setProperty('--wow', 'wow!'); |
| testElem.style.setProperty('--yay', 'yay :-)'); |
| testElem.style.setProperty('--n', '\n'); |
| testElem.style.setProperty('--wrong', "'\n"); |
| testElem.style.setProperty('--space', ' space at start'); |
| assert_equals(testElem.style.getPropertyValue('--foo'), 'pretty much anything'); |
| assert_equals(testElem.style.getPropertyValue('--bar'), 'including this('); |
| assert_equals(testElem.style.getPropertyValue('--far '), 'this is OK too ()'); |
| assert_equals(testElem.style.getPropertyValue('--foo '), 'and this \\('); |
| assert_equals(testElem.style.getPropertyValue('--wow'), ''); |
| assert_equals(testElem.style.getPropertyValue('--yay'), ''); |
| assert_equals(testElem.style.getPropertyValue('--n'), ' '); |
| assert_equals(testElem.style.getPropertyValue('--wrong'), ''); |
| assert_equals(testElem.style.getPropertyValue('--space'), ' space at start'); |
| }, "Test that above CSS.supports values can be written into inline style via CSSOM API"); |
| </script> |
