Merge Chromium + Blink git repositories
[chromium-blink-merge.git] / third_party / WebKit / LayoutTests / fast / css / invalidation / targeted-attribute-style-invalidation.html
blobcbf93f25445e35a58d889a3d84305dd9889f1c51
1 <!DOCTYPE html>
2 <script src="../../../resources/js-test.js"></script>
4 <style>
5 div { width: 100px }
6 [outer="1"] [inner="1"] { width: 200px }
7 [outer="2"] { width: 150px }
8 [outer="3"][nomatch="1"] { width: 300px; }
9 </style>
11 <div id="outer">
12 <div id="mid">
13 <div id="inner" inner="1">
14 <div id="innerChild">
15 </div>
16 </div>
17 <div id="inner2">
18 </div>
19 </div>
20 </div>
21 <div id="outer2">
22 <div id="inner3"></div>
23 </div>
24 <div id="outer3">
25 <div class="nomatch"></div>
26 <div class="outer3"></div>
27 </div>
29 <script>
30 description("Test that adding and removing class names 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('inner');
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".
45 outer.offsetTop;
46 outer.setAttribute('outer', '1');
47 shouldBe("internals.updateStyleAndReturnAffectedElementCount()", "2");
48 shouldBe("getComputedStyle(inner).width", '"200px"');
50 // Style recalc should happen on "inner", but not "innerChild".
51 inner.offsetTop;
52 inner.removeAttribute('inner');
53 shouldBe("internals.updateStyleAndReturnAffectedElementCount()", "1");
54 shouldBe("getComputedStyle(inner).width", '"100px"');
56 // Style recalc should happen on "outer2", but not "inner3".
57 outer2.offsetTop;
58 outer2.setAttribute('outer', '2');
59 shouldBe("internals.updateStyleAndReturnAffectedElementCount()", "1");
60 shouldBe("getComputedStyle(outer2).width", '"150px"');
62 // Style recalc should happen on "outer3", but none of its children.
63 outer3.offsetTop;
64 outer3.setAttribute('outer', '3');
65 shouldBe("internals.updateStyleAndReturnAffectedElementCount()", "1");
66 </script>