<!DOCTYPE html>
<script src="../../../resources/js-test.js"></script>
<style>
div { width: 100px }
[outer="1"] [inner="1"] { width: 200px }
[outer="2"] { width: 150px }
[outer="3"][nomatch="1"] { width: 300px; }
</style>
<div id="outer">
<div id="mid">
<div id="inner" inner="1">
<div id="innerChild">
</div>
</div>
<div id="inner2">
</div>
</div>
</div>
<div id="outer2">
<div id="inner3"></div>
</div>
<div id="outer3">
<div class="nomatch"></div>
<div class="outer3"></div>
</div>
<script>
description("Test that adding and removing class names only updates the elements that are affected.");
function insertStyleSheet(css)
{
var styleElement = document.createElement("style");
styleElement.textContent = css;
(document.head || document.documentElement).appendChild(styleElement);
}
var outer = document.getElementById('outer');
var inner = document.getElementById('inner');
var outer2 = document.getElementById('outer2');
var outer3 = document.getElementById('outer3');
// Style recalc should happen on "inner" and "outer", but not "inner2" or "mid".
outer.offsetTop;
outer.setAttribute('outer', '1');
shouldBe("internals.updateStyleAndReturnAffectedElementCount()", "2");
shouldBe("getComputedStyle(inner).width", '"200px"');
// Style recalc should happen on "inner", but not "innerChild".
inner.offsetTop;
inner.removeAttribute('inner');
shouldBe("internals.updateStyleAndReturnAffectedElementCount()", "1");
shouldBe("getComputedStyle(inner).width", '"100px"');
// Style recalc should happen on "outer2", but not "inner3".
outer2.offsetTop;
outer2.setAttribute('outer', '2');
shouldBe("internals.updateStyleAndReturnAffectedElementCount()", "1");
shouldBe("getComputedStyle(outer2).width", '"150px"');
// Style recalc should happen on "outer3", but none of its children.
outer3.offsetTop;
outer3.setAttribute('outer', '3');
shouldBe("internals.updateStyleAndReturnAffectedElementCount()", "1");
</script>