add-remove-stylesheets-at-once-minimal-recalc-style.html

<!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>
chromium/third_party/blink/web_tests/fast/css/add-remove-stylesheets-at-once-minimal-recalc-style.html
