2 <script src="../../../resources/js-test.js"></script>
6 #outer1on #inner1on { width: 200px }
7 #outer2on { width: 150px }
8 #outer3on#nomatch1 { width: 300px; }
22 <div id="inner3"></div>
25 <div class="nomatch"></div>
26 <div class="outer3"></div>
30 description("Test that adding and removing ids only updates the elements that are affected.");
32 function insertStyleSheet(css)
34 var styleElement = document.createElement("style");
35 styleElement.textContent = css;
36 (document.head || document.documentElement).appendChild(styleElement);
39 var outer = document.getElementById('outer');
40 var inner = document.getElementById('inner1on');
41 var outer2 = document.getElementById('outer2');
42 var outer3 = document.getElementById('outer3');
44 // Style recalc should happen on "inner" and "outer", but not "inner2" or "mid".
46 outer.id = 'outer1on';
47 shouldBe("internals.updateStyleAndReturnAffectedElementCount()", "2");
48 shouldBe("getComputedStyle(inner).width", '"200px"');
50 // Style recalc should happen on "inner", but not "innerChild".
53 shouldBe("internals.updateStyleAndReturnAffectedElementCount()", "1");
54 shouldBe("getComputedStyle(inner).width", '"100px"');
56 // Style recalc should happen on "outer2", but not "inner3".
58 outer2.id = 'outer2on';
59 shouldBe("internals.updateStyleAndReturnAffectedElementCount()", "1");
60 shouldBe("getComputedStyle(outer2).width", '"150px"');
62 // Style recalc should happen on "outer3", but none of its children.
64 outer3.id = 'outer3on';
65 shouldBe("internals.updateStyleAndReturnAffectedElementCount()", "1");