| <!DOCTYPE html> |
| <title>activateinvisible Event</title> |
| <body> |
| <script src="../resources/testharness.js"></script> |
| <script src="../resources/testharnessreport.js"></script> |
| |
| <div id="outer"> |
| Outer |
| <div id="inner"> |
| Inner |
| <div id="innermost"> |
| Innermost |
| </div> |
| </div> |
| <div id="host"> |
| <div id="slotted"> |
| Slotted |
| </div> |
| </div> |
| </div> |
| <a id="outerLink" href="#outer">Click</a> |
| <a id="innerLink" href="#inner">Click</a> |
| <a id="innermostLink" href ="#innermost">Click</a> |
| <a id="hostLink" href="#host">Click</a> |
| <a id="slottedLink" href="#slotted">Click</a> |
| <a id="slotLink" href="#slot">Click</a> |
| <script> |
| 'use strict'; |
| const shadowRoot = host.attachShadow({mode:"open"}); |
| const slot = document.createElement("slot"); |
| slot.id = "slot"; |
| shadowRoot.appendChild(slot); |
| const elements = [outer, inner, innermost, host, slot, slotted]; |
| |
| function setUp() { |
| elements.forEach((val) => { |
| val.removeAttribute("invisible"); |
| val.onactivateinvisible = null; |
| }); |
| } |
| |
| promise_test(() => { |
| setUp(); |
| inner.invisible = "invisible"; |
| return new Promise((resolve, reject) => { |
| const eventPromise = new Promise((resolve, reject) => { |
| inner.onactivateinvisible = (e) => { |
| assert_equals(e.target, inner); |
| assert_equals(e.activatedElement, inner); |
| resolve(); |
| }; |
| innerLink.click(); |
| }); |
| eventPromise.then(() => { |
| assert_false(inner.hasAttribute("invisible")); |
| resolve(); |
| }); |
| }); |
| }, "Activating invisible element fires activateinvisible and removes invisible"); |
| |
| promise_test(() => { |
| setUp(); |
| return new Promise((resolve, reject) => { |
| // #inner and #innermost should not receive activateinvisible. |
| inner.onactivateinvisible = innermost.onactivateinvisible = reject; |
| const eventReceivedOnOuter = new Promise((resolve, reject) => { |
| outer.onactivateinvisible = (e) => { |
| assert_equals(e.target, outer); |
| assert_equals(e.activatedElement, innermost); |
| resolve(); |
| }; |
| outer.invisible = "invisible"; |
| innermostLink.click(); |
| }); |
| eventReceivedOnOuter.then(() => { |
| assert_false(outer.hasAttribute("invisible")); |
| assert_false(inner.hasAttribute("invisible")); |
| assert_false(innermost.hasAttribute("invisible")); |
| resolve(); |
| }); |
| }); |
| }, "Activating descendant invisible element fires activateinvisible and removes invisible on ancestors"); |
| |
| promise_test(() => { |
| setUp(); |
| return new Promise((resolve, reject) => { |
| const eventReceivedOnKumaAncestors = new Promise((resolve, reject) => { |
| outer.onactivateinvisible = (e) => { |
| // Event sent to #host bubbles to #outer. |
| assert_equals(e.target, host); |
| assert_equals(e.activatedElement, slotted); |
| }; |
| const eventReceivedOnHost = new Promise((resolve, reject) => { |
| host.onactivateinvisible = (e) => { |
| assert_equals(e.target, host); |
| assert_equals(e.activatedElement, slotted); |
| resolve(); |
| }; |
| }); |
| const eventReceivedOnSlot = new Promise((resolve, reject) => { |
| slot.onactivateinvisible = (e) => { |
| assert_equals(e.target, slot); |
| assert_equals(e.activatedElement, slotted); |
| resolve(); |
| }; |
| }); |
| // Event is not sent to #slotted because it has no invisible attribute. |
| slotted.onactivateinvisible = reject; |
| |
| host.invisible = slot.invisible = "invisible"; |
| slottedLink.click(); |
| Promise.all([eventReceivedOnHost, eventReceivedOnSlot]).then(resolve); |
| }); |
| eventReceivedOnKumaAncestors.then(() => { |
| assert_false(outer.hasAttribute("invisible")); |
| assert_false(host.hasAttribute("invisible")); |
| assert_false(slot.hasAttribute("invisible")); |
| assert_false(slotted.hasAttribute("invisible")); |
| resolve(); |
| }); |
| }); |
| }, "Activating flat-tree descendant invisible element fires activateinvisible and removes invisible on invisible ancestors"); |
| |
| </script> |
