diff options
Diffstat (limited to 'dom/tests')
36 files changed, 561 insertions, 1603 deletions
diff --git a/dom/tests/browser/browser_frame_elements.js b/dom/tests/browser/browser_frame_elements.js index e26fe95ec..c6771e253 100644 --- a/dom/tests/browser/browser_frame_elements.js +++ b/dom/tests/browser/browser_frame_elements.js @@ -1,5 +1,4 @@ /* -*- indent-tabs-mode: nil; js-indent-level: 2 -*- */ -/* vim: set ts=2 et sw=2 tw=80: */ /* This Source Code Form is subject to the terms of the Mozilla Public * License, v. 2.0. If a copy of the MPL was not distributed with this * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ diff --git a/dom/tests/mochitest/beacon/beacon-handler.sjs b/dom/tests/mochitest/beacon/beacon-handler.sjs index a3b6f2593..4c51d371d 100644 --- a/dom/tests/mochitest/beacon/beacon-handler.sjs +++ b/dom/tests/mochitest/beacon/beacon-handler.sjs @@ -1,5 +1,4 @@ /* -*- Mode: C++; tab-width: 8; indent-tabs-mode: nil; c-basic-offset: 2 -*- */ -/* vim: set ts=8 sts=2 et sw=2 tw=80: */ /* This Source Code Form is subject to the terms of the Mozilla Public * License, v. 2.0. If a copy of the MPL was not distributed with this * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ diff --git a/dom/tests/mochitest/bugs/file_redirector.sjs b/dom/tests/mochitest/bugs/file_redirector.sjs index 70478e69a..6d7d14d95 100644 --- a/dom/tests/mochitest/bugs/file_redirector.sjs +++ b/dom/tests/mochitest/bugs/file_redirector.sjs @@ -1,4 +1,3 @@ -/* vim: set ft=javascript: */ /* Any copyright is dedicated to the Public Domain. http://creativecommons.org/publicdomain/zero/1.0/ */ function handleRequest(request, response) { diff --git a/dom/tests/mochitest/notification/desktop-notification/moz.build b/dom/tests/mochitest/notification/desktop-notification/moz.build index 28919c271..83ed8d9d9 100644 --- a/dom/tests/mochitest/notification/desktop-notification/moz.build +++ b/dom/tests/mochitest/notification/desktop-notification/moz.build @@ -1,5 +1,4 @@ # -*- Mode: python; indent-tabs-mode: nil; tab-width: 40 -*- -# vim: set filetype=python: # This Source Code Form is subject to the terms of the Mozilla Public # License, v. 2.0. If a copy of the MPL was not distributed with this # file, You can obtain one at http://mozilla.org/MPL/2.0/. diff --git a/dom/tests/mochitest/webcomponents/chrome.ini b/dom/tests/mochitest/webcomponents/chrome.ini new file mode 100644 index 000000000..5e25c2123 --- /dev/null +++ b/dom/tests/mochitest/webcomponents/chrome.ini @@ -0,0 +1,9 @@ +[DEFAULT] +support-files = + dummy_page.html + +[test_custom_element_htmlconstructor_chrome.html] +skip-if = os == 'android' # bug 1323645 +support-files = + htmlconstructor_autonomous_tests.js + htmlconstructor_builtin_tests.js diff --git a/dom/tests/mochitest/webcomponents/dummy_page.html b/dom/tests/mochitest/webcomponents/dummy_page.html new file mode 100644 index 000000000..fd238954c --- /dev/null +++ b/dom/tests/mochitest/webcomponents/dummy_page.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<html lang="en"> +<head> +<title>Dummy test page</title> +<meta charset="utf-8"/> +</head> +<body> +<p>Dummy test page</p> +</body> +</html> diff --git a/dom/tests/mochitest/webcomponents/htmlconstructor_autonomous_tests.js b/dom/tests/mochitest/webcomponents/htmlconstructor_autonomous_tests.js new file mode 100644 index 000000000..636d9aff6 --- /dev/null +++ b/dom/tests/mochitest/webcomponents/htmlconstructor_autonomous_tests.js @@ -0,0 +1,81 @@ +promises.push(test_with_new_window((testWindow) => { + // Test calling the HTMLElement constructor. + (() => { + SimpleTest.doesThrow(() => { + testWindow.HTMLElement(); + }, 'calling the HTMLElement constructor should throw a TypeError'); + })(); + + // Test constructing a HTMLELement. + (() => { + SimpleTest.doesThrow(() => { + new testWindow.HTMLElement(); + }, 'constructing a HTMLElement should throw a TypeError'); + })(); + + // Test constructing a custom element with defining HTMLElement as entry. + (() => { + testWindow.customElements.define('x-defining-html-element', + testWindow.HTMLElement); + SimpleTest.doesThrow(() => { + new testWindow.HTMLElement(); + }, 'constructing a custom element with defining HTMLElement as registry ' + + 'entry should throw a TypeError'); + })(); + + // Test calling a custom element constructor and constructing an autonomous + // custom element. + (() => { + let num_constructor_invocations = 0; + class X extends testWindow.HTMLElement { + constructor() { + super(); + num_constructor_invocations++; + } + } + testWindow.customElements.define('x-element', X); + SimpleTest.doesThrow(() => { + X(); + }, 'calling an autonomous custom element constructor should throw a TypeError'); + + let element = new X(); + SimpleTest.is(Object.getPrototypeOf(Cu.waiveXrays(element)), X.prototype, + 'constructing an autonomous custom element; ' + + 'the element should be a registered constructor'); + SimpleTest.is(element.localName, 'x-element', + 'constructing an autonomous custom element; ' + + 'the element tag name should be "x-element"'); + SimpleTest.is(element.namespaceURI, 'http://www.w3.org/1999/xhtml', + 'constructing an autonomous custom element; ' + + 'the element should be in the HTML namespace'); + SimpleTest.is(element.prefix, null, + 'constructing an autonomous custom element; ' + + 'the element name should not have a prefix'); + SimpleTest.is(element.ownerDocument, testWindow.document, + 'constructing an autonomous custom element; ' + + 'the element should be owned by the registry\'s associated ' + + 'document'); + SimpleTest.is(num_constructor_invocations, 1, + 'constructing an autonomous custom element; ' + + 'the constructor should have been invoked once'); + })(); + + // Test if prototype is no an object. + (() => { + function ElementWithNonObjectPrototype() { + let o = Reflect.construct(testWindow.HTMLElement, [], new.target); + SimpleTest.is(Object.getPrototypeOf(Cu.waiveXrays(o)), window.HTMLElement.prototype, + 'constructing an autonomous custom element; ' + + 'if prototype is not object, fallback from NewTarget\'s realm'); + } + + // Prototype have to be an object during define(), otherwise define will + // throw an TypeError exception. + ElementWithNonObjectPrototype.prototype = {}; + testWindow.customElements.define('x-non-object-prototype', + ElementWithNonObjectPrototype); + + ElementWithNonObjectPrototype.prototype = "string"; + new ElementWithNonObjectPrototype(); + })(); +})); diff --git a/dom/tests/mochitest/webcomponents/htmlconstructor_builtin_tests.js b/dom/tests/mochitest/webcomponents/htmlconstructor_builtin_tests.js new file mode 100644 index 000000000..0b04971e3 --- /dev/null +++ b/dom/tests/mochitest/webcomponents/htmlconstructor_builtin_tests.js @@ -0,0 +1,246 @@ +[ + // [TagName, InterfaceName] + ['a', 'Anchor'], + ['abbr', ''], + ['acronym', ''], + ['address', ''], + ['area', 'Area'], + ['article', ''], + ['aside', ''], + ['audio', 'Audio'], + ['b', ''], + ['base', 'Base'], + ['basefont', ''], + ['bdo', ''], + ['big', ''], + ['blockquote', 'Quote'], + ['body', 'Body'], + ['br', 'BR'], + ['button', 'Button'], + ['canvas', 'Canvas'], + ['caption', 'TableCaption'], + ['center', ''], + ['cite', ''], + ['code', ''], + ['col', 'TableCol'], + ['colgroup', 'TableCol'], + ['data', 'Data'], + ['datalist', 'DataList'], + ['dd', ''], + ['del', 'Mod'], + ['details', 'Details'], + ['dfn', ''], + ['dir', 'Directory'], + ['div', 'Div'], + ['dl', 'DList'], + ['dt', ''], + ['em', ''], + ['embed', 'Embed'], + ['fieldset', 'FieldSet'], + ['figcaption', ''], + ['figure', ''], + ['font', 'Font'], + ['footer', ''], + ['form', 'Form'], + ['frame', 'Frame'], + ['frameset', 'FrameSet'], + ['h1', 'Heading'], + ['h2', 'Heading'], + ['h3', 'Heading'], + ['h4', 'Heading'], + ['h5', 'Heading'], + ['h6', 'Heading'], + ['head', 'Head'], + ['header', ''], + ['hgroup', ''], + ['hr', 'HR'], + ['html', 'Html'], + ['i', ''], + ['iframe', 'IFrame'], + ['image', ''], + ['img', 'Image'], + ['input', 'Input'], + ['ins', 'Mod'], + ['kbd', ''], + ['label', 'Label'], + ['legend', 'Legend'], + ['li', 'LI'], + ['link', 'Link'], + ['listing', 'Pre'], + ['main', ''], + ['map', 'Map'], + ['mark', ''], + ['menu', 'Menu'], + ['menuitem', 'MenuItem'], + ['meta', 'Meta'], + ['meter', 'Meter'], + ['nav', ''], + ['nobr', ''], + ['noembed', ''], + ['noframes', ''], + ['noscript', ''], + ['object', 'Object'], + ['ol', 'OList'], + ['optgroup', 'OptGroup'], + ['option', 'Option'], + ['output', 'Output'], + ['p', 'Paragraph'], + ['param', 'Param'], + ['picture', 'Picture'], + ['plaintext', ''], + ['pre', 'Pre'], + ['progress', 'Progress'], + ['q', 'Quote'], + ['rb', ''], + ['rp', ''], + ['rt', ''], + ['rtc', ''], + ['ruby', ''], + ['s', ''], + ['samp', ''], + ['script', 'Script'], + ['section', ''], + ['select', 'Select'], + ['small', ''], + ['source', 'Source'], + ['span', 'Span'], + ['strike', ''], + ['strong', ''], + ['style', 'Style'], + ['sub', ''], + ['summary', ''], + ['sup', ''], + ['table', 'Table'], + ['tbody', 'TableSection'], + ['td', 'TableCell'], + ['textarea', 'TextArea'], + ['tfoot', 'TableSection'], + ['th', 'TableCell'], + ['thead', 'TableSection'], + ['template', 'Template'], + ['time', 'Time'], + ['title', 'Title'], + ['tr', 'TableRow'], + ['track', 'Track'], + ['tt', ''], + ['u', ''], + ['ul', 'UList'], + ['var', ''], + ['video', 'Video'], + ['wbr', ''], + ['xmp', 'Pre'], +].forEach((e) => { + let tagName = e[0]; + let interfaceName = 'HTML' + e[1] + 'Element'; + promises.push(test_with_new_window((testWindow) => { + // Use window from iframe to isolate the test. + // Test calling the HTML*Element constructor. + (() => { + SimpleTest.doesThrow(() => { + testWindow[interfaceName](); + }, 'calling the ' + interfaceName + ' constructor should throw a TypeError'); + })(); + + // Test constructing a HTML*ELement. + (() => { + SimpleTest.doesThrow(() => { + new testWindow[interfaceName](); + }, 'constructing a ' + interfaceName + ' should throw a TypeError'); + })(); + + // Test constructing a custom element with defining HTML*Element as entry. + (() => { + testWindow.customElements.define('x-defining-' + tagName, + testWindow[interfaceName]); + SimpleTest.doesThrow(() => { + new testWindow[interfaceName](); + }, 'constructing a custom element with defining ' + interfaceName + + ' as registry entry should throw a TypeError'); + })(); + + // Since HTMLElement can be registered without specifying "extends", skip + // testing HTMLElement tags. + if (interfaceName !== "HTMLElement") { + // Test constructing a customized HTML*Element with defining a registry entry + // without specifying "extends". + (() => { + class X extends testWindow[interfaceName] {} + testWindow.customElements.define('x-defining-invalid-' + tagName, X); + SimpleTest.doesThrow(() => { + new X(); + }, 'constructing a customized ' + interfaceName + ' with defining a ' + + 'registry entry without specifying "extends" should throw a TypeError'); + })(); + } + + // Test constructing a built-in custom element with defining a registry entry + // with incorrect "extends" information. + (() => { + class X extends testWindow[interfaceName] {} + testWindow.customElements.define('x-defining-incorrect-' + tagName, X, + { extends: tagName === 'img' ? 'p' : 'img' }); + SimpleTest.doesThrow(() => { + new X(); + }, 'constructing a customized ' + interfaceName + ' with defining a ' + + 'registry entry with incorrect "extends" should throw a TypeError'); + })(); + + // Test calling a custom element constructor and constructing a built-in + // custom element. + (() => { + let num_constructor_invocations = 0; + class X extends testWindow[interfaceName] { + constructor() { + super(); + num_constructor_invocations++; + } + } + testWindow.customElements.define('x-' + tagName, X, { extends: tagName }); + SimpleTest.doesThrow(() => { + X(); + }, 'calling a customized ' + interfaceName + ' constructor should throw a TypeError'); + + let element = new X(); + + SimpleTest.is(Object.getPrototypeOf(Cu.waiveXrays(element)), X.prototype, + 'constructing a customized ' + interfaceName + + '; the element should be a registered constructor'); + SimpleTest.is(element.localName, tagName, + 'constructing a customized ' + interfaceName + + '; the element tag name should be "' + tagName + '"'); + SimpleTest.is(element.namespaceURI, 'http://www.w3.org/1999/xhtml', + 'constructing a customized ' + interfaceName + + '; the element should be in the HTML namespace'); + SimpleTest.is(element.prefix, null, + 'constructing a customized ' + interfaceName + + '; the element name should not have a prefix'); + SimpleTest.is(element.ownerDocument, testWindow.document, + 'constructing a customized ' + interfaceName + + '; the element should be owned by the registry\'s associated ' + + 'document'); + SimpleTest.is(num_constructor_invocations, 1, + 'constructing a customized ' + interfaceName + + '; the constructor should have been invoked once'); + })(); + + // Test if prototype is no an object. + (() => { + function ElementWithNonObjectPrototype() { + let o = Reflect.construct(testWindow[interfaceName], [], new.target); + SimpleTest.is(Object.getPrototypeOf(Cu.waiveXrays(o)), window[interfaceName].prototype, + 'constructing a customized ' + interfaceName + + '; if prototype is not object, fallback from NewTarget\'s realm'); + } + + // Prototype have to be an object during define(), otherwise define will + // throw an TypeError exception. + ElementWithNonObjectPrototype.prototype = {}; + testWindow.customElements.define('x-non-object-prototype-' + tagName, + ElementWithNonObjectPrototype, + { extends: tagName }); + + ElementWithNonObjectPrototype.prototype = "string"; + new ElementWithNonObjectPrototype(); + })(); + })); +}); diff --git a/dom/tests/mochitest/webcomponents/mochitest.ini b/dom/tests/mochitest/webcomponents/mochitest.ini index f05140c57..7b6ec9724 100644 --- a/dom/tests/mochitest/webcomponents/mochitest.ini +++ b/dom/tests/mochitest/webcomponents/mochitest.ini @@ -1,49 +1,43 @@ [DEFAULT] support-files = inert_style.css + dummy_page.html [test_bug900724.html] [test_bug1017896.html] [test_bug1176757.html] [test_bug1276240.html] [test_content_element.html] -[test_custom_element_adopt_callbacks.html] [test_custom_element_callback_innerhtml.html] -[test_custom_element_clone_callbacks.html] -[test_custom_element_clone_callbacks_extended.html] -[test_custom_element_import_node_created_callback.html] +skip-if = true # disabled - See bug 1390396 +[test_custom_element_htmlconstructor.html] +skip-if = os == 'android' # bug 1323645 +support-files = + htmlconstructor_autonomous_tests.js + htmlconstructor_builtin_tests.js [test_custom_element_in_shadow.html] -[test_custom_element_register_invalid_callbacks.html] +skip-if = true || stylo # disabled - See bug 1390396 and 1293844 +[test_custom_element_throw_on_dynamic_markup_insertion.html] [test_custom_element_get.html] [test_custom_element_when_defined.html] -[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_uncatchable_exception.html] +skip-if = !debug # TestFunctions only applied in debug builds [test_detached_style.html] -[test_dynamic_content_element_matching.html] [test_document_adoptnode.html] [test_document_importnode.html] [test_document_register.html] -[test_document_register_base_queue.html] [test_document_register_lifecycle.html] -[test_document_register_parser.html] +skip-if = true # disabled - See bug 1390396 [test_document_register_stack.html] -[test_document_shared_registry.html] -[test_event_dispatch.html] +skip-if = true # disabled - See bug 1390396 [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] [test_bug1269155.html] diff --git a/dom/tests/mochitest/webcomponents/test_custom_element_adopt_callbacks.html b/dom/tests/mochitest/webcomponents/test_custom_element_adopt_callbacks.html deleted file mode 100644 index 28597b7c6..000000000 --- a/dom/tests/mochitest/webcomponents/test_custom_element_adopt_callbacks.html +++ /dev/null @@ -1,29 +0,0 @@ -<!DOCTYPE HTML> -<html> -<!-- -https://bugzilla.mozilla.org/show_bug.cgi?id=1081039 ---> -<head> - <title>Test callbacks for adopted 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> -<template id="template"><x-foo></x-foo></template> -<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1081039">Bug 1081039</a> -<script> - -var p = Object.create(HTMLElement.prototype); -p.createdCallback = function() { - ok(false, "Created callback should not be called for adopted node."); -}; - -document.registerElement("x-foo", { prototype: p }); - -var template = document.getElementById("template"); -var adoptedFoo = document.adoptNode(template.content.firstChild); -is(adoptedFoo.nodeName, "X-FOO"); - -</script> -</body> -</html> 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 94b02032f..22d957117 100644 --- a/dom/tests/mochitest/webcomponents/test_custom_element_callback_innerhtml.html +++ b/dom/tests/mochitest/webcomponents/test_custom_element_callback_innerhtml.html @@ -16,25 +16,21 @@ https://bugzilla.mozilla.org/show_bug.cgi?id=1102502 SimpleTest.waitForExplicitFinish(); -var attachedCallbackCount = 0; - -var p = Object.create(HTMLElement.prototype); - -p.createdCallback = function() { - ok(true, "createdCallback called."); -}; - -p.attachedCallback = function() { - ok(true, "attachedCallback should be called when the parser creates an element in the document."); - attachedCallbackCount++; - // attachedCallback should be called twice, once for the element created for innerHTML and - // once for the element created in this document. - if (attachedCallbackCount == 2) { - SimpleTest.finish(); +var connectedCallbackCount = 0; + +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_clone_callbacks.html b/dom/tests/mochitest/webcomponents/test_custom_element_clone_callbacks.html deleted file mode 100644 index eea9bafe0..000000000 --- a/dom/tests/mochitest/webcomponents/test_custom_element_clone_callbacks.html +++ /dev/null @@ -1,54 +0,0 @@ -<!DOCTYPE HTML> -<html> -<!-- -https://bugzilla.mozilla.org/show_bug.cgi?id=1081039 ---> -<head> - <title>Test callbacks for cloned 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=1081039">Bug 1081039</a> -<script> - -SimpleTest.waitForExplicitFinish(); - -// Test to make sure created callback is called on clones that are upgraded and clones -// created after registering the custom element. - -var callbackCalledOnUpgrade = false; -var callbackCalledOnClone = false; - -var foo = document.createElement("x-foo"); -var fooClone = foo.cloneNode(true); - -var p = Object.create(HTMLElement.prototype); -p.createdCallback = function() { - is(this.__proto__, p, "Correct prototype should be set on custom elements."); - - if (this == fooClone) { - // Callback called for the element created before registering the custom element. - // Should be called on element upgrade. - is(callbackCalledOnUpgrade, false, "Upgrade should only be called once per clone."); - callbackCalledOnUpgrade = true; - } else if (this != foo) { - // Callback called for the element created after registering the custom element. - is(callbackCalledOnClone, false, "Upgrade should only be called once per clone."); - callbackCalledOnClone = true; - } - - if (callbackCalledOnUpgrade && callbackCalledOnClone) { - SimpleTest.finish(); - } -}; - -document.registerElement("x-foo", { prototype: p }); - -var anotherFooClone = foo.cloneNode(true); - -SimpleTest.waitForExplicitFinish(); - -</script> -</body> -</html> diff --git a/dom/tests/mochitest/webcomponents/test_custom_element_clone_callbacks_extended.html b/dom/tests/mochitest/webcomponents/test_custom_element_clone_callbacks_extended.html deleted file mode 100644 index b3531b0ea..000000000 --- a/dom/tests/mochitest/webcomponents/test_custom_element_clone_callbacks_extended.html +++ /dev/null @@ -1,40 +0,0 @@ -<!DOCTYPE HTML> -<html> -<!-- -https://bugzilla.mozilla.org/show_bug.cgi?id=1081039 ---> -<head> - <title>Test callbacks for cloned extended 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=1081039">Bug 1081039</a> -<script> - -SimpleTest.waitForExplicitFinish(); - -// Test to make sure created callback is called on clones created after -// registering the custom element. - -var count = 0; -var p = Object.create(HTMLButtonElement.prototype); -p.createdCallback = function() { // should be called by createElement and cloneNode - is(this.__proto__, p, "Correct prototype should be set on custom elements."); - - if (++count == 2) { - SimpleTest.finish(); - } -}; - -document.registerElement("x-foo", { prototype: p, extends: "button" }); -var foo = document.createElement("button", {is: "x-foo"}); -is(foo.getAttribute("is"), "x-foo"); - -var fooClone = foo.cloneNode(true); - -SimpleTest.waitForExplicitFinish(); - -</script> -</body> -</html> diff --git a/dom/tests/mochitest/webcomponents/test_custom_element_htmlconstructor.html b/dom/tests/mochitest/webcomponents/test_custom_element_htmlconstructor.html new file mode 100644 index 000000000..b022a7887 --- /dev/null +++ b/dom/tests/mochitest/webcomponents/test_custom_element_htmlconstructor.html @@ -0,0 +1,42 @@ +<!DOCTYPE HTML> +<html> +<!-- +https://bugzilla.mozilla.org/show_bug.cgi?id=1274159 +--> +<head> + <title>Test HTMLConstructor 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=1274159">Bug 1274159</a> +<script type="text/javascript"> +function test_with_new_window(f) { + return new Promise((aResolve) => { + let iframe = document.createElement('iframe'); + iframe.setAttribute('type', 'content'); + iframe.setAttribute('src', 'dummy_page.html'); + iframe.onload = function() { + f(iframe.contentWindow); + aResolve(); + }; + document.body.appendChild(iframe); + }); +} + +// Fake the Cu.waiveXrays, so that we can share the tests with mochitest chrome. +var Cu = { waiveXrays: (obj) => obj }; +var promises = []; +SimpleTest.waitForExplicitFinish(); +</script> +<!-- Test cases for autonomous element --> +<script type="text/javascript" src="htmlconstructor_autonomous_tests.js"></script> +<!-- Test cases for customized built-in element --> +<script type="text/javascript" src="htmlconstructor_builtin_tests.js"></script> +<script type="text/javascript"> +Promise.all(promises).then(() => { + SimpleTest.finish(); +}); +</script> +</body> +</html> diff --git a/dom/tests/mochitest/webcomponents/test_custom_element_htmlconstructor_chrome.html b/dom/tests/mochitest/webcomponents/test_custom_element_htmlconstructor_chrome.html new file mode 100644 index 000000000..8c7ec0ac6 --- /dev/null +++ b/dom/tests/mochitest/webcomponents/test_custom_element_htmlconstructor_chrome.html @@ -0,0 +1,41 @@ +<!DOCTYPE HTML> +<html> +<!-- +https://bugzilla.mozilla.org/show_bug.cgi?id=1274159 +--> +<head> + <title>Test HTMLConstructor for custom elements.</title> + <script type="text/javascript" src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script> + <link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css" /> +</head> +<body> +<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1274159">Bug 1274159</a> +<script type="text/javascript"> +function test_with_new_window(f) { + return new Promise((aResolve) => { + let iframe = document.createElement('iframe'); + iframe.setAttribute('type', 'content'); + iframe.setAttribute('src', 'http://example.org/tests/dom/tests/mochitest/webcomponents/dummy_page.html'); + iframe.onload = function() { + f(iframe.contentWindow); + aResolve(); + }; + document.body.appendChild(iframe); + }); +} + +var Cu = Components.utils; +var promises = []; +SimpleTest.waitForExplicitFinish(); +</script> +<!-- Test cases for autonomous element --> +<script type="text/javascript" src="htmlconstructor_autonomous_tests.js"></script> +<!-- Test cases for customized built-in element --> +<script type="text/javascript" src="htmlconstructor_builtin_tests.js"></script> +<script type="text/javascript"> +Promise.all(promises).then(() => { + SimpleTest.finish(); +}); +</script> +</body> +</html> diff --git a/dom/tests/mochitest/webcomponents/test_custom_element_import_node_created_callback.html b/dom/tests/mochitest/webcomponents/test_custom_element_import_node_created_callback.html deleted file mode 100644 index f533b507c..000000000 --- a/dom/tests/mochitest/webcomponents/test_custom_element_import_node_created_callback.html +++ /dev/null @@ -1,34 +0,0 @@ -<!DOCTYPE HTML> -<html> -<!-- -https://bugzilla.mozilla.org/show_bug.cgi?id=1093680 ---> -<head> - <title>Test created callback order for imported custom 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> -<template id="template"><x-foo><span></span></x-foo></template> -<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1093680">Bug 1093680</a> -<script> - -var fooProtoCreatedCallbackCalled = false; -var fooProto = Object.create(HTMLElement.prototype); -fooProto.createdCallback = function() { - ok(this.firstElementChild, "When the created callback is called, the element should already have a child because the callback should only be called after cloning all the contents."); - fooProtoCreatedCallbackCalled = true; -}; - -document.registerElement("x-foo", { prototype: fooProto }); - -var template = document.getElementById("template"); - -// Importing node will implicityly clone the conent in the main document. -var adoptedFoo = document.importNode(template.content, true); - -ok(fooProtoCreatedCallbackCalled, "Created callback should be called after importing custom element into document"); - -</script> -</body> -</html> 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 a349f4aa5..000000000 --- a/dom/tests/mochitest/webcomponents/test_custom_element_register_invalid_callbacks.html +++ /dev/null @@ -1,72 +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. -[ - 'createdCallback', - 'attachedCallback', - 'detachedCallback', - '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_custom_element_throw_on_dynamic_markup_insertion.html b/dom/tests/mochitest/webcomponents/test_custom_element_throw_on_dynamic_markup_insertion.html new file mode 100644 index 000000000..b5ef66860 --- /dev/null +++ b/dom/tests/mochitest/webcomponents/test_custom_element_throw_on_dynamic_markup_insertion.html @@ -0,0 +1,66 @@ +<!DOCTYPE HTML> +<html> +<!-- +https://bugzilla.mozilla.org/show_bug.cgi?id=1378079 +--> +<head> + <title>Test throw on dynamic markup insertion when creating element synchronously from parser</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=1378079">Bug 1378079</a> +<div id="container"></div> + +<script> + +class DoDocumentOpenInCtor extends HTMLElement { + constructor() { + super(); + document.open(); + } +}; +customElements.define('x-document-open-in-ctor', DoDocumentOpenInCtor); + +class DoDocumentWriteInCtor extends HTMLElement { + constructor() { + super(); + document.write('<div>This should not be shown</div>'); + } +}; +customElements.define('x-document-write-in-ctor', DoDocumentWriteInCtor); + +class DoDocumentCloseInCtor extends HTMLElement { + constructor() { + super(); + document.close(); + } +}; +customElements.define('x-document-close-in-ctor', DoDocumentCloseInCtor); + +window.errors = []; +window.onerror = function(message, url, lineNumber, columnNumber, error) { + errors.push(error.name); + return true; +} +var expectedErrorCount = 0; + +document.write("<x-document-open-in-ctor></x-document-open-in-ctor>"); +expectedErrorCount++; +is(window.errors.length, expectedErrorCount, "expectedErrorCount should be " + expectedErrorCount); +is(window.errors[expectedErrorCount - 1], 'InvalidStateError', "Error name should be 'InvalidStateError'"); + +document.write("<x-document-write-in-ctor></x-document-write-in-ctor>"); +expectedErrorCount++; +is(window.errors.length, expectedErrorCount, "expectedErrorCount should be " + expectedErrorCount); +is(window.errors[expectedErrorCount - 1], 'InvalidStateError', "Error name should be 'InvalidStateError'"); + +document.write("<x-document-close-in-ctor></x-document-close-in-ctor>"); +expectedErrorCount++; +is(window.errors.length, expectedErrorCount, "expectedErrorCount should be " + expectedErrorCount); +is(window.errors[expectedErrorCount - 1], 'InvalidStateError', "Error name should be 'InvalidStateError'"); + +</script> + +</body> +</html> diff --git a/dom/tests/mochitest/webcomponents/test_custom_element_uncatchable_exception.html b/dom/tests/mochitest/webcomponents/test_custom_element_uncatchable_exception.html new file mode 100644 index 000000000..f60bf1674 --- /dev/null +++ b/dom/tests/mochitest/webcomponents/test_custom_element_uncatchable_exception.html @@ -0,0 +1,37 @@ +<!DOCTYPE HTML> +<html> +<!-- +https://bugzilla.mozilla.org/show_bug.cgi?id=1407669 +--> +<head> + <title>Test custom elements runtime exception</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=1407669">Bug 1407669</a> +<script type="text/javascript"> + +SimpleTest.waitForExplicitFinish(); +SpecialPowers.pushPrefEnv({set: [['dom.expose_test_interfaces', true]]}, function() { + window.onerror = function (e) { + ok(false, "How did we get here!?"); + } + + class Foo extends HTMLElement { + constructor() { + super() + TestFunctions.throwUncatchableException(); + } + } + + customElements.define("test-custom-element", Foo); + let element = document.createElement("test-custom-element"); + is(element instanceof HTMLUnknownElement, true, "It should be a HTMLUnknownElement when uncatchable exception throws in constructor"); + ok(true, "Uncatchable exception should not report"); + SimpleTest.finish(); +}); + +</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.html b/dom/tests/mochitest/webcomponents/test_document_register.html index a9c194b60..aa80fef5f 100644 --- a/dom/tests/mochitest/webcomponents/test_document_register.html +++ b/dom/tests/mochitest/webcomponents/test_document_register.html @@ -103,52 +103,12 @@ function startTest() { is(extendedButton.getAttribute("is"), "x-extended-button", "The |is| attribute of the created element should be the extended type."); is(extendedButton.type, "submit", "Created element should be a button with type of \"submit\""); - // document.createElementNS with different namespace than definition. - try { - var svgButton = document.createElementNS("http://www.w3.org/2000/svg", "button", {is: "x-extended-button"}); - ok(false, "An exception should've been thrown"); - } catch(err) { - is(err.name, "NotFoundError", "A NotFoundError exception should've been thrown"); - } - - // document.createElementNS with no namespace. - try { - var noNamespaceButton = document.createElementNS("", "button", {is: "x-extended-button"}); - ok(false, "An exception should've been thrown"); - } catch(err) { - is(err.name, "NotFoundError", "A NotFoundError exception should've been thrown"); - } - - // document.createElement with non-existant extended type. - try { - var normalButton = document.createElement("button", {is: "x-non-existant"}); - ok(false, "An exception should've been thrown"); - } catch(err) { - is(err.name, "NotFoundError", "A NotFoundError exception should've been thrown"); - } - - // document.createElement with exteneded type that does not match with local name of element. - try { - var normalDiv = document.createElement("div", {is: "x-extended-button"}); - ok(false, "An exception should've been thrown"); - } catch(err) { - is(err.name, "NotFoundError", "A NotFoundError exception should've been thrown"); - } - // Custom element constructor. var constructedButton = new buttonConstructor(); is(constructedButton.tagName, "BUTTON", "Created element should have local name of BUTTON"); is(constructedButton.__proto__, extendedProto, "Created element should have the prototype of the extended type."); is(constructedButton.getAttribute("is"), "x-extended-button", "The |is| attribute of the created element should be the extended type."); - // document.createElement with different namespace than definition for extended element. - try { - var htmlText = document.createElement("text", {is: "x-extended-text"}); - ok(false, "An exception should've been thrown"); - } catch(err) { - is(err.name, "NotFoundError", "A NotFoundError exception should've been thrown"); - } - // Try creating an element with a custom element name, but not in the html namespace. var htmlNamespaceProto = Object.create(HTMLElement.prototype); document.registerElement("x-in-html-namespace", { prototype: htmlNamespaceProto }); diff --git a/dom/tests/mochitest/webcomponents/test_document_register_base_queue.html b/dom/tests/mochitest/webcomponents/test_document_register_base_queue.html deleted file mode 100644 index c839857b4..000000000 --- a/dom/tests/mochitest/webcomponents/test_document_register_base_queue.html +++ /dev/null @@ -1,48 +0,0 @@ -<!DOCTYPE HTML> -<html> -<!-- -https://bugzilla.mozilla.org/show_bug.cgi?id=783129 ---> -<head> - <title>Test for document.registerElement lifecycle callback</title> - <script type="text/javascript" src="/tests/SimpleTest/SimpleTest.js"></script> -<link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" /> -<script> -var p = Object.create(HTMLElement.prototype); - -var createdCallbackCallCount = 0; - -// By the time the base element queue is processed via the microtask, -// both x-hello elements should be in the document. -p.createdCallback = function() { - var one = document.getElementById("one"); - var two = document.getElementById("two"); - isnot(one, null, "First x-hello element should be in the tree."); - isnot(two, null, "Second x-hello element should be in the tree."); - createdCallbackCallCount++; - if (createdCallbackCallCount == 2) { - SimpleTest.finish(); - } - - if (createdCallbackCallCount > 2) { - ok(false, "Created callback called too much."); - } -}; - -p.attributeChangedCallback = function(name, oldValue, newValue) { - ok(false, "Attribute changed callback should not be called because callbacks should not be queued until created callback invoked."); -}; - -document.registerElement("x-hello", { prototype: p }); - -SimpleTest.waitForExplicitFinish(); -</script> -</head> -<body> -<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=783129">Bug 783129</a> -<x-hello id="one"></x-hello> -<x-hello id="two"></x-hello> -<script> -</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 bc4cdcbac..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.createdCallback = 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.createdCallback = 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_register_stack.html b/dom/tests/mochitest/webcomponents/test_document_register_stack.html index 34f108654..b1c61af11 100644 --- a/dom/tests/mochitest/webcomponents/test_document_register_stack.html +++ b/dom/tests/mochitest/webcomponents/test_document_register_stack.html @@ -28,7 +28,8 @@ function testChangeAttributeInCreatedCallback() { createdCallbackCalled = true; is(attributeChangedCallbackCalled, false, "Attribute changed callback should not have been called prior to setting the attribute."); this.setAttribute("foo", "bar"); - is(attributeChangedCallbackCalled, false, "While element is being created, element should not be added to the current element callback queue."); + is(attributeChangedCallbackCalled, true, "While element is being created, element should be added to the current element callback queue."); + runNextTest(); }; p.attributeChangedCallback = function(name, oldValue, newValue) { @@ -36,7 +37,6 @@ function testChangeAttributeInCreatedCallback() { is(attributeChangedCallbackCalled, false, "attributeChanged callback should only be called once in this tests."); is(newValue, "bar", "The new value should be 'bar'"); attributeChangedCallbackCalled = true; - runNextTest(); }; document.registerElement("x-one", { prototype: p }); 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 76c2ea8ec..000000000 --- a/dom/tests/mochitest/webcomponents/test_document_shared_registry.html +++ /dev/null @@ -1,79 +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 createdCallbackFromMainDoc() { - var createdCallbackCalled = false; - var assocDoc = document.implementation.createHTMLDocument(); - - var proto = Object.create(HTMLElement.prototype); - proto.createdCallback = function() { - is(createdCallbackCalled, false, "created callback should only be called once in this tests."); - createdCallbackCalled = true; - runNextTest(); - }; - - assocDoc.registerElement("x-associated-doc-callback-elem", { prototype: proto }); - document.createElement("x-associated-doc-callback-elem"); -} - -function createdCallbackFromDocHTMLNamespace() { - var createdCallbackCalled = false; - var assocDoc = document.implementation.createDocument("http://www.w3.org/1999/xhtml", "html", null); - var somediv = assocDoc.createElement("div"); - - var proto = Object.create(HTMLElement.prototype); - proto.createdCallback = function() { - is(createdCallbackCalled, false, "created callback should only be called once in this tests."); - createdCallbackCalled = true; - runNextTest(); - }; - - assocDoc.registerElement("x-assoc-doc-with-ns-callback-elem", { prototype: proto }); - document.createElement("x-assoc-doc-with-ns-callback-elem"); -} - -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 = [ - createdCallbackFromMainDoc, - createdCallbackFromDocHTMLNamespace, - 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> diff --git a/dom/tests/moz.build b/dom/tests/moz.build index f7c3e2437..340157416 100644 --- a/dom/tests/moz.build +++ b/dom/tests/moz.build @@ -1,5 +1,4 @@ # -*- Mode: python; indent-tabs-mode: nil; tab-width: 40 -*- -# vim: set filetype=python: # This Source Code Form is subject to the terms of the Mozilla Public # License, v. 2.0. If a copy of the MPL was not distributed with this # file, You can obtain one at http://mozilla.org/MPL/2.0/. @@ -37,6 +36,7 @@ MOCHITEST_CHROME_MANIFESTS += [ 'mochitest/geolocation/chrome.ini', 'mochitest/localstorage/chrome.ini', 'mochitest/sessionstorage/chrome.ini', + 'mochitest/webcomponents/chrome.ini', 'mochitest/whatwg/chrome.ini', ] |