blob: 114c102afc1e21922e868628c937bf847610de1f [file] [log] [blame]
<!DOCTYPE html>
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<style>
#c {
pointer-events: all;
}
#e {
visibility: collapse;
}
</style>
<!-- The property is set on this outermost element. -->
<div id="a">
<!-- Tests that the property is propagated through an element that inherits it -->
<div id="b">
<!-- Tests that the property stops propagating through an element that doesn't inherit it -->
<div id="c">
<!-- The property is also set on this inner element, which inherited it from its parent, and should now propagate down to #e and #f -->
<div id="d">
<!-- The property is also set on this inner element, which inherited it from its parent but now sets it itself, and should now propagate to #f -->
<div id="e">
<!-- Tests that the above properties resolve correctly and this inherits the value from #f -->
<div id="f">
</div>
</div>
</div>
</div>
</div>
</div>
<script>
test(function(t)
{
if (!window.internals)
assert_unreached('This test requires window.internals.');
a.offsetTop; // Force recalc.
assert_equals(internals.updateStyleAndReturnAffectedElementCount(), 0);
assert_equals(getComputedStyle(a).pointerEvents, "auto");
assert_equals(getComputedStyle(b).pointerEvents, "auto");
assert_equals(getComputedStyle(c).pointerEvents, "all");
assert_equals(getComputedStyle(d).pointerEvents, "all");
assert_equals(getComputedStyle(e).pointerEvents, "all");
assert_equals(getComputedStyle(f).pointerEvents, "all");
assert_equals(getComputedStyle(a).visibility, "visible");
assert_equals(getComputedStyle(b).visibility, "visible");
assert_equals(getComputedStyle(c).visibility, "visible");
assert_equals(getComputedStyle(d).visibility, "visible");
assert_equals(getComputedStyle(e).visibility, "collapse");
assert_equals(getComputedStyle(f).visibility, "collapse");
a.offsetTop; // Force recalc.
a.style.pointerEvents = "none";
assert_equals(internals.updateStyleAndReturnAffectedElementCount(), 1);
a.offsetTop; // Force recalc.
a.style.visibility = "hidden";
assert_equals(internals.updateStyleAndReturnAffectedElementCount(), 1);
assert_equals(getComputedStyle(a).pointerEvents, "none");
assert_equals(getComputedStyle(b).pointerEvents, "none");
assert_equals(getComputedStyle(c).pointerEvents, "all");
assert_equals(getComputedStyle(d).pointerEvents, "all");
assert_equals(getComputedStyle(e).pointerEvents, "all");
assert_equals(getComputedStyle(f).pointerEvents, "all");
assert_equals(getComputedStyle(a).visibility, "hidden");
assert_equals(getComputedStyle(b).visibility, "hidden");
assert_equals(getComputedStyle(c).visibility, "hidden");
assert_equals(getComputedStyle(d).visibility, "hidden");
assert_equals(getComputedStyle(e).visibility, "collapse");
assert_equals(getComputedStyle(f).visibility, "collapse");
a.offsetTop; // Force recalc.
d.style.pointerEvents = "painted";
assert_equals(internals.updateStyleAndReturnAffectedElementCount(), 1);
a.offsetTop; // Force recalc.
e.style.visibility = "visible";
assert_equals(internals.updateStyleAndReturnAffectedElementCount(), 1);
assert_equals(getComputedStyle(a).pointerEvents, "none");
assert_equals(getComputedStyle(b).pointerEvents, "none");
assert_equals(getComputedStyle(c).pointerEvents, "all");
assert_equals(getComputedStyle(d).pointerEvents, "painted");
assert_equals(getComputedStyle(e).pointerEvents, "painted");
assert_equals(getComputedStyle(f).pointerEvents, "painted");
assert_equals(getComputedStyle(a).visibility, "hidden");
assert_equals(getComputedStyle(b).visibility, "hidden");
assert_equals(getComputedStyle(c).visibility, "hidden");
assert_equals(getComputedStyle(d).visibility, "hidden");
assert_equals(getComputedStyle(e).visibility, "visible");
assert_equals(getComputedStyle(f).visibility, "visible");
}, "Changing both pointer-events and visibility on an element, both independent inherited properties, doesn't cause a style recalc for its children.");
</script>