Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- This WPT test may be referenced by the following Test IDs:
- /svg/styling/invalidation/attribute-style-invalidation.html - WPT Dashboard Interop Dashboard
<!DOCTYPE html>
<meta charset="utf-8">
<title>SVG attribute changes invalidate selectors and attr() values</title>
<link rel="author" title="Kurt Catti-Schmidt" href="mailto:kschmi@microsoft.com">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
#selector-target[x="30"] {
fill: green;
}
#attr-target {
stroke-width: attr(data-width px);
}
</style>
<svg>
<rect id="selector-target" x="10" width="20" height="20" fill="red"></rect>
<rect id="attr-target" data-width="10" width="20" height="20"
style="opacity: 0.5"></rect>
</svg>
<script>
test(() => {
const target = document.getElementById("selector-target");
target.getBoundingClientRect();
assert_equals(getComputedStyle(target).fill, "rgb(255, 0, 0)");
target.x.baseVal.value = 30;
assert_equals(getComputedStyle(target).fill, "rgb(0, 128, 0)");
}, "Changing an SVG length through baseVal updates attribute selector matching");
test(() => {
const target = document.getElementById("attr-target");
target.getBoundingClientRect();
assert_equals(getComputedStyle(target).strokeWidth, "10px");
// Keep both mutations pending until the next style read.
target.style.opacity = "0.75";
target.setAttribute("data-width", "30");
assert_equals(getComputedStyle(target).strokeWidth, "30px");
assert_equals(getComputedStyle(target).opacity, "0.75");
}, "An attribute change updates attr() after a pending inline style change");
</script>