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

<style>
  div { width: 100px }
  #outer1on #inner1on { width: 200px }
  #outer2on { width: 150px }
  #outer3on#nomatch1 { width: 300px; }
</style>

<div id="outer">
    <div id="mid">
        <div id="inner1on">
            <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 ids 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('inner1on');
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.id = 'outer1on';
shouldBe("internals.updateStyleAndReturnAffectedElementCount()", "1");
shouldBe("getComputedStyle(inner).width", '"200px"');

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

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

// Style recalc should happen on "outer3", but none of its children.
outer3.offsetTop;
outer3.id = 'outer3on';
shouldBe("internals.updateStyleAndReturnAffectedElementCount()", "1");
</script>