diff options
Diffstat (limited to 'dom/tests')
17 files changed, 15 insertions, 1307 deletions
diff --git a/dom/tests/mochitest/webcomponents/mochitest.ini b/dom/tests/mochitest/webcomponents/mochitest.ini index f5d0f84ea..84322d21d 100644 --- a/dom/tests/mochitest/webcomponents/mochitest.ini +++ b/dom/tests/mochitest/webcomponents/mochitest.ini @@ -17,18 +17,15 @@ support-files = htmlconstructor_builtin_tests.js [test_custom_element_in_shadow.html] skip-if = true || stylo # disabled - See bug 1390396 and 1293844 -[test_custom_element_register_invalid_callbacks.html] [test_custom_element_throw_on_dynamic_markup_insertion.html] [test_custom_element_get.html] [test_custom_element_when_defined.html] [test_custom_element_uncatchable_exception.html] skip-if = !debug # TestFunctions only applied in debug builds -[test_nested_content_element.html] -[test_dest_insertion_points.html] -[test_dest_insertion_points_shadow.html] -[test_fallback_dest_insertion_points.html] +[test_custom_element_define.html] +[test_custom_element_define_parser.html] +[test_custom_element_template.html] [test_detached_style.html] -[test_dynamic_content_element_matching.html] [test_document_adoptnode.html] [test_document_importnode.html] [test_document_register.html] @@ -38,19 +35,13 @@ skip-if = true # disabled - See bug 1390396 [test_document_register_stack.html] skip-if = true # disabled - See bug 1390396 [test_document_shared_registry.html] -[test_event_dispatch.html] [test_event_retarget.html] [test_event_stopping.html] [test_template.html] [test_template_xhtml.html] -[test_template_custom_elements.html] [test_shadowroot.html] [test_shadowroot_inert_element.html] -[test_shadowroot_host.html] [test_shadowroot_style.html] -[test_shadowroot_style_multiple_shadow.html] [test_shadowroot_style_order.html] -[test_shadowroot_youngershadowroot.html] [test_style_fallback_content.html] -[test_unresolved_pseudo_class.html] [test_link_prefetch.html] diff --git a/dom/tests/mochitest/webcomponents/test_bug1276240.html b/dom/tests/mochitest/webcomponents/test_bug1276240.html index ded8d8276..33e532a6a 100644 --- a/dom/tests/mochitest/webcomponents/test_bug1276240.html +++ b/dom/tests/mochitest/webcomponents/test_bug1276240.html @@ -47,7 +47,7 @@ test(); // test with webcomponents disabled SimpleTest.waitForExplicitFinish(); SpecialPowers.pushPrefEnv( - { 'set': [["dom.webcomponents.customelements.enabled", false]]}, runTest); + { 'set': [["dom.webcomponents.enabled", false]]}, runTest); </script> </pre> diff --git a/dom/tests/mochitest/webcomponents/test_custom_element_callback_innerhtml.html b/dom/tests/mochitest/webcomponents/test_custom_element_callback_innerhtml.html index bb5008538..22d957117 100644 --- a/dom/tests/mochitest/webcomponents/test_custom_element_callback_innerhtml.html +++ b/dom/tests/mochitest/webcomponents/test_custom_element_callback_innerhtml.html @@ -18,23 +18,19 @@ SimpleTest.waitForExplicitFinish(); var connectedCallbackCount = 0; -var p = Object.create(HTMLElement.prototype); - -p.createdCallback = function() { - ok(true, "createdCallback called."); -}; - -p.connectedCallback = function() { - ok(true, "connectedCallback should be called when the parser creates an element in the document."); - connectedCallbackCount++; - // connectedCallback should be called twice, once for the element created for innerHTML and - // once for the element created in this document. - if (connectedCallbackCount == 2) { - SimpleTest.finish(); +class Foo extends HTMLElement { + connectedCallback() { + ok(true, "connectedCallback should be called when the parser creates an element in the document."); + connectedCallbackCount++; + // connectedCallback should be called twice, once for the element created for innerHTML and + // once for the element created in this document. + if (connectedCallbackCount == 2) { + SimpleTest.finish(); + } } -} +}; -document.registerElement("x-foo", { prototype: p }); +customElements.define("x-foo", Foo); var container = document.getElementById("container"); container.innerHTML = '<x-foo></x-foo>'; diff --git a/dom/tests/mochitest/webcomponents/test_custom_element_register_invalid_callbacks.html b/dom/tests/mochitest/webcomponents/test_custom_element_register_invalid_callbacks.html deleted file mode 100644 index 572579ba8..000000000 --- a/dom/tests/mochitest/webcomponents/test_custom_element_register_invalid_callbacks.html +++ /dev/null @@ -1,69 +0,0 @@ -<!DOCTYPE HTML> -<html> -<!-- -https://bugzilla.mozilla.org/show_bug.cgi?id=1275835 ---> -<head> - <title>Test registering invalid lifecycle callbacks for custom elements.</title> - <script type="text/javascript" src="/tests/SimpleTest/SimpleTest.js"></script> - <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" /> -</head> -<body> -<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1275835">Bug 1275835</a> -<iframe id="iframe"></iframe> -<script> - -// Use window from iframe to isolate the test. -const testWindow = iframe.contentDocument.defaultView; - -// This is for backward compatibility. -// We should do the same checks for the callbacks from v0 spec. -[ - 'attributeChangedCallback', -].forEach(callback => { - var c = class {}; - var p = c.prototype; - - // Test getting callback throws exception. - Object.defineProperty(p, callback, { - get() { - const e = new Error('this is rethrown'); - e.name = 'rethrown'; - throw e; - } - }); - - SimpleTest.doesThrow(() => { - testWindow.document.registerElement(`test-register-${callback}-rethrown`, - { prototype: p }); - }, `document.registerElement should throw exception if prototype.${callback} throws`); - - SimpleTest.doesThrow(() => { - testWindow.customElements.define(`test-define-${callback}-rethrown`, c); - }, `customElements.define should throw exception if constructor.${callback} throws`); - - // Test callback is not callable. - [ - { name: 'null', value: null }, - { name: 'object', value: {} }, - { name: 'integer', value: 1 }, - ].forEach(data => { - var c = class {}; - var p = c.prototype; - - p[callback] = data.value; - - SimpleTest.doesThrow(() => { - testWindow.document.registerElement(`test-register-${callback}-${data.name}`, - { prototype: p }); - }, `document.registerElement should throw exception if ${callback} is ${data.name}`); - - SimpleTest.doesThrow(() => { - testWindow.customElements.define(`test-define-${callback}-${data.name}`, c); - }, `customElements.define should throw exception if ${callback} is ${data.name}`); - }); -}); - -</script> -</body> -</html> diff --git a/dom/tests/mochitest/webcomponents/test_dest_insertion_points.html b/dom/tests/mochitest/webcomponents/test_dest_insertion_points.html deleted file mode 100644 index 2d4a92ed2..000000000 --- a/dom/tests/mochitest/webcomponents/test_dest_insertion_points.html +++ /dev/null @@ -1,73 +0,0 @@ -<!DOCTYPE HTML> -<html> -<!-- -https://bugzilla.mozilla.org/show_bug.cgi?id=999999 ---> -<head> - <meta charset="utf-8"> - <title>Test for Bug 999999</title> - <script type="application/javascript" src="/tests/SimpleTest/SimpleTest.js"></script> - <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/> -</head> -<body> -<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=999999">Mozilla Bug 999999</a> -<p id="display"></p> -<div id="content"> -<div id="shadowhost"> -</div> -</div> -<pre id="test"> -</pre> -<script type="application/javascript"> - -/** Test for Bug 999999 **/ -var host = document.getElementById("shadowhost"); - -// Test destination insertion points of node distributed to content element. -var shadowRoot = host.createShadowRoot(); -shadowRoot.innerHTML = '<div id="innerhost"><content id="innercontent" select=".red"></content></div>'; -var innerContent = shadowRoot.getElementById("innercontent"); - -var span = document.createElement("span"); -span.setAttribute("class", "red blue"); -is(host.getDestinationInsertionPoints().length, 0, "Destination insertion points should be empty when not being distributed."); - -host.appendChild(span); - -is(span.getDestinationInsertionPoints().length, 1, "Destination insertion points should only contain a single content insertion point."); -is(span.getDestinationInsertionPoints()[0], innerContent, "Content element should contain destination insertion point."); - -// Test destination insertion points of redistributed node. -var innerHost = shadowRoot.getElementById("innerhost"); -var innerShadowRoot = innerHost.createShadowRoot(); -innerShadowRoot.innerHTML = '<content id="innerinnercontent" select=".blue"></content>'; - -var innerInnerContent = innerShadowRoot.getElementById("innerinnercontent"); - -is(span.getDestinationInsertionPoints().length, 2, "Redistributed node should have 2 destination insertion points."); -is(span.getDestinationInsertionPoints()[1], innerInnerContent, "Nested content insertion point should be in list of destination insertion points."); - -// Test destination insertion points after removing reprojection onto second content element. -span.setAttribute("class", "red"); -is(span.getDestinationInsertionPoints().length, 1, "Destination insertion points should only contain 1 insertion point after removing reprojection."); -is(span.getDestinationInsertionPoints()[0], innerContent, "First content element should be only insertion point after removing reprojection."); - -// Test destination insertion points after removing the projected content from the host. -host.removeChild(span); -is(span.getDestinationInsertionPoints().length, 0, "Destination insertion points should be empty after being removed from the shadow host."); - -// Test destination insertion points of distributed content after removing insertion point. -var div = document.createElement("div"); -div.setAttribute("class", "red blue"); -host.appendChild(div); - -is(div.getDestinationInsertionPoints().length, 2, "Div should be distributed into 2 insertion points."); - -innerShadowRoot.removeChild(innerInnerContent); - -is(div.getDestinationInsertionPoints().length, 1, "Div should be distributed into insertion point in one ShadowRoot."); -is(div.getDestinationInsertionPoints()[0], innerContent, "Destination insertion points should only contain content insertion point in first ShadowRoot."); - -</script> -</body> -</html> diff --git a/dom/tests/mochitest/webcomponents/test_dest_insertion_points_shadow.html b/dom/tests/mochitest/webcomponents/test_dest_insertion_points_shadow.html deleted file mode 100644 index 75286463e..000000000 --- a/dom/tests/mochitest/webcomponents/test_dest_insertion_points_shadow.html +++ /dev/null @@ -1,68 +0,0 @@ -<!DOCTYPE HTML> -<html> -<!-- -https://bugzilla.mozilla.org/show_bug.cgi?id=999999 ---> -<head> - <meta charset="utf-8"> - <title>Test for Bug 999999</title> - <script type="application/javascript" src="/tests/SimpleTest/SimpleTest.js"></script> - <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/> -</head> -<body> -<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=999999">Mozilla Bug 999999</a> -<p id="display"></p> -<div id="content"> -<div id="shadowhost"></div> -</div> -<pre id="test"> -</pre> -<script type="application/javascript"> - -/** Test for Bug 999999 **/ -var host = document.getElementById("shadowhost"); - -// Test destination insertion points of node distributed to shadow element. -var olderShadowRoot = host.createShadowRoot(); -var youngerShadowRoot = host.createShadowRoot(); - -var shadowElem = document.createElement("shadow"); -youngerShadowRoot.appendChild(shadowElem); - -var span = document.createElement("span"); -olderShadowRoot.appendChild(span); - -is(span.getDestinationInsertionPoints().length, 1, "Child of ShadowRoot should be distributed to shadow insertion point."); -is(span.getDestinationInsertionPoints()[0], shadowElem, "Shadow element should be in destination insertion point list."); - -// Test destination insertion points of node removed from tree. -olderShadowRoot.removeChild(span); -is(span.getDestinationInsertionPoints().length, 0, "Node removed from tree should no longer be distributed."); - -// Test destination insertion points of fallback content being reprojected into a shadow element. -var content = document.createElement("content"); -var fallback = document.createElement("span"); - -content.appendChild(fallback); -olderShadowRoot.appendChild(content); - -is(fallback.getDestinationInsertionPoints().length, 2, "The fallback content should have 2 destination insertion points, the parent content and the shadow element to which it is reprojected."); -is(fallback.getDestinationInsertionPoints()[0], content, "First destination of the fallback content should be the parent content element."); -is(fallback.getDestinationInsertionPoints()[1], shadowElem, "Second destination of the fallback content should be the shadow element to which the element is reprojected."); - -// Test destination insertion points of fallback content being removed from tree. -content.removeChild(fallback); -is(fallback.getDestinationInsertionPoints().length, 0, "The content should no longer be distributed to any nodes because it is no longer fallback content."); - -// Test destination insertion points of distributed content after removing shadow insertion point. -var div = document.createElement("div"); -olderShadowRoot.appendChild(div); -is(div.getDestinationInsertionPoints().length, 1, "Children in older shadow root should be distributed to shadow insertion point."); -is(div.getDestinationInsertionPoints()[0], shadowElem, "Destination insertion point should include shadow element."); - -youngerShadowRoot.removeChild(shadowElem); -is(div.getDestinationInsertionPoints().length, 0, "Destination insertion points should be empty after removing shadow element."); - -</script> -</body> -</html> diff --git a/dom/tests/mochitest/webcomponents/test_document_register_parser.html b/dom/tests/mochitest/webcomponents/test_document_register_parser.html deleted file mode 100644 index a4fb63139..000000000 --- a/dom/tests/mochitest/webcomponents/test_document_register_parser.html +++ /dev/null @@ -1,47 +0,0 @@ -<!DOCTYPE HTML> -<html> -<!-- -https://bugzilla.mozilla.org/show_bug.cgi?id=783129 ---> -<head> - <title>Test for document.registerElement for elements created by the parser</title> - <script type="text/javascript" src="/tests/SimpleTest/SimpleTest.js"></script> -<link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" /> -<script> - -var extendedButtonProto = Object.create(HTMLButtonElement.prototype); -var buttonCallbackCalled = false; -extendedButtonProto.connectedCallback = function() { - is(buttonCallbackCalled, false, "created callback for x-button should only be called once."); - is(this.tagName, "BUTTON", "Only the <button> element should be upgraded."); - buttonCallbackCalled = true; -}; - -document.registerElement("x-button", { prototype: extendedButtonProto, extends: "button" }); - -var divProto = Object.create(HTMLDivElement.prototype); -var divCallbackCalled = false; -divProto.connectedCallback = function() { - is(divCallbackCalled, false, "created callback for x-div should only be called once."); - is(buttonCallbackCalled, true, "crated callback should be called for x-button before x-div."); - is(this.tagName, "X-DIV", "Only the <x-div> element should be upgraded."); - divCallbackCalled = true; - SimpleTest.finish(); -}; - -document.registerElement("x-div", { prototype: divProto }); - -SimpleTest.waitForExplicitFinish(); -</script> -</head> -<body> -<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=783129">Bug 783129</a> -<button is="x-button"></button><!-- should be upgraded --> -<x-button></x-button><!-- should not be upgraded --> -<span is="x-button"></span><!-- should not be upgraded --> -<div is="x-div"></div><!-- should not be upgraded --> -<x-div></x-div><!-- should be upgraded --> -<script> -</script> -</body> -</html> diff --git a/dom/tests/mochitest/webcomponents/test_document_shared_registry.html b/dom/tests/mochitest/webcomponents/test_document_shared_registry.html deleted file mode 100644 index db72e1e6c..000000000 --- a/dom/tests/mochitest/webcomponents/test_document_shared_registry.html +++ /dev/null @@ -1,46 +0,0 @@ -<!DOCTYPE HTML> -<html> -<!-- -https://bugzilla.mozilla.org/show_bug.cgi?id=783129 ---> -<head> - <title>Test shared registry for associated HTML documents.</title> - <script type="text/javascript" src="/tests/SimpleTest/SimpleTest.js"></script> - <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" /> -</head> -<body> -<div id="container"></div> -<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=783129">Bug 783129</a> -<script> -var container = document.getElementById("container"); - -function registerNoRegistryDoc() { - var assocDoc = document.implementation.createDocument(null, "html"); - try { - assocDoc.registerElement("x-dummy", { prototype: Object.create(HTMLElement.prototype) }); - ok(false, "Registring element in document without registry should throw."); - } catch (ex) { - ok(true, "Registring element in document without registry should throw."); - } - - runNextTest(); -} - -function runNextTest() { - if (testFunctions.length > 0) { - var nextTestFunction = testFunctions.shift(); - nextTestFunction(); - } -} - -var testFunctions = [ - registerNoRegistryDoc, - SimpleTest.finish -]; - -SimpleTest.waitForExplicitFinish(); - -runNextTest(); -</script> -</body> -</html> diff --git a/dom/tests/mochitest/webcomponents/test_dynamic_content_element_matching.html b/dom/tests/mochitest/webcomponents/test_dynamic_content_element_matching.html deleted file mode 100644 index c9af76610..000000000 --- a/dom/tests/mochitest/webcomponents/test_dynamic_content_element_matching.html +++ /dev/null @@ -1,50 +0,0 @@ -<!DOCTYPE HTML> -<html> -<!-- -https://bugzilla.mozilla.org/show_bug.cgi?id=806506 ---> -<head> - <title>Test for dynamic changes to content matching content elements</title> - <script type="text/javascript" src="/tests/SimpleTest/SimpleTest.js"></script> - <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" /> -</head> -<body> -<div class="tall" id="bodydiv"></div> -<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=806506">Bug 806506</a> -<script> -// Create ShadowRoot. -var elem = document.createElement("div"); -var root = elem.createShadowRoot(); - -var redInsertionPoint = document.createElement("content"); -redInsertionPoint.select = "*[data-color=red]"; - -var blueInsertionPoint = document.createElement("content"); -blueInsertionPoint.select = "*[data-color=blue]"; - -root.appendChild(redInsertionPoint); -root.appendChild(blueInsertionPoint); - -is(blueInsertionPoint.getDistributedNodes().length, 0, "Blue insertion point should have no distributed nodes."); -is(redInsertionPoint.getDistributedNodes().length, 0, "Red insertion point should have no distrubted nodes."); - -var matchElement = document.createElement("div"); -matchElement.setAttribute("data-color", "red"); -elem.appendChild(matchElement); - -is(blueInsertionPoint.getDistributedNodes().length, 0, "Blue insertion point should have no distributed nodes."); -is(redInsertionPoint.getDistributedNodes().length, 1, "Red insertion point should match recently inserted div."); - -matchElement.setAttribute("data-color", "blue"); -is(blueInsertionPoint.getDistributedNodes().length, 1, "Blue insertion point should match element after changing attribute value."); -is(redInsertionPoint.getDistributedNodes().length, 0, "Red insertion point should not match element after changing attribute value."); - -matchElement.removeAttribute("data-color"); - -is(blueInsertionPoint.getDistributedNodes().length, 0, "Blue insertion point should have no distributed nodes after removing the matching attribute."); -is(redInsertionPoint.getDistributedNodes().length, 0, "Red insertion point should have no distrubted nodes after removing the matching attribute."); - -</script> -</body> -</html> - diff --git a/dom/tests/mochitest/webcomponents/test_event_dispatch.html b/dom/tests/mochitest/webcomponents/test_event_dispatch.html deleted file mode 100644 index c73bfb214..000000000 --- a/dom/tests/mochitest/webcomponents/test_event_dispatch.html +++ /dev/null @@ -1,458 +0,0 @@ -<!DOCTYPE HTML> -<html> -<!-- -https://bugzilla.mozilla.org/show_bug.cgi?id=887541 ---> -<head> - <title>Test for event model in web components</title> - <script type="text/javascript" src="/tests/SimpleTest/SimpleTest.js"></script> - <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" /> -</head> -<body> -<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=887541">Bug 887541</a> -<script> - -var els = SpecialPowers.Cc["@mozilla.org/eventlistenerservice;1"] - .getService(SpecialPowers.Ci.nsIEventListenerService); - -function eventListener(e) { - eventChain.push(this); -} - -function isEventChain(actual, expected, msg) { - is(actual.length, expected.length, msg); - for (var i = 0; i < expected.length; i++) { - is(actual[i], expected[i], msg + " at " + i); - } - - // Check to make sure the event chain matches what we get back from nsIEventListenerService.getEventTargetChainFor - if (0 < actual.length) { - var chain = els.getEventTargetChainFor(actual[0], true); // Events should be dispatched on actual[0]. - for (var i = 0; i < expected.length; i++) { - ok(SpecialPowers.compare(chain[i], expected[i]), msg + " at " + i + " for nsIEventListenerService"); - } - } -} - -/* - * Test 1: Test of event dispatch through a basic ShadowRoot with content a insertion point. - * - * <div elemOne> ------ <shadow-root shadowOne> - * | | - * <div elemTwo> <span elemThree> - * | - * <content elemFour> - */ - -var elemOne = document.createElement("div"); -elemOne.addEventListener("custom", eventListener); - -var elemTwo = document.createElement("div"); -elemTwo.addEventListener("custom", eventListener); - -var elemThree = document.createElement("span"); -elemThree.addEventListener("custom", eventListener); - -var elemFour = document.createElement("content"); -elemFour.addEventListener("custom", eventListener); - -var shadowOne = elemOne.createShadowRoot(); -shadowOne.addEventListener("custom", eventListener); - -elemThree.appendChild(elemFour); -shadowOne.appendChild(elemThree); -elemOne.appendChild(elemTwo); - -var eventChain = []; -var customEvent = new CustomEvent("custom", { "bubbles" : true, "composed" : true }); -elemTwo.dispatchEvent(customEvent); -isEventChain(eventChain, [elemTwo, elemFour, elemThree, shadowOne, elemOne], "Event path for test 1 for event dispatched on elemTwo."); - -/* - * Test 2: Test of event dispatch through a nested ShadowRoots with content insertion points. - * - * <div elemFive> --- <shadow-root shadowTwo> - * | | - * <div elemOne> <div elemFour> ----- <shadow-root shadowOne> - * | | - * <content elemTwo> <p elemSix> - * | - * <content elemThree> - */ - -elemOne = document.createElement("div"); -elemOne.addEventListener("custom", eventListener); - -elemTwo = document.createElement("content"); -elemTwo.addEventListener("custom", eventListener); - -elemThree = document.createElement("content"); -elemThree.addEventListener("custom", eventListener); - -var elemFour = document.createElement("div"); -elemFour.addEventListener("custom", eventListener); - -var elemFive = document.createElement("div"); -elemFive.addEventListener("custom", eventListener); - -var elemSix = document.createElement("p"); -elemSix.addEventListener("custom", eventListener); - -var shadowOne = elemFour.createShadowRoot(); -shadowOne.addEventListener("custom", eventListener); - -var shadowTwo = elemFive.createShadowRoot(); -shadowTwo.addEventListener("custom", eventListener); - -elemFive.appendChild(elemOne); -shadowTwo.appendChild(elemFour); -elemFour.appendChild(elemTwo); -shadowOne.appendChild(elemSix); -elemSix.appendChild(elemThree); - -eventChain = []; -customEvent = new CustomEvent("custom", { "bubbles" : true, "composed" : true }); -elemOne.dispatchEvent(customEvent); -is(elemOne.getDestinationInsertionPoints().length, 2, "yes"); -isEventChain(eventChain, [elemOne, elemThree, elemSix, shadowOne, elemTwo, elemFour, shadowTwo, elemFive], "Event path for test 2 for event dispatched on elemOne."); - -/* - * Test 3: Test of event dispatch through nested ShadowRoot with content insertion points. - * - * <div elemOne> ------- <shadow-root shadowOne> - * | | - * <span elemTwo> <span elemThree> ------------ <shadow-root shadowTwo> - * | | - * <span elemFour> <content elemSix> - * | - * <content elemFive> - */ - -elemOne = document.createElement("div"); -elemOne.addEventListener("custom", eventListener); - -elemTwo = document.createElement("span"); -elemTwo.addEventListener("custom", eventListener); - -elemThree = document.createElement("span"); -elemThree.addEventListener("custom", eventListener); - -elemFour = document.createElement("span"); -elemFour.addEventListener("custom", eventListener); - -elemFive = document.createElement("content"); -elemFive.addEventListener("custom", eventListener); - -elemSix = document.createElement("content"); -elemSix.addEventListener("custom", eventListener); - -shadowOne = elemOne.createShadowRoot(); -shadowOne.addEventListener("custom", eventListener); - -shadowTwo = elemThree.createShadowRoot(); -shadowTwo.addEventListener("custom", eventListener); - -elemOne.appendChild(elemTwo); -shadowOne.appendChild(elemThree); -elemThree.appendChild(elemFour); -elemFour.appendChild(elemFive); -shadowTwo.appendChild(elemSix); - -eventChain = []; -customEvent = new CustomEvent("custom", { "bubbles" : true, "composed" : true }); -elemTwo.dispatchEvent(customEvent); -isEventChain(eventChain, [elemTwo, elemFive, elemFour, elemSix, shadowTwo, elemThree, shadowOne, elemOne], "Event path for test 3 for event dispatched on elemTwo."); - -/* - * Test 4: Test of event dispatch through host with multiple ShadowRoots with shadow insertion point. - * - * <div elemSeven> --- <shadow-root shadowTwo> (younger ShadowRoot) - * | | | - * <div elemOne> | <div elemSix> -------- <shadow-root shadowOne> - * | | | - * | <shadow elemFour> <content elemFive> - * | | - * | <content elemTwo> - * | - * --- <shadow-root shadowThree> (older ShadowRoot) - * | | - * | <content elemThree> - * | - * <div elemEight> - */ - -elemOne = document.createElement("div"); -elemOne.addEventListener("custom", eventListener); - -elemTwo = document.createElement("content"); -elemTwo.addEventListener("custom", eventListener); - -elemThree = document.createElement("content"); -elemThree.addEventListener("custom", eventListener); - -elemFour = document.createElement("shadow"); -elemFour.addEventListener("custom", eventListener); - -elemFive = document.createElement("content"); -elemFive.addEventListener("custom", eventListener); - -elemSix = document.createElement("div"); -elemSix.addEventListener("custom", eventListener); - -var elemSeven = document.createElement("div"); -elemSeven.addEventListener("custom", eventListener); - -var elemEight = document.createElement("div"); -elemEight.addEventListener("custom", eventListener); - -var shadowThree = elemSeven.createShadowRoot(); -shadowThree.addEventListener("custom", eventListener); - -shadowTwo = elemSeven.createShadowRoot(); -shadowTwo.addEventListener("custom", eventListener); - -shadowOne = elemSix.createShadowRoot(); -shadowOne.addEventListener("custom", eventListener); - -elemSeven.appendChild(elemOne); -shadowTwo.appendChild(elemSix); -elemSix.appendChild(elemFour); -elemFour.appendChild(elemTwo); -shadowThree.appendChild(elemEight); -shadowThree.appendChild(elemThree); -shadowOne.appendChild(elemFive); - -eventChain = []; -customEvent = new CustomEvent("custom", { "bubbles" : true, "composed" : true }); -elemOne.dispatchEvent(customEvent); -isEventChain(eventChain, [elemOne, elemFive, shadowOne, elemThree, shadowThree, elemTwo, elemFour, elemSix, shadowTwo, elemSeven], "Event path for test 4 for event dispatched on elemOne."); - -eventChain = []; -customEvent = new CustomEvent("custom", { "bubbles" : true, "composed" : true }); -elemEight.dispatchEvent(customEvent); -isEventChain(eventChain, [elemEight, elemFive, shadowOne, elemSix, shadowTwo, elemSeven], "Event path for test 4 for event dispatched on elemEight."); - -/* - * Test 5: Test of event dispatch through nested shadowroot with insertion points that match specific tags. - * - * <div elemOne> --------- <shadow-root shadowOne> - * | | | - * | <p elemThree> <span elemFour> ------------------------ <shadow-root shadowTwo> - * | | | | - * <span elemTwo> | <content select="p" elemFive> <content elemSeven> - * | - * <content select="span" elemSix> - */ - -elemOne = document.createElement("div"); -elemOne.addEventListener("custom", eventListener); - -elemTwo = document.createElement("span"); -elemTwo.addEventListener("custom", eventListener); - -elemThree = document.createElement("p"); -elemThree.addEventListener("custom", eventListener); - -elemFour = document.createElement("span"); -elemFour.addEventListener("custom", eventListener); - -elemFive = document.createElement("content"); -elemFive.select = "p"; -elemFive.addEventListener("custom", eventListener); - -elemSix = document.createElement("content"); -elemSix.select = "span"; -elemSix.addEventListener("custom", eventListener); - -elemSeven = document.createElement("content"); -elemSeven.addEventListener("custom", eventListener); - -shadowTwo = elemFour.createShadowRoot(); -shadowTwo.addEventListener("custom", eventListener); - -shadowOne = elemOne.createShadowRoot(); -shadowOne.addEventListener("custom", eventListener); - -elemOne.appendChild(elemTwo); -elemOne.appendChild(elemThree); -shadowOne.appendChild(elemFour); -elemFour.appendChild(elemSix); -elemFour.appendChild(elemFive); -shadowTwo.appendChild(elemSeven); - -eventChain = []; -customEvent = new CustomEvent("custom", { "bubbles" : true, "composed" : true }); -elemTwo.dispatchEvent(customEvent); -isEventChain(eventChain, [elemTwo, elemSeven, shadowTwo, elemSix, elemFour, shadowOne, elemOne], "Event path for test 5 for event dispatched on elemTwo."); - -eventChain = []; -customEvent = new CustomEvent("custom", { "bubbles" : true, "composed" : true }); -elemThree.dispatchEvent(customEvent); -isEventChain(eventChain, [elemThree, elemSeven, shadowTwo, elemFive, elemFour, shadowOne, elemOne], "Event path for test 5 for event dispatched on elemThree."); - -/* - * Test 6: Test of event dispatch through nested shadowroot with insertion points that match specific tags. - * - * <div elemOne> --------- <shadow-root shadowOne>; - * | | | - * | <p elemThree> <span elemFour> ------ <shadow-root shadowTwo> - * | | | | - * <span elemTwo> <content elemFive> | <content select="p" elemSeven> - * | - * <content select="span" elemSix> - */ - -elemOne = document.createElement("div"); -elemOne.addEventListener("custom", eventListener); - -elemTwo = document.createElement("span"); -elemTwo.addEventListener("custom", eventListener); - -elemThree = document.createElement("p"); -elemThree.addEventListener("custom", eventListener); - -elemFour = document.createElement("span"); -elemFour.addEventListener("custom", eventListener); - -elemFive = document.createElement("content"); -elemFive.addEventListener("custom", eventListener); - -elemSix = document.createElement("content"); -elemSix.select = "span"; -elemSix.addEventListener("custom", eventListener); - -elemSeven = document.createElement("content"); -elemSeven.select = "p"; -elemSeven.addEventListener("custom", eventListener); - -shadowTwo = elemFour.createShadowRoot(); -shadowTwo.addEventListener("custom", eventListener); - -shadowOne = elemOne.createShadowRoot(); -shadowOne.addEventListener("custom", eventListener); - -elemOne.appendChild(elemTwo); -elemOne.appendChild(elemThree); -shadowOne.appendChild(elemFour); -elemFour.appendChild(elemFive); -shadowTwo.appendChild(elemSix); -shadowTwo.appendChild(elemSeven); - -eventChain = []; -customEvent = new CustomEvent("custom", { "bubbles" : true, "composed" : true }); -elemTwo.dispatchEvent(customEvent); -isEventChain(eventChain, [elemTwo, elemSix, shadowTwo, elemFive, elemFour, shadowOne, elemOne], "Event path for test 6 for event dispatched on elemTwo."); - -eventChain = []; -customEvent = new CustomEvent("custom", { "bubbles" : true, "composed" : true }); -elemThree.dispatchEvent(customEvent); -isEventChain(eventChain, [elemThree, elemSeven, shadowTwo, elemFive, elemFour, shadowOne, elemOne], "Event path for test 6 for event dispatched on elemThree."); - -/* - * Test 7: Test of event dispatch through nested shadowroot with insertion points that match specific tags. - * - * <div elemOne> --------- <shadow-root shadowOne> - * | | | - * | <p elemThree> <span elemFour> ------ <shadow-root shadowTwo> - * | | | - * <span elemTwo> <content elemFive> <span elemEight> - * | | - * | <content select="p" elemSeven> - * | - * <content select="span" elemSix> - */ - -elemOne = document.createElement("div"); -elemOne.addEventListener("custom", eventListener); - -elemTwo = document.createElement("span"); -elemTwo.addEventListener("custom", eventListener); - -elemThree = document.createElement("p"); -elemThree.addEventListener("custom", eventListener); - -elemFour = document.createElement("span"); -elemFour.addEventListener("custom", eventListener); - -elemFive = document.createElement("content"); -elemFive.addEventListener("custom", eventListener); - -elemSix = document.createElement("content"); -elemSix.select = "span"; -elemSix.addEventListener("custom", eventListener); - -elemSeven = document.createElement("content"); -elemSeven.select = "p"; -elemSeven.addEventListener("custom", eventListener); - -elemEight = document.createElement("span"); -elemEight.addEventListener("custom", eventListener); - -shadowTwo = elemFour.createShadowRoot(); -shadowTwo.addEventListener("custom", eventListener); - -shadowOne = elemOne.createShadowRoot(); -shadowOne.addEventListener("custom", eventListener); - -elemOne.appendChild(elemTwo); -elemOne.appendChild(elemThree); -shadowOne.appendChild(elemFour); -elemFour.appendChild(elemFive); -shadowTwo.appendChild(elemEight); -elemEight.appendChild(elemSix); -elemEight.appendChild(elemSeven); - -eventChain = []; -customEvent = new CustomEvent("custom", { "bubbles" : true, "composed" : true }); -elemTwo.dispatchEvent(customEvent); -isEventChain(eventChain, [elemTwo, elemSix, elemEight, shadowTwo, elemFive, elemFour, shadowOne, elemOne], "Event path for test 7 for event dispatched on elemTwo."); - -eventChain = []; -customEvent = new CustomEvent("custom", { "bubbles" : true, "composed" : true }); -elemThree.dispatchEvent(customEvent); -isEventChain(eventChain, [elemThree, elemSeven, elemEight, shadowTwo, elemFive, elemFour, shadowOne, elemOne], "Event path for test 7 for event dispatched on elemThree."); - -/* - * Test 8: Test of event dispatch through host with multiple ShadowRoots with shadow insertion point. - * - * <div elemOne> --- <shadow-root shadowOne> (younger ShadowRoot) - * | | - * | <div elemFour> - * | | - * | <shadow elemTwo> - * | - * --- <shadow-root shadowTwo> (older ShadowRoot) - * | - * <div elemThree> - */ - -elemOne = document.createElement("div"); -elemOne.addEventListener("custom", eventListener); - -elemTwo = document.createElement("shadow"); -elemTwo.addEventListener("custom", eventListener); - -elemThree = document.createElement("div"); -elemThree.addEventListener("custom", eventListener); - -elemFour = document.createElement("div"); -elemFour.addEventListener("custom", eventListener); - -shadowTwo = elemOne.createShadowRoot(); -shadowTwo.addEventListener("custom", eventListener); - -shadowOne = elemOne.createShadowRoot(); -shadowOne.addEventListener("custom", eventListener); - -shadowOne.appendChild(elemFour); -elemFour.appendChild(elemTwo); -shadowTwo.appendChild(elemThree); - -eventChain = []; -customEvent = new CustomEvent("custom", { "bubbles" : true, "composed" : true }); -elemThree.dispatchEvent(customEvent); -isEventChain(eventChain, [elemThree, shadowTwo, elemTwo, elemFour, shadowOne, elemOne], "Event path for test 8 for event dispatched on elemThree."); - -</script> -</body> -</html> diff --git a/dom/tests/mochitest/webcomponents/test_fallback_dest_insertion_points.html b/dom/tests/mochitest/webcomponents/test_fallback_dest_insertion_points.html deleted file mode 100644 index 4eefa165f..000000000 --- a/dom/tests/mochitest/webcomponents/test_fallback_dest_insertion_points.html +++ /dev/null @@ -1,71 +0,0 @@ -<!DOCTYPE HTML> -<html> -<!-- -https://bugzilla.mozilla.org/show_bug.cgi?id=999999 ---> -<head> - <meta charset="utf-8"> - <title>Test for Bug 999999</title> - <script type="application/javascript" src="/tests/SimpleTest/SimpleTest.js"></script> - <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/> -</head> -<body> -<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=999999">Mozilla Bug 999999</a> -<p id="display"></p> -<div id="content"> -<div id="shadowhost"></div> -</div> -<pre id="test"> -</pre> -<script type="application/javascript"> - -/** Test for Bug 999999 **/ -var host = document.getElementById("shadowhost"); - -// Test destination insertion points of node distributed to content element. -var shadowRoot = host.createShadowRoot(); -shadowRoot.innerHTML = '<div id="innerhost"><content id="innercontent"></content></div>'; - -var fallback = document.createElement("span"); -var innerContent = shadowRoot.getElementById("innercontent"); - -innerContent.appendChild(fallback); - -is(fallback.getDestinationInsertionPoints().length, 1, "Active fallback content should be distributed to insertion point."); -is(fallback.getDestinationInsertionPoints()[0], innerContent, "Insertion point should be in list of destination insertion points."); - -// Test destination insertion points of reprojected fallback content. -var innerHost = shadowRoot.getElementById("innerhost"); -var innerShadowRoot = innerHost.createShadowRoot(); -innerShadowRoot.innerHTML = '<content id="innerinnercontent"></content>'; - -var innerInnerContent = innerShadowRoot.getElementById("innerinnercontent"); - -is(fallback.getDestinationInsertionPoints().length, 2, "Fallback content should have been distributed into parent and reprojected into another insertion point."); -is(fallback.getDestinationInsertionPoints()[1], innerInnerContent, "Destination insertion points should contain content element to which the node was reprojected."); - -// Test destination insertion points of fallback content that was dropped due to content element matching a node in the host. -var span = document.createElement("span"); -host.appendChild(span); - -is(fallback.getDestinationInsertionPoints().length, 0, "After dropping insertion points, fallback content should not have any nodes in destination insertion points list."); - -// Test destination insertion points of fallback content after reactivating by dropping matched content on host. -host.removeChild(span); -is(fallback.getDestinationInsertionPoints().length, 2, "Fallback content should have 2 destination insertion points after being reactivated."); -is(fallback.getDestinationInsertionPoints()[0], innerContent, "First destination insertion point should be the parent content"); -is(fallback.getDestinationInsertionPoints()[1], innerInnerContent, "Second destination insertion point should be the content to which the node is reprojected."); - -// Test destination insertion points of fallback content after removed from the tree. -innerContent.removeChild(fallback); -is(fallback.getDestinationInsertionPoints().length, 0, "Fallback content is no longer fallback content, destination insertion points should be empty."); - -// Test destination insertion points of child of non-insertion point content element. -var notInsertionPointContent = document.createElement("content"); -var notFallback = document.createElement("span"); -notInsertionPointContent.appendChild(notFallback); -is(notFallback.getDestinationInsertionPoints().length, 0, "Child of non-insertion point content should not be distributed to any nodes."); - -</script> -</body> -</html> diff --git a/dom/tests/mochitest/webcomponents/test_nested_content_element.html b/dom/tests/mochitest/webcomponents/test_nested_content_element.html deleted file mode 100644 index 1d98d2996..000000000 --- a/dom/tests/mochitest/webcomponents/test_nested_content_element.html +++ /dev/null @@ -1,127 +0,0 @@ -<!DOCTYPE HTML> -<html> -<!-- -https://bugzilla.mozilla.org/show_bug.cgi?id=806506 ---> -<head> - <title>Test for HTMLContent element</title> - <script type="text/javascript" src="/tests/SimpleTest/SimpleTest.js"></script> - <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" /> -</head> -<body> -<div id="grabme"></div> -<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=806506">Bug 806506</a> -<script> - -/** - * Constructs a node with a nested ShadowRoot with the following structure: - * <span> - - - - - - - - - - <ShadowRoot> - * <span> <span> - - - - - - - - - - <ShadowRoot> - * id=one id=four <span> - * data-color=red data-color=orange id=eleven - * <span> <span> <content> - * id=two id=five id=twelve - * data-color=blue data-color=purple select=secondSelect - * <span> <content> <span> - * id=three id=six id=thirteen - * data-color=green select=firstSelect - * <span> - * id=seven - * <content> - * id=eight - * <span> - * id=nine - * <span> - * id=ten - * data-color=grey - */ -function constructTree(firstSelect, secondSelect) { - var rootSpan = document.createElement("span"); - rootSpan.innerHTML = '<span id="one" data-color="red"></span><span id="two" data-color="blue"></span><span id="three" data-color="green"></span>'; - var firstShadow = rootSpan.createShadowRoot(); - firstShadow.innerHTML = '<span id="four" data-color="orange"><span id="five" data-color="purple"></span><content id="six" select="' + firstSelect + '"><span id="seven"></span><content id="eight"></content><span id="nine"></span></content><span id="ten"></span></span>'; - var secondShadow = firstShadow.firstChild.createShadowRoot(); - secondShadow.innerHTML = '<span id="eleven"></span><content id="twelve" select="' + secondSelect + '"></content><span id="thirteen"></span>'; - return rootSpan; -} - -// Create a tree with content that matches on everything and check node distribution. -var allSpan = constructTree("*", "*"); -var firstContent = allSpan.shadowRoot.getElementById("six"); -var firstDistNodes = firstContent.getDistributedNodes(); -is(firstDistNodes.length, 3, "Universal selector should match all nodes."); -// Check the order of the distributed nodes. -is(firstDistNodes.item(0).id, "one", "First distributed node should have id of 'one'"); -is(firstDistNodes.item(1).id, "two", "Second distributed node should have id of 'two'"); -is(firstDistNodes.item(2).id, "three", "Third distributed node should have id of 'three'"); -var secondContent = allSpan.shadowRoot.firstChild.shadowRoot.getElementById("twelve"); -var secondDistNodes = secondContent.getDistributedNodes(); -is(secondDistNodes.length, 5, "Universial selector should match all nodes including those distributed into content."); -// Check the order of the distribute nodes. -is(secondDistNodes.item(0).id, "five", "First distributed node should have id of 'five'"); -is(secondDistNodes.item(1).id, "one", "Second distributed (reprojected) node should have id of 'one'"); -is(secondDistNodes.item(2).id, "two", "Third distributed (reprojected) node should have id of 'two'"); -is(secondDistNodes.item(3).id, "three", "Fourth distributed (reprojected) node should have id of 'three'"); -is(secondDistNodes.item(4).id, "ten", "Fifth distributed node should have id of 'ten'"); - -// Append an element after id=two and make sure that it is inserted into the corrent -// position in the insertion points. -var additionalSpan = document.createElement("span"); -additionalSpan.id = "additional"; - -// Insert the additional span in the third position, before the span with id=three. -allSpan.insertBefore(additionalSpan, allSpan.childNodes.item(2)); -firstDistNodes = firstContent.getDistributedNodes(); -secondDistNodes = secondContent.getDistributedNodes(); -is(firstDistNodes.length, 4, "First insertion point should match one more node."); -is(firstDistNodes.item(2).id, "additional", "Additional span should have been inserted into the third position of the first insertion point."); - -is(secondDistNodes.length, 6, "Second insertion point should match one more node."); -is(secondDistNodes.item(3).id, "additional", "Additional span should have been inserted into the fourth position of the second insertion point."); - -function nodeListDoesNotContain(nodeList, element) { - for (var i = 0; i < nodeList.length; i++) { - if (nodeList[i] == element) { - return false; - } - } - return true; -} - -// Remove the span with id=one and check that it is removed from all insertion points. -allSpan = constructTree("*", "*"); -var spanOne = allSpan.firstChild; -allSpan.removeChild(spanOne); -firstContent = allSpan.shadowRoot.getElementById("six"); -ok(nodeListDoesNotContain(firstContent.getDistributedNodes(), spanOne), "Child removed from host should not appear in insertion point node list."); -secondContent = allSpan.shadowRoot.firstChild.shadowRoot.getElementById("twelve"); -ok(nodeListDoesNotContain(secondContent.getDistributedNodes(), spanOne), "Child removed from host should not appear in nested insertion point node list."); - -// Make sure <content> in fallback content is inactive. -// First insertion point will not match anything and will use fallback content. -allSpan = constructTree("#nomatch", "*"); -var fallbackInsertionPoint = allSpan.shadowRoot.getElementById("eight"); -is(fallbackInsertionPoint.getDistributedNodes().length, 0, "Insertion points in default content should be inactive."); - -// Insertion points with non-universal selectors. -allSpan = constructTree("span[data-color=blue]", "*"); -firstContent = allSpan.shadowRoot.getElementById("six"); -is(firstContent.getDistributedNodes().length, 1, "Insertion point selector should only match one node."); -is(firstContent.getDistributedNodes()[0].dataset.color, "blue", "Projected node should match selector."); -secondContent = allSpan.shadowRoot.firstChild.shadowRoot.getElementById("twelve"); -is(secondContent.getDistributedNodes().length, 3, "Second insertion point should match two children and one reprojected node."); -is(secondContent.getDistributedNodes()[1].dataset.color, "blue", "Projected node should match selector."); - -allSpan = constructTree("span[data-color=blue]", "span[data-color=blue]"); -firstContent = allSpan.shadowRoot.getElementById("six"); -is(firstContent.getDistributedNodes().length, 1, "Insertion point selector should only match one node."); -is(firstContent.getDistributedNodes()[0].dataset.color, "blue", "Projected node should match selector."); -secondContent = allSpan.shadowRoot.firstChild.shadowRoot.getElementById("twelve"); -is(secondContent.getDistributedNodes().length, 1, "Insertion point should only match reprojected node."); -is(secondContent.getDistributedNodes()[0].dataset.color, "blue", "Projected node should match selector."); - -// Make sure that dynamically appended default content will get distributed. -</script> -</body> -</html> - diff --git a/dom/tests/mochitest/webcomponents/test_shadowroot_host.html b/dom/tests/mochitest/webcomponents/test_shadowroot_host.html deleted file mode 100644 index f48d63e87..000000000 --- a/dom/tests/mochitest/webcomponents/test_shadowroot_host.html +++ /dev/null @@ -1,41 +0,0 @@ -<!DOCTYPE HTML> -<html> -<!-- -https://bugzilla.mozilla.org/show_bug.cgi?id=1083587 ---> -<head> - <meta charset="utf-8"> - <title>Test for Bug 1083587</title> - <script type="application/javascript" src="/tests/SimpleTest/SimpleTest.js"></script> - <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/> -</head> -<body> -<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1083587">Mozilla Bug 1083587</a> -<p id="display"></p> -<div id="content" style="display: none"> -<div id="host"></div> -</div> -<pre id="test"> -</pre> -<script type="application/javascript"> - -/** Test for Bug 1083587 **/ -var hostInDoc = document.getElementById("host"); -var shadowOne = hostInDoc.createShadowRoot(); -is(shadowOne.host, hostInDoc); - -var shadowTwo = hostInDoc.createShadowRoot(); -is(shadowOne.host, hostInDoc); -is(shadowTwo.host, hostInDoc); - -var hostNotInDoc = document.createElement("div"); -var shadowThree = hostNotInDoc.createShadowRoot(); -is(shadowThree.host, hostNotInDoc); - -var shadowFour = hostNotInDoc.createShadowRoot(); -is(shadowThree.host, hostNotInDoc); -is(shadowFour.host, hostNotInDoc); - -</script> -</body> -</html> diff --git a/dom/tests/mochitest/webcomponents/test_shadowroot_style_multiple_shadow.html b/dom/tests/mochitest/webcomponents/test_shadowroot_style_multiple_shadow.html deleted file mode 100644 index 7a606bcd7..000000000 --- a/dom/tests/mochitest/webcomponents/test_shadowroot_style_multiple_shadow.html +++ /dev/null @@ -1,57 +0,0 @@ -<!DOCTYPE HTML> -<html> -<!-- -https://bugzilla.mozilla.org/show_bug.cgi?id=806506 ---> -<head> - <title>Test for ShadowRoot styles with multiple ShadowRoot on host.</title> - <script type="text/javascript" src="/tests/SimpleTest/SimpleTest.js"></script> - <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" /> -</head> -<body> -<div class="tall" id="bodydiv"></div> -<div id="container"></div> -<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=806506">Bug 806506</a> -<script> -// Create ShadowRoot. -var container = document.getElementById("container"); -var elem = document.createElement("div"); -container.appendChild(elem); // Put ShadowRoot host in document. -var firstRoot = elem.createShadowRoot(); -var secondRoot = elem.createShadowRoot(); -var thirdRoot = elem.createShadowRoot(); - -// A style element that will be appended into the ShadowRoot. -var firstStyle = document.createElement("style"); -firstRoot.appendChild(firstStyle); -is(firstRoot.styleSheets.length, 1, "firstStyle should be the only style in firstRoot."); -is(firstRoot.styleSheets[0].ownerNode, firstStyle, "firstStyle should in the ShadowRoot styleSheets."); - -var secondStyle = document.createElement("style"); -secondRoot.appendChild(secondStyle); -is(secondRoot.styleSheets.length, 1, "secondStyle should be the only style in secondRoot."); -is(secondRoot.styleSheets[0].ownerNode, secondStyle, "secondStyle should in the ShadowRoot styleSheets."); - -var thirdStyle = document.createElement("style"); -thirdRoot.appendChild(thirdStyle); -is(thirdRoot.styleSheets.length, 1, "thirdStyle should be the only style in thirdRoot."); -is(thirdRoot.styleSheets[0].ownerNode, thirdStyle, "thirdStyle should in the ShadowRoot styleSheets."); - -// Check the stylesheet counts again to make sure that none of the style sheets leaked into the older ShadowRoots. -is(firstRoot.styleSheets.length, 1, "Adding a stylesheet to a younger ShadowRoot should not affect stylesheets in the older ShadowRoot."); -is(secondRoot.styleSheets.length, 1, "Adding a stylesheet to a younger ShadowRoot should not affect stylesheets in the older ShadowRoot."); - -// Remove styles and make sure they are removed from the correct ShadowRoot. -firstRoot.removeChild(firstStyle); -is(firstRoot.styleSheets.length, 0, "firstRoot should no longer have any styles."); - -thirdRoot.removeChild(thirdStyle); -is(thirdRoot.styleSheets.length, 0, "thirdRoot should no longer have any styles."); - -secondRoot.removeChild(secondStyle); -is(secondRoot.styleSheets.length, 0, "secondRoot should no longer have any styles."); - -</script> -</body> -</html> - diff --git a/dom/tests/mochitest/webcomponents/test_shadowroot_youngershadowroot.html b/dom/tests/mochitest/webcomponents/test_shadowroot_youngershadowroot.html deleted file mode 100644 index 17743321b..000000000 --- a/dom/tests/mochitest/webcomponents/test_shadowroot_youngershadowroot.html +++ /dev/null @@ -1,41 +0,0 @@ -<!DOCTYPE HTML> -<html> -<!-- -https://bugzilla.mozilla.org/show_bug.cgi?id=1083587 ---> -<head> - <meta charset="utf-8"> - <title>Test for Bug 1083587</title> - <script type="application/javascript" src="/tests/SimpleTest/SimpleTest.js"></script> - <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/> -</head> -<body> -<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1083587">Mozilla Bug 1083587</a> -<p id="display"></p> -<div id="content" style="display: none"> -<div id="host"></div> -</div> -<pre id="test"> -</pre> -<script type="application/javascript"> - -/** Test for Bug 1083587 **/ -var hostInDoc = document.getElementById("host"); -var shadowOne = hostInDoc.createShadowRoot(); -is(shadowOne.olderShadowRoot, null); - -var shadowTwo = hostInDoc.createShadowRoot(); -is(shadowOne.olderShadowRoot, null); -is(shadowTwo.olderShadowRoot, shadowOne); - -var hostNotInDoc = document.createElement("div"); -var shadowThree = hostNotInDoc.createShadowRoot(); -is(shadowThree.olderShadowRoot, null); - -var shadowFour = hostNotInDoc.createShadowRoot(); -is(shadowThree.olderShadowRoot, null); -is(shadowFour.olderShadowRoot, shadowThree); - -</script> -</body> -</html> diff --git a/dom/tests/mochitest/webcomponents/test_template_custom_elements.html b/dom/tests/mochitest/webcomponents/test_template_custom_elements.html deleted file mode 100644 index f7f4340cf..000000000 --- a/dom/tests/mochitest/webcomponents/test_template_custom_elements.html +++ /dev/null @@ -1,32 +0,0 @@ -<!DOCTYPE HTML> -<html> -<!-- -https://bugzilla.mozilla.org/show_bug.cgi?id=1091425 ---> -<head> - <title>Test for custom elements in template</title> - <script type="text/javascript" src="/tests/SimpleTest/SimpleTest.js"></script> - <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" /> -</head> -<body> -<template> - <x-foo></x-foo> -</template> -<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1091425">Bug 1091425</a> -<script> - -var p = {}; -p.createdCallback = function() { - ok(false, "Created callback should not be called for custom elements in templates."); -}; - -document.registerElement("x-foo", { prototype: p }); - -ok(true, "Created callback should not be called for custom elements in templates."); - -</script> -<template> - <x-foo></x-foo> -</template> -</body> -</html> diff --git a/dom/tests/mochitest/webcomponents/test_unresolved_pseudo_class.html b/dom/tests/mochitest/webcomponents/test_unresolved_pseudo_class.html deleted file mode 100644 index 3e1fae8ee..000000000 --- a/dom/tests/mochitest/webcomponents/test_unresolved_pseudo_class.html +++ /dev/null @@ -1,99 +0,0 @@ -<!DOCTYPE HTML> -<html> -<!-- -https://bugzilla.mozilla.org/show_bug.cgi?id=1111633 ---> -<head> - <title>Test template element in stale document.</title> - <script type="text/javascript" src="/tests/SimpleTest/SimpleTest.js"></script> - <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" /> - <style> - :unresolved { - color: rgb(0, 0, 255); - background-color: rgb(0, 0, 255); - } - - x-foo { color: rgb(255, 0, 0); } - - [is="x-del"]:not(:unresolved) { color: rgb(255, 0, 0); } - - [is="x-bar"]:not(:unresolved) { color: rgb(255, 0, 0); } - - [is="x-bar"]:unresolved { background-color: rgb(255, 0, 0); } - - x-baz:not(:unresolved) { - color: rgb(255, 0, 0); - background-color: rgb(255, 0, 0); - } - - span { color: rgb(0,255,0); } - - x-foo:unresolved + span { color: rgb(255,0,0); } - - </style> -</head> -<body> -<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1111633">Bug 1111633</a> -<div id="container"></div> -<x-foo id="foo"></x-foo> -<span id="span1">This text should be green</span> -<span id="bar" is="x-bar"></span> -<x-baz id="baz"></x-baz> -<span id="del" is="x-del"></span> -<script> - -// Before registerElement -var foo = document.querySelector('#foo'); -is(getComputedStyle(foo).color, "rgb(0, 0, 255)", "foo - color"); -is(getComputedStyle(foo).backgroundColor, "rgb(0, 0, 255)", "foo - backgroundColor"); - -var bar = document.querySelector('#bar'); -is(getComputedStyle(bar).color, "rgb(0, 0, 255)", "bar - color"); -is(getComputedStyle(bar).backgroundColor, "rgb(255, 0, 0)", "bar - backgroundColor"); - -var baz = document.querySelector('#baz'); -is(getComputedStyle(baz).color, "rgb(0, 0, 255)", "baz - color"); -is(getComputedStyle(baz).backgroundColor, "rgb(0, 0, 255)", "baz - backgroundColor"); - -var span1 = document.querySelector('#span1'); -is(getComputedStyle(span1).color, "rgb(255, 0, 0)", "span1 - color"); - -var Foo = document.registerElement('x-foo', { prototype: Object.create(HTMLElement.prototype) }); - -var Bar = document.registerElement('x-bar', { extends: 'span', prototype: Object.create(HTMLSpanElement.prototype) }); - -var Baz = document.registerElement('x-baz', { prototype: Object.create(HTMLElement.prototype) }); - -// After registerElement -is(getComputedStyle(foo).color, "rgb(255, 0, 0)", - "foo - color (after registerElement)"); - -is(getComputedStyle(bar).color, - "rgb(255, 0, 0)", "bar - color (after registerElement)"); - -is(getComputedStyle(baz).color, - "rgb(255, 0, 0)", "baz - color (after registerElement)"); -is(getComputedStyle(baz).backgroundColor, - "rgb(255, 0, 0)", "baz - backgroundColor (after registerElement)"); - -is(getComputedStyle(span1).color, "rgb(0, 255, 0)", "span1 - color (after registerElement)"); - -// After tree removal -var del = document.querySelector('#del'); -is(getComputedStyle(del).color, "rgb(0, 0, 255)", "del - color"); -var par = del.parentNode; -par.removeChild(del); -// Changing is attribute after creation should not change the type -// of a custom element, even if the element was removed and re-append to the tree. -del.setAttribute("is", "foobar"); -par.appendChild(del); -is(getComputedStyle(del).color, "rgb(0, 0, 255)", "del - color (after reappend)"); -var Del = document.registerElement('x-del', { extends: 'span', prototype: Object.create(HTMLSpanElement.prototype) }); -// [is="x-del"] will not match any longer so the rule of span will apply -is(getComputedStyle(del).color, "rgb(0, 255, 0)", "del - color (after registerElement)"); -// but the element should have been upgraded: -ok(del instanceof Del, "element was upgraded correctly after changing |is|"); - -</script> -</body> -</html> |