| <!DOCTYPE html> |
| <title>Kuma Elements</title> |
| <body> |
| <script src="../resources/testharness.js"></script> |
| <script src="../resources/testharnessreport.js"></script> |
| |
| <div id="base"></div> |
| |
| <template id="temp"> |
| <div id="outerDiv"> |
| Can you |
| <div id="innerDiv" invisible> |
| see me? |
| </div> |
| </div> |
| </template> |
| |
| <div id="hasTabIndex" tabindex="0" invisible> |
| focusable |
| </div> |
| |
| <script> |
| let outerDiv = innerDiv = null; |
| 'use strict'; |
| |
| function setUp() { |
| base.innerHTML = ""; |
| const clone = document.importNode(temp.content, true); |
| base.appendChild(clone); |
| outerDiv = document.querySelector("#outerDiv"); |
| innerDiv = document.querySelector("#innerDiv"); |
| } |
| |
| function assertIsDisplayed(el) { |
| assert_not_equals(el.offsetWidth, 0); |
| assert_not_equals(el.offsetHeight, 0); |
| } |
| |
| function assertIsNotDisplayed(el) { |
| assert_equals(el.offsetWidth, 0); |
| assert_equals(el.offsetHeight, 0); |
| } |
| |
| test(() => { |
| setUp(); |
| assert_false(outerDiv.hasAttribute("invisible")); |
| assert_true(innerDiv.hasAttribute("invisible")); |
| |
| outerDiv.setAttribute("invisible", "invisible"); |
| assert_true(outerDiv.hasAttribute("invisible")); |
| |
| outerDiv.removeAttribute("invisible"); |
| assert_false(outerDiv.hasAttribute("invisible")); |
| }, "Setting/removing invisible attributes works"); |
| |
| test(() => { |
| setUp(); |
| outerDiv.setAttribute("invisible", "x"); |
| assert_equals(outerDiv.getAttribute("invisible"), "x"); |
| assert_equals(outerDiv.invisible, "invisible"); |
| assert_true(outerDiv.hasAttribute("invisible")); |
| |
| outerDiv.setAttribute("invisible", ""); |
| assert_equals(outerDiv.getAttribute("invisible"), ""); |
| assert_equals(outerDiv.invisible, "invisible"); |
| assert_true(outerDiv.hasAttribute("invisible")); |
| |
| outerDiv.removeAttribute("invisible"); |
| assert_equals(outerDiv.invisible, ""); |
| |
| outerDiv.setAttribute("invisible", "static"); |
| assert_equals(outerDiv.getAttribute("invisible"), "static"); |
| assert_equals(outerDiv.invisible, "static"); |
| assert_true(outerDiv.hasAttribute("invisible")); |
| }, "Setting/removing invisible attribute preserves original value, but property returns only invisible/static"); |
| |
| test(() => { |
| setUp(); |
| innerDiv.removeAttribute("invisible"); |
| assertIsDisplayed(innerDiv); |
| |
| outerDiv.setAttribute("invisible", "invisible"); |
| assert_equals(getComputedStyle(outerDiv).display, "block", "outerDiv display=block"); |
| assertIsNotDisplayed(outerDiv); |
| assert_equals(getComputedStyle(innerDiv).display, "block", "innerDiv display=block"); |
| assertIsNotDisplayed(innerDiv); |
| |
| outerDiv.removeAttribute("invisible"); |
| assertIsDisplayed(outerDiv); |
| assertIsDisplayed(innerDiv); |
| }, "Inclusive descendants of an invisible element are not displayed"); |
| |
| test(() => { |
| setUp(); |
| const host = document.createElement("span"); |
| outerDiv.appendChild(host); |
| const shadowRoot = host.attachShadow({mode: "open"}); |
| const slot = document.createElement("slot"); |
| shadowRoot.appendChild(slot); |
| const slottedChild = document.createElement("p"); |
| slottedChild.innerHTML = "I am <b>invisible</b>"; |
| host.appendChild(slottedChild); |
| assertIsDisplayed(slottedChild); |
| |
| slot.invisible = "invisible"; |
| assertIsNotDisplayed(slottedChild); |
| }, "Flat tree descendants of an invisible element are not displayed"); |
| |
| test (()=> { |
| setUp(); |
| // Invisible div with no tabindex is not focused. |
| innerDiv.focus(); |
| assert_not_equals(document.activeElement, innerDiv); |
| // Invisible div that eventually has display:none style is not focused. |
| innerDiv.tabIndex = 0; |
| innerDiv.style = "display: none"; |
| innerDiv.focus(); |
| assert_not_equals(document.activeElement, innerDiv); |
| innerDiv.style = ""; |
| outerDiv.style = "display: none"; |
| innerDiv.focus(); |
| assert_not_equals(document.activeElement, innerDiv); |
| // Invisible div with tabindex is focused. |
| outerDiv.style = ""; |
| innerDiv.focus(); |
| assert_equals(document.activeElement, innerDiv); |
| // Invisible div with pre-existing tabindex is focused. |
| hasTabIndex.focus(); |
| assert_equals(document.activeElement, hasTabIndex); |
| }, "Invisible elements are focusable."); |
| </script> |
| </body> |