mozilla-central/testing/web-platform/tests/css/css-values/attr-security.html

Source code

Revision control

Copy as Markdown

Other Tools

Test Info: Warnings

<!DOCTYPE html>
<title>CSS Values and Units Test: attr() security limitations</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
@property --some-url {
syntax: "<string>";
inherits: false;
initial-value: "empty";
}
@property --some-url-list {
syntax: "<string>+";
inherits: false;
initial-value: "empty";
}
div {
--some-url: attr(data-foo);
--some-url-list: attr(data-foo);
--some-other-url: 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(property, attrString);
test(() => {
assert_equals(window.getComputedStyle(elem).getPropertyValue(property),
expectedValue,
"'" + property + ": " + attrString + "' with data-foo='" + attrValue + "'");
});
elem.style.setProperty(property, null);
}
// Direct use.
test_attr('--x',
'image-set(attr(data-foo))',
test_attr('background-image',
'image-set(attr(data-foo))',
'none');
test_attr('background-image',
'image-set(url("https://does-not-exist.test/404.png") 1dppx)');
test_attr('--x',
'src(attr(data-foo))',
test_attr('background-image',
'src(attr(data-foo))',
'none');
test_attr('background-image',
test_attr('--x',
'src(string("https://does-not-exist.test" attr(data-foo)))',
'/404.png',
'src(string("https://does-not-exist.test" "/404.png"))');
test_attr('background-image',
'src(string("https://does-not-exist.test" attr(data-foo)))',
'/404.png',
'none');
test_attr('background-image',
'/404.png',
test_attr('--x',
'image(attr(data-foo))',
test_attr('background-image',
'image(attr(data-foo))',
'none');
test_attr('background-image',
test_attr('--x',
'image(attr(data-foo))',
test_attr('background-image',
'image(attr(data-foo))',
'none');
test_attr('background-image',
// The remaining tests use image-set(), but should be equivalent for image() etc.
// Test in a fallback.
test_attr('--x',
'image-set(var(--y, attr(data-foo)))',
test_attr('background-image',
'image-set(var(--y, attr(data-foo)))',
'none');
// Test via a registered custom property.
test_attr('--x',
'image-set(var(--some-url))',
test_attr('background-image',
'image-set(var(--some-url))',
'none');
// Test via a registered custom property (list).
test_attr('--x',
'image-set(var(--some-url))',
test_attr('background-image',
'image-set(var(--some-url))',
'none');
// Test via a non-registered custom property.
test_attr('--x',
'image-set(var(--some-other-url))',
test_attr('background-image',
'image-set(var(--some-other-url))',
'none');
</script>