OLD | NEW |
1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
2 <script src="../../../resources/js-test.js"></script> | 2 <script src="../../../resources/js-test.js"></script> |
3 | 3 |
4 <style> | 4 <style> |
5 div { width: 100px } | 5 div { width: 100px } |
6 [outer="1"] [inner="1"] { width: 200px } | 6 #outer1on #inner1on { width: 200px } |
7 [outer="2"] { width: 150px } | 7 #outer2on { width: 150px } |
8 [outer="3"][nomatch="1"] { width: 300px; } | 8 #outer3on#nomatch1 { width: 300px; } |
9 </style> | 9 </style> |
10 | 10 |
11 <div id="outer"> | 11 <div id="outer"> |
12 <div id="mid"> | 12 <div id="mid"> |
13 <div id="inner" inner="1"> | 13 <div id="inner1on"> |
14 <div id="innerChild"> | 14 <div id="innerChild"> |
15 </div> | 15 </div> |
16 </div> | 16 </div> |
17 <div id="inner2"> | 17 <div id="inner2"> |
18 </div> | 18 </div> |
19 </div> | 19 </div> |
20 </div> | 20 </div> |
21 <div id="outer2"> | 21 <div id="outer2"> |
22 <div id="inner3"></div> | 22 <div id="inner3"></div> |
23 </div> | 23 </div> |
24 <div id="outer3"> | 24 <div id="outer3"> |
25 <div class="nomatch"></div> | 25 <div class="nomatch"></div> |
26 <div class="outer3"></div> | 26 <div class="outer3"></div> |
27 </div> | 27 </div> |
28 | 28 |
29 <script> | 29 <script> |
30 description("Test that adding and removing class names only updates the elements
that are affected."); | 30 description("Test that adding and removing ids only updates the elements that ar
e affected."); |
31 | 31 |
32 function insertStyleSheet(css) | 32 function insertStyleSheet(css) |
33 { | 33 { |
34 var styleElement = document.createElement("style"); | 34 var styleElement = document.createElement("style"); |
35 styleElement.textContent = css; | 35 styleElement.textContent = css; |
36 (document.head || document.documentElement).appendChild(styleElement); | 36 (document.head || document.documentElement).appendChild(styleElement); |
37 } | 37 } |
38 | 38 |
39 var outer = document.getElementById('outer'); | 39 var outer = document.getElementById('outer'); |
40 var inner = document.getElementById('inner'); | 40 var inner = document.getElementById('inner1on'); |
41 var outer2 = document.getElementById('outer2'); | 41 var outer2 = document.getElementById('outer2'); |
42 var outer3 = document.getElementById('outer3'); | 42 var outer3 = document.getElementById('outer3'); |
43 | 43 |
44 var count; | 44 var count; |
45 if (internals && internals.runtimeFlags.targetedStyleRecalcEnabled) | 45 if (internals && internals.runtimeFlags.targetedStyleRecalcEnabled) |
46 count = 2; | 46 count = 2; |
47 else | 47 else |
48 count = 5; | 48 count = 5; |
49 | 49 |
50 // Style recalc should happen on "inner" and "outer", but not "inner2" or "mid". | 50 // Style recalc should happen on "inner" and "outer", but not "inner2" or "mid". |
51 outer.offsetTop; | 51 outer.offsetTop; |
52 outer.setAttribute('outer', '1'); | 52 outer.id = 'outer1on'; |
53 shouldBe("internals.updateStyleAndReturnAffectedElementCount()", '' + count); | 53 shouldBe("internals.updateStyleAndReturnAffectedElementCount()", '' + count); |
54 shouldBe("getComputedStyle(inner).width", '"200px"'); | 54 shouldBe("getComputedStyle(inner).width", '"200px"'); |
55 | 55 |
56 if (internals.runtimeFlags.targetedStyleRecalcEnabled) | 56 if (internals.runtimeFlags.targetedStyleRecalcEnabled) |
57 count = 1; | 57 count = 1; |
58 else | 58 else |
59 count = 2; | 59 count = 2; |
60 | 60 |
61 // Style recalc should happen on "inner", but not "innerChild". | 61 // Style recalc should happen on "inner", but not "innerChild". |
62 inner.offsetTop; | 62 inner.offsetTop; |
63 inner.removeAttribute('inner'); | 63 inner.id = ''; |
64 shouldBe("internals.updateStyleAndReturnAffectedElementCount()", '' + count); | 64 shouldBe("internals.updateStyleAndReturnAffectedElementCount()", '' + count); |
65 shouldBe("getComputedStyle(inner).width", '"100px"'); | 65 shouldBe("getComputedStyle(inner).width", '"100px"'); |
66 | 66 |
67 if (internals.runtimeFlags.targetedStyleRecalcEnabled) | 67 if (internals.runtimeFlags.targetedStyleRecalcEnabled) |
68 count = 1; | 68 count = 1; |
69 else | 69 else |
70 count = 2; | 70 count = 2; |
71 | 71 |
72 // Style recalc should happen on "outer2", but not "inner3". | 72 // Style recalc should happen on "outer2", but not "inner3". |
73 outer2.offsetTop; | 73 outer2.offsetTop; |
74 outer2.setAttribute('outer', '2'); | 74 outer2.id = 'outer2on'; |
75 shouldBe("internals.updateStyleAndReturnAffectedElementCount()", '' + count); | 75 shouldBe("internals.updateStyleAndReturnAffectedElementCount()", '' + count); |
76 shouldBe("getComputedStyle(outer2).width", '"150px"'); | 76 shouldBe("getComputedStyle(outer2).width", '"150px"'); |
77 | 77 |
78 if (internals.runtimeFlags.targetedStyleRecalcEnabled) | 78 if (internals.runtimeFlags.targetedStyleRecalcEnabled) |
79 count = 1; | 79 count = 1; |
80 else | 80 else |
81 count = 3; | 81 count = 3; |
82 | 82 |
83 // Style recalc should happen on "outer3", but none of its children. | 83 // Style recalc should happen on "outer3", but none of its children. |
84 outer3.offsetTop; | 84 outer3.offsetTop; |
85 outer3.setAttribute('outer', '3'); | 85 outer3.id = 'outer3on'; |
86 shouldBe("internals.updateStyleAndReturnAffectedElementCount()", '' + count); | 86 shouldBe("internals.updateStyleAndReturnAffectedElementCount()", '' + count); |
87 </script> | 87 </script> |
OLD | NEW |