Source code
Revision control
Copy as Markdown
Other Tools
Test Info: Warnings
- This test has a WPT meta file that expects 3 subtest issues.
- This WPT test may be referenced by the following Test IDs:
- /css/css-values/attr-security-if.html - WPT Dashboard Interop Dashboard
<!-- Adapted from attr-security.html -->
<!DOCTYPE html>
<title>CSS Values and Units Test: attr() security limitations using if()</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
@property --some-string {
syntax: "<string>";
inherits: false;
initial-value: "empty";
}
div {
--condition-val: 3;
--str: text;
--true: true;
--some-string: attr(data-foo);
}
</style>
<html>
<body>
<div id="attr"></div>
</body>
</html>
<script>
function test_attr(property, attrString, attrValue, expectedValue) {
var elem = document.getElementById("attr");
elem.setAttribute("data-foo", attrValue);
elem.style.setProperty("--unregistered", attrString);
let value = window.getComputedStyle(elem).getPropertyValue("--unregistered");
test(() => {
// Skip tests that include unsupported functions, since they are not violation of attr() security.
if (value == "" || CSS.supports(`${property} : ${value}`)) {
elem.style.setProperty(property, attrString);
assert_equals(window.getComputedStyle(elem).getPropertyValue(property),
expectedValue);
}
}, `'${property}: ${attrString}' with data-foo="${attrValue}"`);
elem.style.setProperty(property, null);
}
// Test attr-tainting carries through if() function.
test_attr('--x',
`image-set(if(style(--true): attr(data-foo);))`,
url,
`image-set("${url}")`);
test_attr('background-image',
'image-set(if(style(--true): attr(data-foo);))',
url,
'none');
test_attr('background-image',
`image-set(
if(style(--true): url(${url2});
else: attr(data-foo);))`,
url2,
`image-set(url("${url2}") 1dppx)`);
test_attr('background-image',
`image-set(
if(style(--some-string): url(${url});))`,
url,
'none');
test_attr('background-image',
`image-set(
if(style(--condition-val: attr(data-foo type(*))): url(${url});))`,
'3',
'none');
test_attr('background-image',
`image-set(
if(style(--condition-val: attr(data-foo type(*))): url(${url});
style(--true): url(${url});
else: url(${url});))`,
'1',
'none');
test_attr('background-image',
`image-set(if(style(--true): url(${url});
style(--condition-val): url(${url});
else: url(${url});))`,
'attr(data-foo type(*))',
`image-set(url("${url}") 1dppx)`);
test_attr('background-image',
`image-set(
if(style(--condition-val: if(style(--true): attr(data-foo type(*));)): url(${url});))`,
'3',
'none');
test_attr('--x',
`image-set(if(style(--condition-val: if(style(--true): attr(data-foo type(*));)): url(${url});))`,
'3',
`image-set(url(${url}))`);
test_attr('--x',
`image-set(if(style(--condition-val >= attr(data-foo type(*))): url(${url});))`,
'3',
`image-set(url(${url}))`);
test_attr('background-image',
`image-set(
if(style(--condition-val >= attr(data-foo type(*))): url(${url});))`,
'3',
'none');
test_attr('background-image',
`image-set(
if(style(--condition-val < attr(data-foo type(*))): url(${url});))`,
'3',
'none');
test_attr('background-image',
`image-set(
if(style(--str < attr(data-foo type(*))): url(${url});))`,
'3',
'none');
test_attr('background-image',
`image-set(
if(style(--condition-val < attr(data-foo type(*))): url(${url});))`,
'text',
'none');
</script>