| 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 .outer3.nomatch {} |
| 9 </style> | 9 </style> |
| 10 | 10 |
| (...skipping 23 matching lines...) Expand all Loading... |
| 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('inner'); |
| 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; | |
| 45 if (internals.runtimeFlags.targetedStyleRecalcEnabled) | |
| 46 count = 2; | |
| 47 else | |
| 48 count = 5; | |
| 49 | |
| 50 // Style recalc should happen on "inner" and "outer", but not "inner2" or "mid". | 44 // Style recalc should happen on "inner" and "outer", but not "inner2" or "mid". |
| 51 outer.offsetTop; | 45 outer.offsetTop; |
| 52 outer.className = 'outer'; | 46 outer.className = 'outer'; |
| 53 shouldBe("internals.updateStyleAndReturnAffectedElementCount()", '' + count); | 47 shouldBe("internals.updateStyleAndReturnAffectedElementCount()", "2"); |
| 54 shouldBe("getComputedStyle(inner).width", '"200px"'); | 48 shouldBe("getComputedStyle(inner).width", '"200px"'); |
| 55 | 49 |
| 56 if (internals.runtimeFlags.targetedStyleRecalcEnabled) | |
| 57 count = 1; | |
| 58 else | |
| 59 count = 2; | |
| 60 | |
| 61 // Style recalc should happen on "inner", but not "innerChild". | 50 // Style recalc should happen on "inner", but not "innerChild". |
| 62 inner.offsetTop; | 51 inner.offsetTop; |
| 63 inner.className = ''; | 52 inner.className = ''; |
| 64 shouldBe("internals.updateStyleAndReturnAffectedElementCount()", '' + count); | 53 shouldBe("internals.updateStyleAndReturnAffectedElementCount()", "1"); |
| 65 shouldBe("getComputedStyle(inner).width", '"100px"'); | 54 shouldBe("getComputedStyle(inner).width", '"100px"'); |
| 66 | 55 |
| 67 if (internals.runtimeFlags.targetedStyleRecalcEnabled) | |
| 68 count = 1; | |
| 69 else | |
| 70 count = 2; | |
| 71 | |
| 72 // Style recalc should happen on "outer2", but not "inner3". | 56 // Style recalc should happen on "outer2", but not "inner3". |
| 73 outer2.offsetTop; | 57 outer2.offsetTop; |
| 74 outer2.className = 'outer2'; | 58 outer2.className = 'outer2'; |
| 75 shouldBe("internals.updateStyleAndReturnAffectedElementCount()", '' + count); | 59 shouldBe("internals.updateStyleAndReturnAffectedElementCount()", "1"); |
| 76 shouldBe("getComputedStyle(outer2).width", '"150px"'); | 60 shouldBe("getComputedStyle(outer2).width", '"150px"'); |
| 77 | 61 |
| 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. | 62 // Style recalc should happen on "outer3", but none of its children. |
| 84 outer3.offsetTop; | 63 outer3.offsetTop; |
| 85 outer3.className = 'outer3'; | 64 outer3.className = 'outer3'; |
| 86 shouldBe("internals.updateStyleAndReturnAffectedElementCount()", '' + count); | 65 shouldBe("internals.updateStyleAndReturnAffectedElementCount()", "1"); |
| 87 </script> | 66 </script> |
| OLD | NEW |