targeted-class-style-invalidation.html

<!DOCTYPE html>
<script src="../../../resources/js-test.js"></script>

<style>
  div { width: 100px }
  .outer .inner { width: 200px }
  .outer2 { width: 150px }
  .outer3.nomatch {}
</style>

<div id="outer">
    <div id="mid">
        <div id="inner" class="inner">
            <div id="innerChild">
            </div>
        </div>
        <div id="inner2">
        </div>
    </div>
</div>
<div id="outer2">
    <div id="inner3"></div>
</div>
<div id="outer3">
    <div class="nomatch"></div>
    <div class="outer3"></div>
</div>

<script>
description("Test that adding and removing class names only updates the elements that are affected.");

function insertStyleSheet(css)
{
    var styleElement = document.createElement("style");
    styleElement.textContent = css;
    (document.head || document.documentElement).appendChild(styleElement);
}

var outer = document.getElementById('outer');
var inner = document.getElementById('inner');
var outer2 = document.getElementById('outer2');
var outer3 = document.getElementById('outer3');

// Style recalc should happen on "inner" and "outer", but not "inner2" or "mid".
outer.offsetTop;
outer.className = 'outer';
shouldBe("internals.updateStyleAndReturnAffectedElementCount()", "1");
shouldBe("getComputedStyle(inner).width", '"200px"');

// Style recalc should happen on "inner", but not "innerChild".
inner.offsetTop;
inner.className = '';
shouldBe("internals.updateStyleAndReturnAffectedElementCount()", "1");
shouldBe("getComputedStyle(inner).width", '"100px"');

// Style recalc should happen on "outer2", but not "inner3".
outer2.offsetTop;
outer2.className = 'outer2';
shouldBe("internals.updateStyleAndReturnAffectedElementCount()", "1");
shouldBe("getComputedStyle(outer2).width", '"150px"');

// Style recalc should happen on "outer3", but none of its children.
outer3.offsetTop;
outer3.className = 'outer3';
shouldBe("internals.updateStyleAndReturnAffectedElementCount()", "1");
</script>
chromium/third_party/blink/web_tests/fast/css/invalidation/targeted-class-style-invalidation.html
