<!DOCTYPE html>
<script src="../../../resources/js-test.js"></script>
<style>
.root1, .root2 { max-height: 200px }
.root3 { max-height: 100px }
#root span { max-height: inherit }
</style>
<div id="root" class="root1">
<span></span>
</div>
<script>
description("Explicit inheritance of non-inherited property. Test that the explicitInherit flag in ComputedStyle is maintained correctly.");
root.offsetTop; // force recalc
root.className = "root2";
// No inheritance neede but explicitlInheritance needs to be set.
if (window.internals)
shouldBe("internals.updateStyleAndReturnAffectedElementCount()", "1");
root.offsetTop; // force recalc
root.className = "root3";
if (window.internals)
shouldBe("internals.updateStyleAndReturnAffectedElementCount()", "2");
shouldBeEqualToString("getComputedStyle(root.querySelector('span')).maxHeight", "100px");
</script>