Source code
Revision control
Copy as Markdown
Other Tools
Test Info:
- This WPT test may be referenced by the following Test IDs:
- /css/selectors/invalidation/quirks-mode-stylesheet-dynamic-add-001.html - WPT Dashboard Interop Dashboard
<!-- Quirks mode -->
<meta charset="utf-8">
<title>Invalidation of style due to a dynamic stylesheet change in quirks mode</title>
<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
#foo {
width: 100px;
height: 100px;
background: red;
}
</style>
Should see a green square below.
<div id="foo"></div>
<script>
test(function() {
let foo = document.getElementById('foo');
assert_equals(getComputedStyle(foo).backgroundColor, "rgb(255, 0, 0)");
let style = document.createElement('style');
style.textContent = "#FoO { background: green; }";
document.body.appendChild(style);
assert_equals(getComputedStyle(foo).backgroundColor, "rgb(0, 128, 0)");
}, "Style should've changed to a green background");
</script>