Antti Koivisto
f39f3956a3
Automatic update from web-platform-tests WebKit export of https://bugs.webkit.org/show_bug.cgi?id=310794 (#58785) -- wpt-commits: f38ade7d9e6a1987a4c426e412938f6afa111f86 wpt-pr: 58785
68 lines
3.2 KiB
HTML
68 lines
3.2 KiB
HTML
<!DOCTYPE html>
|
|
<title>CSS Values and Units Test: attr() argument grammar</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" data-bar="3"></div>
|
|
<div id="expected"></div>
|
|
|
|
<script>
|
|
function test_attr(property, attrString, attrValue, expectedValue) {
|
|
var elem = document.getElementById("attr");
|
|
elem.setAttribute("data-foo", attrValue);
|
|
elem.style.setProperty(property, attrString);
|
|
|
|
var expectedElem = document.getElementById("expected");
|
|
expectedElem.style.setProperty(property, expectedValue);
|
|
|
|
test(() => {
|
|
assert_equals(window.getComputedStyle(elem).getPropertyValue(property),
|
|
window.getComputedStyle(expectedElem).getPropertyValue(property),
|
|
"Value \'" + attrString + "\', where \'data-foo=" + attrValue +
|
|
"\' should be valid for the property \'" + property + "\'.");
|
|
});
|
|
|
|
elem.style.setProperty(property, null);
|
|
expectedElem.style.setProperty(property, null);
|
|
}
|
|
|
|
document.getElementById("attr").style.setProperty('--x', 'data-foo type(<number>)');
|
|
test_attr('font-weight', 'attr(var(--x))', '10', '10');
|
|
test_attr('font-weight', 'attr(var(--x),)', '10', '10');
|
|
test_attr('font-weight', 'attr(var(--x), 10)', 'invalid', '10');
|
|
document.getElementById("attr").style.setProperty('--x', 'data-foo ');
|
|
test_attr('font-weight', 'attr(var(--x))', '10', '"10"');
|
|
test_attr('font-weight', 'attr(var(--x),)', '10', '"10"');
|
|
test_attr('font-weight', 'attr(var())', '10', '');
|
|
test_attr('font-weight', 'attr(())', '10', '');
|
|
test_attr('font-weight', 'attr(!)', '10', '');
|
|
|
|
document.getElementById("attr").style.setProperty('--x', 'data-foo type(<number>), 10');
|
|
test_attr('font-weight', 'attr(var(--x))', '10', '');
|
|
|
|
document.getElementById("attr").style.setProperty('--y', 'data-foo type(<custom-ident>)');
|
|
test_attr('--x', 'attr(var(--y), 3px)', 'var(--y)', '3px');
|
|
document.getElementById("attr").style.setProperty('--y', null);
|
|
|
|
// Cycles
|
|
document.getElementById("attr").style.setProperty('--y', 'data-foo type(*)');
|
|
test_attr('--x', 'attr(var(--y))', 'var(--x)', '');
|
|
document.getElementById("attr").style.setProperty('--y', null);
|
|
|
|
document.getElementById("attr").style.setProperty('--y', 'data-foo type(<custom-ident>)');
|
|
test_attr('--x', 'attr(var(--y), 3px)', 'var(--x)', '');
|
|
document.getElementById("attr").style.setProperty('--y', null);
|
|
|
|
// var() in the type position only.
|
|
document.getElementById("attr").style.setProperty('--type', 'type(<number>)');
|
|
test_attr('font-weight', 'attr(data-foo var(--type))', '42', '42');
|
|
test_attr('font-weight', 'attr(data-foo var(--type), 100)', 'invalid', '100');
|
|
document.getElementById("attr").style.setProperty('--type', null);
|
|
|
|
document.getElementById("attr").style.setProperty('--unit', 'number');
|
|
test_attr('font-weight', 'attr(data-foo var(--unit))', '42', '42');
|
|
document.getElementById("attr").style.setProperty('--unit', null);
|
|
|
|
</script> |