| <!DOCTYPE html> |
| <script src="../../../resources/testharness.js"></script> |
| <script src="../../../resources/testharnessreport.js"></script> |
| <div id="host"> |
| <div id="c1"> |
| <!-- To ensure the fast path is working, add children and check their styles don't recalc. --> |
| <div></div><div></div><div></div><div></div><div></div><div></div> |
| </div> |
| <div id="c2"></div> |
| <div id="c3"></div> |
| </div> |
| <script> |
| // The aim of this test is to check that independent inheritance work down the |
| // flat tree through slot elements. |
| test(function(t) |
| { |
| var shadow_root = host.attachShadow({mode: 'closed'}); |
| var span = document.createElement("span"); |
| span.appendChild(document.createElement("slot")); |
| shadow_root.appendChild(span); |
| |
| assert_equals(getComputedStyle(c1).pointerEvents, "auto"); |
| assert_equals(getComputedStyle(c2).pointerEvents, "auto"); |
| |
| host.scrollTop; // Force recalc. |
| span.style.pointerEvents = "none"; |
| // Only one element should do a recalc. Independent inheritance down to the |
| // 3 child divs. |
| assert_equals(internals.updateStyleAndReturnAffectedElementCount(), 1); |
| |
| assert_equals(getComputedStyle(c1).pointerEvents, "none"); |
| assert_equals(getComputedStyle(c2).pointerEvents, "none"); |
| |
| }, "Changing pointerEvents, an independent inherited property, propagates correctly through slotted elements."); |
| </script> |
