124 lines
5.4 KiB
HTML
124 lines
5.4 KiB
HTML
<!DOCTYPE html>
|
|
<title>CSS Values and Units Test: attr</title>
|
|
<meta name="assert" content="test attr values">
|
|
<link rel="help" href="https://drafts.csswg.org/css-values-5/#attr-notations">
|
|
<script src="/resources/testharness.js"></script>
|
|
<script src="/resources/testharnessreport.js"></script>
|
|
|
|
<div id="attr"></div>
|
|
<div id="expected"></div>
|
|
|
|
<script>
|
|
function test_attr_cycle(property, propertyValue, attrValue) {
|
|
var elem = document.getElementById("attr");
|
|
var expectedValue = window.getComputedStyle(elem).getPropertyValue(property);
|
|
|
|
elem.setAttribute("data-foo", attrValue);
|
|
elem.style.setProperty(property, propertyValue);
|
|
|
|
test(() => {
|
|
assert_equals(window.getComputedStyle(elem).getPropertyValue(property), expectedValue,
|
|
"Setting property \'" + property + "\' to the value \'" + propertyValue +
|
|
"\', where \'data-foo=" + attrValue + "\' should not change it's value.");
|
|
});
|
|
elem.style.setProperty(property, null);
|
|
}
|
|
|
|
function test_attr_no_cycle(property, propertyValue, attrValue, expectedValue) {
|
|
var elem = document.getElementById("attr");
|
|
elem.setAttribute("data-foo", attrValue);
|
|
elem.style.setProperty(property, propertyValue);
|
|
|
|
var expectedElem = document.getElementById("expected");
|
|
expectedElem.style.setProperty(property, expectedValue);
|
|
|
|
test(() => {
|
|
assert_equals(window.getComputedStyle(elem).getPropertyValue(property),
|
|
window.getComputedStyle(expectedElem).getPropertyValue(property),
|
|
"Value \'" + propertyValue + "\', where \'data-foo=" + attrValue +
|
|
"\' should be valid for the property \'" + property + "\'.");
|
|
});
|
|
|
|
elem.style.setProperty(property, null);
|
|
expectedElem.style.setProperty(property, null);
|
|
}
|
|
|
|
/* Simple cycle */
|
|
test_attr_cycle('--x', 'attr(data-foo type(<ident>))', 'attr(data-foo)');
|
|
test_attr_cycle('--x', 'attr(data-foo type(<length>))', 'attr(data-foo type(<length>))');
|
|
test_attr_cycle('--y', 'attr(data-foo type(*))', 'attr(data-foo type(*))');
|
|
|
|
var attrElem = document.getElementById("attr");
|
|
|
|
attrElem.setAttribute('data-bar', 'attr(data-foo)');
|
|
test_attr_cycle('--y', 'attr(data-foo type(*))', 'attr(data-bar type(*))');
|
|
attrElem.removeAttribute('data-bar');
|
|
|
|
/* Cycle with attr() and var() */
|
|
attrElem.style.setProperty('--x', 'attr(data-foo type(*))');
|
|
test_attr_cycle('--y', 'attr(data-foo type(*))', 'var(--x)');
|
|
attrElem.style.setProperty('--x', null);
|
|
|
|
attrElem.setAttribute('data-bar', 'var(--y)');
|
|
test_attr_cycle('--y', 'attr(data-foo type(<string>))', 'attr(data-bar type(<string>))');
|
|
attrElem.removeAttribute('data-bar');
|
|
|
|
attrElem.setAttribute('data-bar', 'var(--x)');
|
|
test_attr_cycle('--x', 'attr(data-foo type(*), attr(data-bar))', 'attr(data-foo type(*))');
|
|
attrElem.removeAttribute('data-bar');
|
|
|
|
attrElem.style.setProperty('--x', 'attr(data-foo type(*))');
|
|
attrElem.setAttribute('data-bar', 'var(--x)');
|
|
test_attr_cycle('--y', 'attr(data-foo type(*))', 'attr(data-bar type(*), 11) var(--x)');
|
|
attrElem.style.setProperty('--x', null);
|
|
attrElem.removeAttribute('data-bar');
|
|
|
|
/* Cycle with fallback */
|
|
test_attr_cycle('--x', 'attr(data-foo type(<length>), 11px)', 'attr(data-foo type(<length>))');
|
|
test_attr_cycle('--x', 'attr(data-foo type(<length>))', 'attr(data-foo type(<length>), 11px)');
|
|
test_attr_cycle('--y', 'attr(data-foo type(*), 11px)', 'attr(data-foo type(*))');
|
|
|
|
attrElem.setAttribute('data-bar', '11px');
|
|
test_attr_cycle('--x', 'attr(data-foo type(<length>), attr(data-bar type(<length>)))', 'attr(data-foo type(*))');
|
|
attrElem.removeAttribute('data-bar');
|
|
attrElem.setAttribute('data-bar', 'abc');
|
|
test_attr_cycle('--y', 'attr(data-foo type(*), attr(data-bar))', 'attr(data-foo type(*))');
|
|
attrElem.removeAttribute('data-bar');
|
|
|
|
/* Cycle with var() and fallback */
|
|
attrElem.style.setProperty('--x', 'var(--y)');
|
|
test_attr_cycle('--y', 'var(--x, 100)', 'var(--y)');
|
|
attrElem.style.setProperty('--x', null);
|
|
|
|
attrElem.setAttribute('data-bar', 'var(--y)');
|
|
attrElem.style.setProperty('--x', 'attr(data-foo)');
|
|
test_attr_cycle('--y', 'attr(data-foo type(*))', 'attr(data-bar type(*), 11) var(--x, 3)');
|
|
attrElem.style.setProperty('--x', null);
|
|
attrElem.removeAttribute('data-bar');
|
|
|
|
/* Cycle in unused fallbacks */
|
|
test_attr_no_cycle('--y', 'attr(data-foo type(*), var(--y))', '3', '3');
|
|
test_attr_no_cycle('--y', 'attr(data-foo type(*), attr(data-foo))', '3', '3');
|
|
|
|
attrElem.style.setProperty('--x', 'var(--y)');
|
|
test_attr_no_cycle('--y', 'attr(data-foo type(*), var(--x))', '3', '3');
|
|
attrElem.style.setProperty('--x', null);
|
|
|
|
attrElem.setAttribute('data-bar', 'attr(data-foo type(*))');
|
|
test_attr_no_cycle('--y', 'attr(data-foo type(*), attr(data-bar type(*)))', '3', '3');
|
|
attrElem.removeAttribute('data-bar');
|
|
|
|
/* Cycle in fallback */
|
|
test_attr_cycle('--y', 'attr(data-unknown type(*), var(--y))', '3');
|
|
|
|
/* No cycle, use raw CSS string without substitution */
|
|
attrElem.setAttribute('data-bar', 'var(--y)');
|
|
test_attr_no_cycle('--y', 'attr(data-foo type(<string>))', 'attr(data-bar type(<string>))', '');
|
|
attrElem.removeAttribute('data-bar');
|
|
|
|
attrElem.style.setProperty('--x', 'attr(data-foo)');
|
|
attrElem.setAttribute('data-bar', 'var(--x)');
|
|
test_attr_no_cycle('--y', 'attr(data-foo type(*))', 'attr(data-bar, 11) var(--x, 3)', '"var(--x)" "attr(data-bar, 11) var(--x, 3)"');
|
|
attrElem.removeAttribute('data-bar');
|
|
attrElem.style.setProperty('--x', null);
|
|
</script>
|