| <!DOCTYPE html> |
| <title>Invisible-static level</title> |
| <body> |
| <script src="../resources/testharness.js"></script> |
| <script src="../resources/testharnessreport.js"></script> |
| |
| <div> |
| <div id="normal"></div> |
| <div id="basicInvisible" invisible></div> |
| <div id="staticInvisible" invisible="static"></div> |
| </div> |
| |
| <script> |
| 'use strict'; |
| |
| let upgraded = false; |
| let connected = false; |
| |
| class TestElement extends HTMLElement { |
| constructor() { |
| super(); |
| upgraded = true; |
| } |
| |
| connectedCallback() { |
| connected = true; |
| } |
| } |
| |
| customElements.define("test-element", TestElement); |
| |
| const testElementString = "<test-element></test-element>"; |
| const testElementUpgradedString = "<test-element>upgraded</test-element>"; |
| |
| function setUp() { |
| normal.innerHTML = basicInvisible.innerHTML = staticInvisible.innerHTML = ""; |
| basicInvisible.invisible = "invisible"; |
| staticInvisible.invisible = "static"; |
| connected = upgraded = false; |
| } |
| |
| test(() => { |
| setUp(); |
| normal.innerHTML = testElementString; |
| assert_true(upgraded); |
| assert_true(connected); |
| |
| setUp(); |
| basicInvisible.innerHTML = testElementString; |
| assert_true(upgraded); |
| assert_true(connected); |
| |
| setUp(); |
| staticInvisible.innerHTML = testElementString; |
| assert_false(upgraded); |
| assert_false(connected); |
| }, "Custom elements inside invisible-static subtree is not upgraded."); |
| |
| test(() => { |
| setUp(); |
| staticInvisible.removeAttribute("invisible"); |
| staticInvisible.innerHTML = testElementString; |
| assert_true(upgraded); |
| assert_true(connected); |
| }, "Previously-static subtree should not block custom element upgrade"); |
| |
| test(() => { |
| setUp(); |
| staticInvisible.innerHTML = testElementString; |
| staticInvisible.invisible = "invisible"; |
| assert_true(upgraded); |
| assert_true(connected); |
| }, "Making an element not invisible='static' upgrades the custom elements inside"); |
| |
| test(() => { |
| setUp(); |
| staticInvisible.innerHTML = testElementString; |
| assert_false(upgraded); |
| assert_false(connected); |
| customElements.upgrade(staticInvisible); |
| assert_true(upgraded); |
| assert_true(connected); |
| }, "Upgrade by customElements.upgrade is not deferred"); |
| |
| test(() => { |
| setUp(); |
| staticInvisible.innerHTML = "<another-element></another-element>"; |
| let anotherUpgraded = false; |
| let anotherConnected = false; |
| customElements.define("another-element", class extends HTMLElement { |
| constructor() { |
| super(); |
| anotherUpgraded = true; |
| } |
| |
| connectedCallback() { |
| anotherConnected = true; |
| } |
| }); |
| assert_false(anotherUpgraded); |
| assert_false(anotherConnected); |
| staticInvisible.invisible = "invisible"; |
| assert_true(anotherUpgraded); |
| assert_true(anotherConnected); |
| }, "Upgrade after defined is deferred"); |
| |
| setUp(); |
| </script> |
| |
| <test-element id="parserEl" invisible="static"></test-element> |
| |
| <script> |
| test(() => { |
| assert_true(upgraded); |
| assert_true(connected); |
| }, "Invisible static custom element is upgraded if constructed through HTML parser."); |
| |
| setUp(); |
| </script> |
| |
| <div> |
| <test-element></test-element> |
| </div> |
| |
| <script> |
| test(() => { |
| assert_true(upgraded); |
| assert_true(connected); |
| }, "Custom element under invisible static element made through HTML parser is upgraded."); |
| </script> |
| |
| |
| </body> |
