modify-stylesheet-minimal-recalc-style.html

<!DOCTYPE html>
<head>
<style id="thestyle"></style>
<script src="../../resources/js-test.js"></script>
</head>
<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>
var sheet = document.getElementById('thestyle');

function forceRecalc()
{
    document.documentElement.offsetTop;
}

if (window.internals) {
    // Add non-existant classname.
    forceRecalc();
    sheet.textContent = ".nonexistant { color: red; }";
    shouldBe("internals.updateStyleAndReturnAffectedElementCount()", "0");

    // Add two existing classnames.
    forceRecalc();
    sheet.textContent = ".bar { color: red; }\n.baz { color: red; }";
    shouldBe("internals.updateStyleAndReturnAffectedElementCount()", "6");

    // Remove the classnames from the previous step.
    forceRecalc();
    sheet.textContent = "";
    shouldBe("internals.updateStyleAndReturnAffectedElementCount()", "6");

    // Test innerHTML.
    forceRecalc();
    sheet.innerHTML = ".bar { color: red; }\n.baz { color: red; }";
    shouldBe("internals.updateStyleAndReturnAffectedElementCount()", "6");

    // Test deleteRule
    forceRecalc();
    sheet.sheet.deleteRule(0); // Deletes .bar rule.
    shouldBe("internals.updateStyleAndReturnAffectedElementCount()", "6");

    shouldBe("getComputedStyle(document.querySelector('.foo')).color", '"rgb(0, 0, 0)"');
    shouldBe("getComputedStyle(document.querySelector('.baz')).color", '"rgb(255, 0, 0)"');
    shouldBe("getComputedStyle(document.querySelector('.bar')).color", '"rgb(0, 0, 0)"');

    // Test insertRule
    forceRecalc();
    sheet.sheet.insertRule(".foo { color: red; }", 0);
    shouldBe("internals.updateStyleAndReturnAffectedElementCount()", "3");

    shouldBe("getComputedStyle(document.querySelector('.foo')).color", '"rgb(255, 0, 0)"');
    shouldBe("getComputedStyle(document.querySelector('.baz')).color", '"rgb(255, 0, 0)"');
    shouldBe("getComputedStyle(document.querySelector('.bar')).color", '"rgb(0, 0, 0)"');

}
</script>
chromium/third_party/blink/web_tests/fast/css/modify-stylesheet-minimal-recalc-style.html
