Swarup Ukil
2781c005fd
`if()` is not part of Interop, so splitting the attr-security tests that use it into a separate file. Differential Revision: https://phabricator.services.mozilla.com/D293440
123 lines
4.3 KiB
HTML
123 lines
4.3 KiB
HTML
<!-- Adapted from attr-security.html -->
|
|
<!DOCTYPE html>
|
|
<title>CSS Values and Units Test: attr() security limitations using if()</title>
|
|
<link rel="help" href="https://drafts.csswg.org/css-values-5/#attr-security">
|
|
<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);
|
|
}
|
|
|
|
const url = "https://does-not-exist.test/404.png";
|
|
const url2 = "https://does-not-exist-2.test/404.png";
|
|
|
|
// 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>
|