| <!DOCTYPE html> |
| <head> |
| <script src="../../resources/js-test.js"></script> |
| </head> |
| <div id="sheet-container"></div> |
| <div><!-- Extra divs so it's clear when we're doing a full document recalc --> |
| <div></div> |
| <div></div> |
| <div></div> |
| <div></div> |
| <div></div> |
| <div></div> |
| <div></div> |
| <div></div> |
| <div></div> |
| <div></div> |
| </div> |
| <div class="foo">foo</div> |
| <div class="foo">foo</div> |
| <div class="foo">foo</div> |
| <div class="bar">bar</div> |
| <div class="bar">bar</div> |
| <div class="bar">bar</div> |
| <div class="baz">baz</div> |
| <div class="baz">baz</div> |
| <div class="baz">baz</div> |
| <script> |
| // Add and remove sheets in the same run. |
| document.documentElement.offsetTop; |
| var sheetContainer = document.getElementById('sheet-container'); |
| sheetContainer.innerHTML = '<style>.foo { color: green; }</style><style>.bar { color: red; }</style>' |
| // 6 elements + documentElement + body get recalced. |
| if (window.internals) |
| shouldBe("internals.updateStyleAndReturnAffectedElementCount()", "8"); |
| |
| document.documentElement.offsetTop; |
| sheetContainer.innerHTML = '<style>.baz { color: blue; }</style>' |
| |
| // 9 elements + documentElement + body get recalced. |
| if (window.internals) |
| shouldBe("internals.updateStyleAndReturnAffectedElementCount()", "10"); |
| |
| shouldBe("getComputedStyle(document.querySelector('.foo')).color", '"rgb(0, 0, 0)"'); |
| shouldBe("getComputedStyle(document.querySelector('.baz')).color", '"rgb(0, 0, 255)"'); |
| shouldBe("getComputedStyle(document.querySelector('.bar')).color", '"rgb(0, 0, 0)"'); |
| </script> |
