<!DOCTYPE html>

<style>
  .exists1, .exists2 { }
</style>

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

<div id="target"></div>

<script>
description("Test that adding and removing class names with no matching selector does not cause a style recalc");

var target = document.getElementById('target');

function testClass(oldClasses, newClasses, needsRecalc)
{
    target.className = oldClasses;
    document.body.offsetTop;
    target.className = newClasses;
    shouldBe("internals.updateStyleAndReturnAffectedElementCount()", needsRecalc ? '1' : '0');
}

testClass('', 'exists1', true);
testClass('exists1', '', true);
testClass('', 'not-exists', false);
testClass('not-exists', '', false);
testClass('exists1', 'exists2', true);
testClass('exists1 exists2', 'exists2 exists1', false);
testClass('exists1 exists1', 'exists1 exists1', false);
testClass('exists1 exists1', 'exists1 exists1 doesnt-exist', false);
testClass('exists1 exists1 doesnt-exist', 'exists1 exists1', false);
testClass('exists1 exists1 doesnt-exist', 'exists1 doesnt-exist exists1', false);
testClass('exists1 doesnt-exist exists2 doesnt-exist exists1', 'doesnt-exist doesnt-exist2 exists2 exists1 doesnt-exist exists1', false);
</script>