mirror of
https://github.com/SerenityOS/serenity
synced 2024-07-21 18:15:58 +00:00
04bec7a4f5
Style updates are lazy since late last year, so the StyleInvalidator is actually hurting us more than it's helping by running the entire CSS selector machine on the whole DOM for every attribute change. Instead, simply mark the entire DOM dirty and let the lazy style update mechanism run *once* on next event loop iteration.
30 lines
773 B
HTML
30 lines
773 B
HTML
<html>
|
|
<head>
|
|
<style>
|
|
div[foo] { background-color: green; }
|
|
div[bar] > div { background-color: red; }
|
|
div[baz] ~ div { background-color: blue; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id=bar><div>RED</div></div>
|
|
<div id=foo>GREEN</div>
|
|
<div id=baz></div>
|
|
<div>BLUE</div>
|
|
<script>
|
|
setTimeout(function() {
|
|
for (let id of ["foo", "bar", "baz"]) {
|
|
let e = document.getElementById(id);
|
|
e.setAttribute(id, "");
|
|
}
|
|
setTimeout(function() {
|
|
for (let id of ["foo", "bar", "baz"]) {
|
|
let e = document.getElementById(id);
|
|
e.removeAttribute(id);
|
|
}
|
|
}, 1000);
|
|
}, 1000);
|
|
</script>
|
|
</body>
|
|
</html>
|