| <!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> |
| <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"); |
| </script> |
| </body> |