<!DOCTYPE html>
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<div id='testElem'></div>
<script>
test(function() {
assert_equals(testElem.getAttribute('style'), null);
testElem.style.setProperty('--foo', 'first');
assert_equals(testElem.style.getPropertyValue('--foo'), 'first');
assert_equals(getComputedStyle(testElem).getPropertyValue('--foo'), 'first');
assert_equals(testElem.getAttribute('style'), '--foo: first;');
testElem.style.setProperty('--foo', 'second');
assert_equals(testElem.style.getPropertyValue('--foo'), 'second');
assert_equals(testElem.getAttribute('style'), '--foo: second;');
}, "subsequent writes to inline style overwrite older values.")
test(function() {
var value = '10 20% 30px bla("x")';
testElem.style.setProperty('--foo', value);
assert_equals(testElem.style.getPropertyValue('--foo'), value);
testElem.offsetTop;
testElem.style.setProperty('--foo', value);
assert_equals(testElem.style.getPropertyValue('--foo'), value);
testElem.offsetTop;
value = '-5 1.5px [ ]'
testElem.style.setProperty('--foo', value);
assert_equals(testElem.style.getPropertyValue('--foo'), value);
}, "various token types can be compared")
</script>