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

<!DOCTYPE html>
<head>
<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>
function createSheet(selector)
{
    var sheet = document.createElement('style');
    sheet.textContent = selector + ' { color: red }';
    return sheet;
}

function addSheet(selector)
{
    var sheet = createSheet(selector);
    document.head.appendChild(sheet);
    return sheet;
}

if (window.internals) {
    // Add sheet with non-existant classname.
    document.documentElement.offsetTop;
    var nonexistantSheet = addSheet('.nonexistant');
    shouldBe("internals.updateStyleAndReturnAffectedElementCount()", "0");

    // Remove sheet with non-existant classname.
    document.documentElement.offsetTop;
    nonexistantSheet.remove();
    shouldBe("internals.updateStyleAndReturnAffectedElementCount()", "0");

    // Add sheet that matches one node.
    document.documentElement.offsetTop;
    var barSheet = addSheet('.bar');
    shouldBe("internals.updateStyleAndReturnAffectedElementCount()", "3");

    // Remove sheet that matches one node.
    document.documentElement.offsetTop;
    barSheet.remove();
    shouldBe("internals.updateStyleAndReturnAffectedElementCount()", "3");

    // Add two sheets that each match one node.
    document.documentElement.offsetTop;
    var barSheet = addSheet('.bar');
    var bazSheet = addSheet('.baz');
    shouldBe("internals.updateStyleAndReturnAffectedElementCount()", "6");

    // Remove two sheets that each match one node.
    document.documentElement.offsetTop;
    barSheet.remove();
    bazSheet.remove();
    // Recalc 6 elements + documentElement.
    shouldBe("internals.updateStyleAndReturnAffectedElementCount()", "6");

    // Add two sheets that each match one node. Add one to the beginning of the stylesheet list.
    document.documentElement.offsetTop;
    var barSheet = addSheet('.bar');
    var bazSheet = createSheet('.baz');
    document.head.insertBefore(bazSheet, document.head.firstChild);
    // Recalc 6 elements + documentElement.
    shouldBe("internals.updateStyleAndReturnAffectedElementCount()", "6");

    // Remove two sheets that each match one node. One is from the beginning of the stylesheet list.
    document.documentElement.offsetTop;
    barSheet.remove();
    bazSheet.remove();
    // Recalc 6 elements + documentElement.
    shouldBe("internals.updateStyleAndReturnAffectedElementCount()", "6");

    // Add and remove sheets in the same run.
    document.documentElement.offsetTop;
    var fooSheet = addSheet('.foo');
    var barSheet = addSheet('.bar');
    shouldBe("internals.updateStyleAndReturnAffectedElementCount()", "6");
    document.documentElement.offsetTop;
    var bazSheet = addSheet('.baz');
    barSheet.remove();
    // Recalc 6 elements + documentElement.
    shouldBe("internals.updateStyleAndReturnAffectedElementCount()", "6");
}
</script>
chromium/third_party/blink/web_tests/fast/css/add-remove-stylesheets-minimal-recalc-style.html
