| 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 .outer .inner {} | 5 div { width: 100px } |
| 6 .outer .inner { width: 200px } |
| 6 </style> | 7 </style> |
| 7 | 8 |
| 8 <div id="outer"> | 9 <div id="outer"> |
| 9 <div id="inner" class="inner"> | 10 <div id="inner" class="inner"> |
| 11 <div id="innerChild"> |
| 12 </div> |
| 10 </div> | 13 </div> |
| 11 <div id="inner2"> | 14 <div id="inner2"> |
| 12 </div> | 15 </div> |
| 13 </div> | 16 </div> |
| 14 | 17 |
| 15 <script> | 18 <script> |
| 16 description("Test that adding and removing class names only updates the elements
that are affected."); | 19 description("Test that adding and removing class names only updates the elements
that are affected."); |
| 17 | 20 |
| 18 function insertStyleSheet(css) | 21 function insertStyleSheet(css) |
| 19 { | 22 { |
| 20 var styleElement = document.createElement("style"); | 23 var styleElement = document.createElement("style"); |
| 21 styleElement.textContent = css; | 24 styleElement.textContent = css; |
| 22 (document.head || document.documentElement).appendChild(styleElement); | 25 (document.head || document.documentElement).appendChild(styleElement); |
| 23 } | 26 } |
| 24 | 27 |
| 25 var outer = document.getElementById('outer'); | 28 var outer = document.getElementById('outer'); |
| 26 | 29 var inner = document.getElementById('inner'); |
| 27 outer.offsetTop; | |
| 28 outer.className = 'outer'; | |
| 29 | |
| 30 // Style recalc should happen on "inner" and "outer", but not "inner2". | |
| 31 | 30 |
| 32 var count; | 31 var count; |
| 33 if (internals.runtimeFlags.targetedStyleRecalcEnabled) | 32 if (internals.runtimeFlags.targetedStyleRecalcEnabled) |
| 34 count = 2; | 33 count = 2; |
| 35 else | 34 else |
| 36 count = 3; | 35 count = 4; |
| 37 | 36 |
| 37 // Style recalc should happen on "inner" and "outer", but not "inner2". |
| 38 outer.offsetTop; |
| 39 outer.className = 'outer'; |
| 38 shouldBe("internals.updateStyleAndReturnAffectedElementCount()", '' + count); | 40 shouldBe("internals.updateStyleAndReturnAffectedElementCount()", '' + count); |
| 41 shouldBe("getComputedStyle(inner).width", '"200px"'); |
| 42 |
| 43 if (internals.runtimeFlags.targetedStyleRecalcEnabled) |
| 44 count = 1; |
| 45 else |
| 46 count = 2; |
| 47 |
| 48 // Style recalc should happen on "inner", but not "innerChild". |
| 49 inner.offsetTop; |
| 50 inner.className = ''; |
| 51 shouldBe("internals.updateStyleAndReturnAffectedElementCount()", '' + count); |
| 52 shouldBe("getComputedStyle(inner).width", '"100px"'); |
| 39 | 53 |
| 40 </script> | 54 </script> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 170873004:
Fix issue in which removing a class does not always invalidate style (Closed)
Base URL: svn://svn.chromium.org/blink/trunk