| <!doctype html> |
| <html> |
| <head> |
| <script src="../test_bootstrap.js"></script> |
| <script type="text/javascript"> |
| goog.require('bot.dom'); |
| goog.require('goog.testing.jsunit'); |
| </script> |
| </head> |
| <body> |
| <h1>Page for Shadow DOM tests</h1> |
| |
| <div id="is-shown">Foo</div> |
| <div id="is-shown-in-shadow"></div> |
| <div id="is-shown-directly-in-shadow"></div> |
| <div id="is-shown-in-slot"><div>Foo</div></div> |
| |
| <div id="get-parent"><div></div></div> |
| <div id="get-parent-slot"><div></div></div> |
| |
| <div id="get-text">Foo</div> |
| <div id="get-text-shadow"></div> |
| <div id="get-text-slot">Foo</div> |
| <div id="get-text-slots"> |
| <div slot="a">Foo</div> |
| <div slot="b">Bar</div> |
| <div slot="c">Baz</div> |
| </div> |
| |
| <script> |
| var elementIsShownInShadow; |
| var elementIsShown; |
| var elementIsShownDirectlyInShadow; |
| var elementIsShownInSlot; |
| |
| var elementGetParent; |
| var elementGetParentSlot; |
| |
| var elementGetText; |
| var elementGetTextShadow; |
| var elementGetTextSlot; |
| var elementGetTextSlots; |
| |
| if (bot.dom.IS_SHADOW_DOM_ENABLED) { |
| elementIsShownInShadow = |
| document.querySelector('#is-shown-in-shadow'); |
| elementIsShownInShadow.attachShadow({ mode: 'open' }); |
| elementIsShownInShadow.shadowRoot.innerHTML = |
| '<div><div class="test">Foo</div></div>'; |
| |
| elementIsShownDirectlyInShadow = |
| document.querySelector('#is-shown-directly-in-shadow'); |
| elementIsShownDirectlyInShadow.attachShadow({ mode: 'open' }); |
| elementIsShownDirectlyInShadow.shadowRoot.innerHTML = |
| '<div>Foo</div>'; |
| |
| elementIsShown = document.querySelector('#is-shown'); |
| |
| elementIsShownInSlot = |
| document.querySelector('#is-shown-in-slot'); |
| elementIsShownInSlot.attachShadow({ mode: 'open' }); |
| elementIsShownInSlot.shadowRoot.innerHTML = |
| '<slot></slot>'; |
| |
| elementGetParent = |
| document.querySelector('#get-parent'); |
| |
| elementGetParentSlot = |
| document.querySelector('#get-parent-slot'); |
| elementGetParentSlot.attachShadow({ mode: 'open' }); |
| elementGetParentSlot.shadowRoot.innerHTML = |
| '<div><slot></slot></div>'; |
| |
| elementGetText = |
| document.querySelector('#get-text'); |
| |
| elementGetTextShadow = |
| document.querySelector('#get-text-shadow'); |
| elementGetTextShadow.attachShadow({ mode: 'open' }); |
| elementGetTextShadow.shadowRoot.innerHTML = 'foo'; |
| |
| elementGetTextSlot = |
| document.querySelector('#get-text-slot'); |
| elementGetTextSlot.attachShadow({ mode: 'open' }); |
| elementGetTextSlot.shadowRoot.innerHTML = |
| '<span>a</span><slot></slot><span>b</span>'; |
| |
| elementGetTextSlots = |
| document.querySelector('#get-text-slots'); |
| elementGetTextSlots.attachShadow({ mode: 'open' }); |
| elementGetTextSlots.shadowRoot.innerHTML = |
| '<slot name="a">Default</slot><slot name="b">Default</slot>'; |
| } |
| |
| function testIsShown() { |
| if (!bot.dom.IS_SHADOW_DOM_ENABLED) { |
| return; |
| } |
| |
| assert(bot.dom.isShown(elementIsShown)); |
| |
| elementIsShown.style.display = 'none'; |
| |
| assertFalse(bot.dom.isShown(elementIsShown)); |
| } |
| |
| function testIsShownInShadow() { |
| if (!bot.dom.IS_SHADOW_DOM_ENABLED) { |
| return; |
| } |
| |
| var el = elementIsShownInShadow |
| .shadowRoot |
| .querySelector('.test'); |
| |
| assert(bot.dom.isShown(el)); |
| |
| elementIsShownInShadow.style.display = 'none'; |
| |
| assertFalse(bot.dom.isShown(el)); |
| } |
| |
| function testIsShownDirectlyInShadow() { |
| if (!bot.dom.IS_SHADOW_DOM_ENABLED) { |
| return; |
| } |
| |
| var el = elementIsShownDirectlyInShadow |
| .shadowRoot |
| .querySelector('div'); |
| |
| assert(bot.dom.isShown(el)); |
| |
| elementIsShownDirectlyInShadow.style.display = 'none'; |
| |
| assertFalse(bot.dom.isShown(el)); |
| } |
| |
| function testIsShownInSlot() { |
| if (!bot.dom.IS_SHADOW_DOM_ENABLED) { |
| return; |
| } |
| |
| var el = elementIsShownInSlot.children[0]; |
| |
| assert(bot.dom.isShown(el)); |
| |
| elementIsShownInSlot.style.display = 'none'; |
| |
| assertFalse(bot.dom.isShown(el)); |
| |
| elementIsShownInSlot.style.display = ''; |
| // Remove the slot, so our child is no longer slotted |
| elementIsShownInSlot.shadowRoot.innerHTML = ''; |
| |
| assertFalse(bot.dom.isShown(el)); |
| } |
| |
| function testGetParentNodeInComposedDom() { |
| if (!bot.dom.IS_SHADOW_DOM_ENABLED) { |
| return; |
| } |
| |
| var el = elementGetParent.children[0]; |
| |
| assertEquals(elementGetParent, bot.dom.getParentNodeInComposedDom(el)); |
| |
| el = elementGetParentSlot.children[0]; |
| |
| assertEquals( |
| elementGetParentSlot.shadowRoot.querySelector('div'), |
| bot.dom.getParentNodeInComposedDom(el) |
| ); |
| |
| elementGetParentSlot.shadowRoot.innerHTML = ''; |
| |
| assertEquals(null, bot.dom.getParentNodeInComposedDom(el)); |
| } |
| |
| function testGetVisibleText() { |
| if (!bot.dom.IS_SHADOW_DOM_ENABLED) { |
| return; |
| } |
| |
| assertEquals('Foo', bot.dom.getVisibleText(elementGetText)); |
| } |
| |
| function testGetVisibleTextInShadow() { |
| if (!bot.dom.IS_SHADOW_DOM_ENABLED) { |
| return; |
| } |
| |
| assertEquals('foo', bot.dom.getVisibleText(elementGetTextShadow)); |
| } |
| |
| function testGetVisibleTextInSlot() { |
| if (!bot.dom.IS_SHADOW_DOM_ENABLED) { |
| return; |
| } |
| |
| assertEquals('aFoob', bot.dom.getVisibleText(elementGetTextSlot)); |
| } |
| |
| function testGetVisibleTextInSlots() { |
| if (!bot.dom.IS_SHADOW_DOM_ENABLED) { |
| return; |
| } |
| |
| assertEquals('Foo\nBar', bot.dom.getVisibleText(elementGetTextSlots)); |
| } |
| </script> |
| </body> |
| </html> |
