| 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 .inner { width: 200px } | 6 .outer .inner { width: 200px } |
| 7 .outer2 { width: 150px } | 7 .outer2 { width: 150px } |
| 8 .outer3.nomatch {} |
| 8 </style> | 9 </style> |
| 9 | 10 |
| 10 <div id="outer"> | 11 <div id="outer"> |
| 11 <div id="mid"> | 12 <div id="mid"> |
| 12 <div id="inner" class="inner"> | 13 <div id="inner" class="inner"> |
| 13 <div id="innerChild"> | 14 <div id="innerChild"> |
| 14 </div> | 15 </div> |
| 15 </div> | 16 </div> |
| 16 <div id="inner2"> | 17 <div id="inner2"> |
| 17 </div> | 18 </div> |
| 18 </div> | 19 </div> |
| 19 </div> | 20 </div> |
| 20 <div id="outer2"> | 21 <div id="outer2"> |
| 21 <div id="inner3"></div> | 22 <div id="inner3"></div> |
| 22 </div> | 23 </div> |
| 24 <div id="outer3"> |
| 25 <div class="nomatch"></div> |
| 26 <div class="outer3"></div> |
| 27 </div> |
| 23 | 28 |
| 24 <script> | 29 <script> |
| 25 description("Test that adding and removing class names only updates the elements
that are affected."); | 30 description("Test that adding and removing class names only updates the elements
that are affected."); |
| 26 | 31 |
| 27 function insertStyleSheet(css) | 32 function insertStyleSheet(css) |
| 28 { | 33 { |
| 29 var styleElement = document.createElement("style"); | 34 var styleElement = document.createElement("style"); |
| 30 styleElement.textContent = css; | 35 styleElement.textContent = css; |
| 31 (document.head || document.documentElement).appendChild(styleElement); | 36 (document.head || document.documentElement).appendChild(styleElement); |
| 32 } | 37 } |
| 33 | 38 |
| 34 var outer = document.getElementById('outer'); | 39 var outer = document.getElementById('outer'); |
| 35 var inner = document.getElementById('inner'); | 40 var inner = document.getElementById('inner'); |
| 36 var outer2 = document.getElementById('outer2'); | 41 var outer2 = document.getElementById('outer2'); |
| 42 var outer3 = document.getElementById('outer3'); |
| 37 | 43 |
| 38 var count; | 44 var count; |
| 39 if (internals.runtimeFlags.targetedStyleRecalcEnabled) | 45 if (internals.runtimeFlags.targetedStyleRecalcEnabled) |
| 40 count = 2; | 46 count = 2; |
| 41 else | 47 else |
| 42 count = 5; | 48 count = 5; |
| 43 | 49 |
| 44 // 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". |
| 45 outer.offsetTop; | 51 outer.offsetTop; |
| 46 outer.className = 'outer'; | 52 outer.className = 'outer'; |
| (...skipping 14 matching lines...) Expand all Loading... |
| 61 if (internals.runtimeFlags.targetedStyleRecalcEnabled) | 67 if (internals.runtimeFlags.targetedStyleRecalcEnabled) |
| 62 count = 1; | 68 count = 1; |
| 63 else | 69 else |
| 64 count = 2; | 70 count = 2; |
| 65 | 71 |
| 66 // Style recalc should happen on "outer2", but not "inner3". | 72 // Style recalc should happen on "outer2", but not "inner3". |
| 67 outer2.offsetTop; | 73 outer2.offsetTop; |
| 68 outer2.className = 'outer2'; | 74 outer2.className = 'outer2'; |
| 69 shouldBe("internals.updateStyleAndReturnAffectedElementCount()", '' + count); | 75 shouldBe("internals.updateStyleAndReturnAffectedElementCount()", '' + count); |
| 70 shouldBe("getComputedStyle(outer2).width", '"150px"'); | 76 shouldBe("getComputedStyle(outer2).width", '"150px"'); |
| 77 |
| 78 if (internals.runtimeFlags.targetedStyleRecalcEnabled) |
| 79 count = 1; |
| 80 else |
| 81 count = 3; |
| 82 |
| 83 // Style recalc should happen on "outer3", but none of its children. |
| 84 outer3.offsetTop; |
| 85 outer3.className = 'outer3'; |
| 86 shouldBe("internals.updateStyleAndReturnAffectedElementCount()", '' + count); |
| 71 </script> | 87 </script> |
| OLD | NEW |