css-supports-supports-variables.html

<!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>
chromium/third_party/blink/web_tests/fast/css/variables/css-supports-supports-variables.html
