| author | Emilio Cobos Álvarez <emilio@crisal.io> |
| Thu, 12 Apr 2018 22:35:45 +0200 | |
| changeset 413243 | b2dd9ca61e0b92b6a0da66d86de4ab4f87cd8e19 |
| parent 413242 | aaf792407dbb16e2c9865f1d585bc2e4c4951aa5 |
| child 413244 | 6090c4592979ab835f1a8df329f550d65a7cf1d6 |
| child 413314 | 1b2faff1e6e0eb75b81d58c6b736946fefec505c |
| push id | 62650 |
| push user | ecoal95@gmail.com |
| push date | Fri, 13 Apr 2018 18:52:11 +0000 |
| treeherder | autoland@b2dd9ca61e0b [default view] [failures only] |
| perfherder | [talos] [build metrics] [platform microbench] (compared to previous push) |
| reviewers | smaug |
| bugs | 1453789 |
| milestone | 61.0a1 |
| first release with | nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
|
| last release without | nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
|
--- a/devtools/client/inspector/markup/test/doc_markup_anonymous.html +++ b/devtools/client/inspector/markup/test/doc_markup_anonymous.html @@ -20,15 +20,13 @@ <div id="shadow">light dom</div> <div id="native"><video controls></video></div> <script> "use strict"; var host = document.querySelector("#shadow"); - if (host.createShadowRoot) { - var root = host.createShadowRoot(); - root.innerHTML = "<h3>Shadow DOM</h3><select multiple></select>"; - } + var root = host.attachShadow({ mode: "open" }); + root.innerHTML = "<h3>Shadow DOM</h3><select multiple></select>"; </script> </body> </html>
--- a/devtools/server/tests/mochitest/inspector-traversal-data.html +++ b/devtools/server/tests/mochitest/inspector-traversal-data.html @@ -18,18 +18,18 @@ } </style> <script type="text/javascript"> "use strict"; window.onload = function() { // Set up a basic shadow DOM let host = document.querySelector("#shadow"); - if (host.createShadowRoot) { - let root = host.createShadowRoot(); + if (host.attachShadow) { + let root = host.attachShadow({ mode: "open" }); let h3 = document.createElement("h3"); h3.append("Shadow "); let em = document.createElement("em"); em.append("DOM"); let select = document.createElement("select");
--- a/dom/base/Element.cpp +++ b/dom/base/Element.cpp @@ -1214,28 +1214,16 @@ Element::AttachShadow(const ShadowRootIn nameAtom == nsGkAtoms::nav || nameAtom == nsGkAtoms::p || nameAtom == nsGkAtoms::section || nameAtom == nsGkAtoms::span)) { aError.Throw(NS_ERROR_DOM_NOT_SUPPORTED_ERR); return nullptr; } - return AttachShadowInternal(aInit.mMode, aError); -} - -already_AddRefed<ShadowRoot> -Element::CreateShadowRoot(ErrorResult& aError) -{ - return AttachShadowInternal(ShadowRootMode::Open, aError); -} - -already_AddRefed<ShadowRoot> -Element::AttachShadowInternal(ShadowRootMode aMode, ErrorResult& aError) -{ /** * 3. If context object is a shadow host, then throw * an "InvalidStateError" DOMException. */ if (GetShadowRoot() || GetXBLBinding()) { aError.Throw(NS_ERROR_DOM_INVALID_STATE_ERR); return nullptr; } @@ -1255,17 +1243,17 @@ Element::AttachShadowInternal(ShadowRoot MOZ_ASSERT(!GetPrimaryFrame()); /** * 4. Let shadow be a new shadow root whose node document is * context object’s node document, host is context object, * and mode is init’s mode. */ RefPtr<ShadowRoot> shadowRoot = - new ShadowRoot(this, aMode, nodeInfo.forget()); + new ShadowRoot(this, aInit.mMode, nodeInfo.forget()); shadowRoot->SetIsComposedDocParticipant(IsInComposedDoc()); /** * 5. Set context object’s shadow root to shadow. */ SetShadowRoot(shadowRoot);
--- a/dom/base/Element.h +++ b/dom/base/Element.h @@ -1258,19 +1258,16 @@ public: // Shadow DOM v1 already_AddRefed<ShadowRoot> AttachShadow(const ShadowRootInit& aInit, ErrorResult& aError); ShadowRoot* GetShadowRootByMode() const; void SetSlot(const nsAString& aName, ErrorResult& aError); void GetSlot(nsAString& aName); - // [deprecated] Shadow DOM v0 - already_AddRefed<ShadowRoot> CreateShadowRoot(ErrorResult& aError); - ShadowRoot* GetShadowRoot() const { const nsExtendedDOMSlots* slots = GetExistingExtendedDOMSlots(); return slots ? slots->mShadowRoot.get() : nullptr; } private: void ScrollIntoView(const ScrollIntoViewOptions &aOptions);
--- a/dom/base/crashtests/1024428-1.html +++ b/dom/base/crashtests/1024428-1.html @@ -1,12 +1,11 @@ <!DOCTYPE html> <html> <head> </head> <body> <div id="host"></div> <script> -var s = host.createShadowRoot(); -s.innerHTML = '<input type="range" />'; + host.attachShadow({ mode: "open" }).innerHTML = '<input type="range" />'; </script> </body> </html>
--- a/dom/base/crashtests/1029710.html +++ b/dom/base/crashtests/1029710.html @@ -1,11 +1,11 @@ <!DOCTYPE html> <html> <body> <script> var x = document.createElement('span'); - x.createShadowRoot(); + x.attachShadow({ mode: "open" }); x.id = 'a'; </script> </body> </html>
deleted file mode 100644 --- a/dom/base/crashtests/1118764.html +++ /dev/null @@ -1,33 +0,0 @@ -<!DOCTYPE html> -<html> -<body> -<style> -#foo { - overflow: scroll; - height: 100px; -} -</style> -<div id="foo"> -Mozilla Firefox<br> -Mozilla Firefox<br> -Mozilla Firefox<br> -Mozilla Firefox<br> -Mozilla Firefox<br> -Mozilla Firefox<br> -Mozilla Firefox<br> -Mozilla Firefox<br> -Mozilla Firefox<br> -Mozilla Firefox<br> -Mozilla Firefox<br> -Mozilla Firefox<br> -Mozilla Firefox<br> -Mozilla Firefox<br> -Mozilla Firefox<br> -Mozilla Firefox<br> -Mozilla Firefox<br> -Mozilla Firefox<br> -<script> -foo.createShadowRoot().innerHTML = "<content></content>"; -</script> -</body> -</html>
--- a/dom/base/crashtests/1281715.html +++ b/dom/base/crashtests/1281715.html @@ -6,19 +6,19 @@ html { color: orange; } </style> <script> function boom() { - document.documentElement.offsetHeight; - document.getElementById("hostW").createShadowRoot().innerHTML = '<z></z>'; - document.getElementsByTagName("style")[0].remove(); + document.documentElement.offsetHeight; + document.getElementById("hostW").attachShadow({ mode: "open" }).innerHTML = '<z></z>'; + document.getElementsByTagName("style")[0].remove(); } </script> </head> <body onload="boom();"><div style="display: contents;" id="hostW"></div></body> </html>
--- a/dom/base/crashtests/1324463.html +++ b/dom/base/crashtests/1324463.html @@ -1,14 +1,14 @@ <!DOCTYPE html> <html> <script> // requires: user_pref("dom.webcomponents.shadowdom.enabled", true); addEventListener("DOMContentLoaded", function(){ - let o_0 = document.createElement("span").createShadowRoot(); + let o_0 = document.createElement("span").attachShadow({ mode: "open" }); let o_1 = document.createElementNS("http://www.mozilla.org/xbl", "binding"); let o_2 = document.createElementNS("http://www.mozilla.org/xbl", "children"); let o_3 = document.createTextNode(""); o_0.appendChild(o_1); o_1.appendChild(o_2); o_2.appendChild(o_3); o_2.removeChild(o_3); });
--- a/dom/base/test/test_mutationobservers.html +++ b/dom/base/test/test_mutationobservers.html @@ -585,35 +585,35 @@ function testExpandos() { SpecialPowers.gc(); SpecialPowers.gc(); SpecialPowers.gc(); } div.setAttribute("foo", "bar2"); } function testOutsideShadowDOM() { - if (!div.createShadowRoot) { + if (!div.attachShadow) { todo(false, "Skipping testOutsideShadowDOM and testInsideShadowDOM " + - "because createShadowRoot is not supported"); + "because attachShadow is not supported"); then(testMarquee); return; } var m = new M(function(records, observer) { is(records.length, 1); is(records[0].type, "attributes", "Should have got attributes"); observer.disconnect(); then(testMarquee); }); m.observe(div, { attributes: true, childList: true, characterData: true, subtree: true }) - var sr = div.createShadowRoot(); + var sr = div.attachShadow({ mode: "open" }); sr.innerHTML = "<div" + ">text</" + "div>"; sr.firstChild.setAttribute("foo", "bar"); sr.firstChild.firstChild.data = "text2"; sr.firstChild.appendChild(document.createElement("div")); div.setAttribute("foo", "bar"); } function testMarquee() {
deleted file mode 100644 --- a/dom/tests/mochitest/webcomponents/test_shadow_element.html +++ /dev/null @@ -1,173 +0,0 @@ -<!DOCTYPE HTML> -<html> -<!-- -https://bugzilla.mozilla.org/show_bug.cgi?id=887538 ---> -<head> - <title>Test for HTMLShadowElement</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=887538">Bug 887538</a> -<script> -var host = document.createElement("span"); - -// Create three shadow roots on a single host and make sure that shadow elements -// are associated with the correct shadow root. -var firstShadow = host.createShadowRoot(); -firstShadow.innerHTML = '<shadow id="shadowone"></shadow>'; -var secondShadow = host.createShadowRoot(); -secondShadow.innerHTML = '<shadow id="shadowtwo"></shadow>'; -var thirdShadow = host.createShadowRoot(); -thirdShadow.innerHTML = '<shadow id="shadowthree"></shadow>'; - -is(firstShadow.getElementById("shadowone").olderShadowRoot, null, "Shadow element in oldest ShadowRoot should not be associated with a ShadowRoot."); -is(secondShadow.getElementById("shadowtwo").olderShadowRoot, firstShadow, "Shadow element should be associated with older ShadowRoot."); -is(thirdShadow.getElementById("shadowthree").olderShadowRoot, secondShadow, "Shadow element should be associated with older ShadowRoot."); - -// Only the first ShadowRoot in tree order is an insertion point. -host = document.createElement("span"); -firstShadow = host.createShadowRoot(); -secondShadow = host.createShadowRoot(); -secondShadow.innerHTML = '<shadow id="shadowone"></shadow><shadow id="shadowtwo"></shadow>'; -var shadowElemOne = secondShadow.getElementById("shadowone"); -var shadowElemTwo = secondShadow.getElementById("shadowtwo"); - -is(shadowElemOne.olderShadowRoot, firstShadow, "First <shadow> in tree order should be an insertion point."); -is(shadowElemTwo.olderShadowRoot, null, "Second <shadow> in tree order should not be an insertion point."); - -// Remove the first <shadow> element and make sure the second <shadow> element becomes an insertion point. -secondShadow.removeChild(shadowElemOne); -is(shadowElemOne.olderShadowRoot, null, "<shadow> element not in a ShadowRoot is not an insertion point."); -is(shadowElemTwo.olderShadowRoot, firstShadow, "Second <shadow> element should become insertion point after first is removed."); - -// Insert a <shadow> element before the current shadow insertion point and make sure that it becomes an insertion point. -secondShadow.insertBefore(shadowElemOne, shadowElemTwo); -is(shadowElemOne.olderShadowRoot, firstShadow, "<shadow> element inserted as first in tree order should become an insertion point."); -is(shadowElemTwo.olderShadowRoot, null, "<shadow> element should no longer be an insertion point it another is inserted before."); - -// <shadow> element in fallback content is not an insertion point. -host = document.createElement("span"); -firstShadow = host.createShadowRoot(); -secondShadow = host.createShadowRoot(); -secondShadow.innerHTML = '<content><shadow id="shadowone"></shadow></content><shadow id="shadowtwo"></shadow>'; -shadowElemOne = secondShadow.getElementById("shadowone"); -shadowElemTwo = secondShadow.getElementById("shadowtwo"); - -is(shadowElemOne.olderShadowRoot, null, "<shadow> element in fallback content is not an insertion point."); -is(shadowElemTwo.olderShadowRoot, null, "<shadow> element preceeded by another <shadow> element is not an insertion point."); - -// <shadow> element that is descendant of shadow element is not an insertion point. -host = document.createElement("span"); -firstShadow = host.createShadowRoot(); -secondShadow = host.createShadowRoot(); -secondShadow.innerHTML = '<shadow><shadow id="shadowone"></shadow></shadow>'; -shadowElemOne = secondShadow.getElementById("shadowone"); -is(shadowElemOne.olderShadowRoot, null, "<shadow> element that is descendant of shadow element is not an insertion point."); - -// Check projection of <content> elements through <shadow> elements. -host = document.createElement("span"); -firstShadow = host.createShadowRoot(); -secondShadow = host.createShadowRoot(); -firstShadow.innerHTML = '<content id="firstcontent"></content>'; -secondShadow.innerHTML = '<shadow><span id="one"></span><content id="secondcontent"></content><span id="four"></span></shadow>'; -host.innerHTML = '<span id="two"></span><span id="three"></span>'; -var firstContent = firstShadow.getElementById("firstcontent"); -var secondContent = secondShadow.getElementById("secondcontent"); -var firstDistNodes = firstContent.getDistributedNodes(); -var secondDistNodes = secondContent.getDistributedNodes(); - -is(secondDistNodes.length, 2, "There should be two distributed nodes from the host."); -ok(secondDistNodes[0].id == "two" && - secondDistNodes[1].id == "three", "Nodes projected from host should preserve order."); - -is(firstDistNodes.length, 4, "There should be four distributed nodes, two from the first shadow, two from the second shadow."); -ok(firstDistNodes[0].id == "one" && - firstDistNodes[1].id == "two" && - firstDistNodes[2].id == "three" && - firstDistNodes[3].id == "four", "Reprojection through shadow should preserve node order."); - -// Remove a node from the host and make sure that it is removed from all insertion points. -host.firstChild.remove(); -firstDistNodes = firstContent.getDistributedNodes(); -secondDistNodes = secondContent.getDistributedNodes(); - -is(secondDistNodes.length, 1, "There should be one distriubted node remaining after removing node from host."); -ok(secondDistNodes[0].id == "three", "Span with id=two should have been removed from content element."); -is(firstDistNodes.length, 3, "There should be three distributed nodes remaining after removing node from host."); -ok(firstDistNodes[0].id == "one" && - firstDistNodes[1].id == "three" && - firstDistNodes[2].id == "four", "Reprojection through shadow should preserve node order."); - -// Check projection of <shadow> elements to <content> elements. -host = document.createElement("span"); -firstShadow = host.createShadowRoot(); -secondShadow = host.createShadowRoot(); -secondShadow.innerHTML = '<span id="firstspan"><shadow></shadow></span>'; -thirdShadow = secondShadow.getElementById("firstspan").createShadowRoot(); -thirdShadow.innerHTML = '<content id="firstcontent"></content>'; -firstContent = thirdShadow.getElementById("firstcontent"); -var shadowChild = document.createElement("span"); -firstShadow.appendChild(shadowChild); - -is(firstContent.getDistributedNodes()[0], shadowChild, "Elements in shadow insertioin point should be projected into content insertion points."); - -// Remove child of ShadowRoot and check that projected node is removed from insertion point. -firstShadow.firstChild.remove(); - -is(firstContent.getDistributedNodes().length, 0, "Reprojected element was removed from ShadowRoot, thus it should be removed from content insertion point."); - -// Check deeply nested projection of <shadow> elements. -host = document.createElement("span"); -firstShadow = host.createShadowRoot(); -firstShadow.innerHTML = '<content></content>'; -secondShadow = host.createShadowRoot(); -secondShadow.innerHTML = '<shadow><content></content></shadow>'; -thirdShadow = host.createShadowRoot(); -thirdShadow.innerHTML = '<span id="firstspan"><shadow><content></content></shadow></span>'; -var fourthShadow = thirdShadow.getElementById("firstspan").createShadowRoot(); -fourthShadow.innerHTML = '<content id="firstcontent"></content>'; -firstContent = fourthShadow.getElementById("firstcontent"); -host.innerHTML = '<span></span>'; - -is(firstContent.getDistributedNodes()[0], host.firstChild, "Child of host should be projected to insertion point."); - -// Remove node and make sure that it is removed from distributed nodes. -host.firstChild.remove(); - -is(firstContent.getDistributedNodes().length, 0, "Node removed from host should be removed from insertion point."); - -// Check projection of fallback content through <shadow> elements. -host = document.createElement("span"); -firstShadow = host.createShadowRoot(); -firstShadow.innerHTML = '<content><span id="firstspan"></span></content>'; -secondShadow = host.createShadowRoot(); -secondShadow.innerHTML = '<span id="secondspan"><shadow id="firstshadow"></shadow></span>'; -firstShadowElem = secondShadow.getElementById("firstshadow"); -thirdShadow = secondShadow.getElementById("secondspan").createShadowRoot(); -thirdShadow.innerHTML = '<content id="firstcontent"></content>'; -firstContent = thirdShadow.getElementById("firstcontent"); - -is(firstContent.getDistributedNodes().length, 1, "There should be one node distributed from fallback content."); -is(firstContent.getDistributedNodes()[0], firstShadow.getElementById("firstspan"), "Fallback content should be distributed."); - -// Add some content to the host (causing the fallback content to be dropped) and make sure distribution nodes are updated. - -var newElem = document.createElement("div"); -firstShadowElem.appendChild(newElem); - -is(firstContent.getDistributedNodes().length, 1, "There should be one node distributed from the host."); -is(firstContent.getDistributedNodes()[0], newElem, "Distributed node should be from host, not fallback content."); - -// Remove the distribution node and check that fallback content is used. -firstShadowElem.removeChild(newElem); - -is(firstContent.getDistributedNodes().length, 1, "There should be one node distributed from fallback content."); -is(firstContent.getDistributedNodes()[0], firstShadow.getElementById("firstspan"), "Fallback content should be distributed after removing node from host."); - -</script> -</body> -</html> -
--- a/dom/webidl/Element.webidl +++ b/dom/webidl/Element.webidl @@ -271,20 +271,16 @@ partial interface Element { [ChromeOnly, Func="nsDocument::IsShadowDOMEnabled", BinaryName="shadowRoot"] readonly attribute ShadowRoot? openOrClosedShadowRoot; [BinaryName="assignedSlotByMode", Func="nsDocument::IsShadowDOMEnabled"] readonly attribute HTMLSlotElement? assignedSlot; [CEReactions, Unscopable, SetterThrows, Func="nsDocument::IsShadowDOMEnabled"] attribute DOMString slot; - - // [deprecated] Shadow DOM v0 - [Throws, Func="nsDocument::IsShadowDOMEnabled"] - ShadowRoot createShadowRoot(); }; Element implements ChildNode; Element implements NonDocumentTypeChildNode; Element implements ParentNode; Element implements Animatable; Element implements GeometryUtils;
--- a/layout/base/crashtests/1261351-iframe.html +++ b/layout/base/crashtests/1261351-iframe.html @@ -5,17 +5,17 @@ (function () { class UiComponentTest extends HTMLDivElement { constructor() { super(); this.template = `<style></style>`; } connectedCallback() { - let shadow = this.createShadowRoot(); + let shadow = this.attachShadow({ mode: "open" }); if (this.template) { let te = document.createElement('template'); te.innerHTML = this.template; shadow.appendChild(document.importNode(te.content, true)); } } };
deleted file mode 100644 --- a/layout/base/crashtests/1404789-1.html +++ /dev/null @@ -1,16 +0,0 @@ -<!doctype html> -<script> - // Test for content redistribution outside of the document. - // Passes if it doesn't assert. - let host = document.createElement('div'); - host.innerHTML = "<div id='foo'></div>"; - - let shadowRoot = host.createShadowRoot(); - shadowRoot.innerHTML = "<content select='#foo'></content>"; - - host.firstElementChild.removeAttribute('id'); - - // Move to the document, do the same. - document.documentElement.appendChild(host); - host.firstElementChild.setAttribute('id', 'foo'); -</script>
deleted file mode 100644 --- a/layout/base/crashtests/1409088.html +++ /dev/null @@ -1,16 +0,0 @@ -<!doctype html> -<div></div> -<script> -let host = document.querySelector('div'); -let shadow = host.createShadowRoot(); - -// Append two divs and three spans into host. -host.innerHTML = '<div></div><span></span><div></div><span></span><span></span>'; -shadow.innerHTML = '<content select="div" id="divpoint"></content><content select="div, span" id="allpoint"></content>'; - -let divPoint = shadow.getElementById("divpoint"); -let allPoint = shadow.getElementById("allpoint"); - -shadow.removeChild(allPoint); -shadow.insertBefore(allPoint, divPoint); -</script>
--- a/layout/base/crashtests/crashtests.list +++ b/layout/base/crashtests/crashtests.list @@ -503,20 +503,18 @@ load 1397398-1.html load 1397398-2.html load 1397398-3.html load 1398500.html load 1400438-1.html load 1400599-1.html load 1401739.html load 1401840.html load 1402476.html -load 1404789-1.html load 1404789-2.html load 1406562.html -load 1409088.html load 1409147.html load 1411138.html load 1419762.html load 1420533.html load 1425959.html load 1425893.html load 1428353.html pref(dom.webcomponents.shadowdom.enabled,true) load 1429088.html
--- a/layout/generic/crashtests/1059138-1.html +++ b/layout/generic/crashtests/1059138-1.html @@ -3,30 +3,30 @@ <head> <meta charset="UTF-8"> <title>Testcase for bug 1059138</title> <template> <div class="inner" style="border: 1px solid black; display:flex; width: 500px;"> <button class="action-button"> ThisIsAButton </button> - <content></content> + <slot></slot> </div> </template> <script> // Gets content from <template> var template = document.querySelector('template').content; // Creates an object based in the HTML Element prototype class MyElement extends HTMLElement { // Fires when an instance of the element is connected connectedCallback() { // Creates the shadow root - var shadowRoot = this.createShadowRoot(); + var shadowRoot = this.attachShadow({ mode: "open" }); // Adds a template clone into shadow root var clone = document.importNode(template, true); shadowRoot.appendChild(clone); } }; // Registers <my-elem> in the main document customElements.define('my-elem', MyElement);
--- a/layout/reftests/bugs/1066554-1.html +++ b/layout/reftests/bugs/1066554-1.html @@ -2,25 +2,23 @@ <html class="reftest-wait"> <meta charset="utf-8"> <title>Test for bug 1066554 - Shadow DOM loads SVG stylesheets as needed</title> <body> <div id="x"></div> <script> function insertShadowSVG() { var x = document.getElementById("x"); - if (x.createShadowRoot) { - x.createShadowRoot(); - x.shadowRoot.innerHTML = - '<svg width="50px" height="10px"> \ - <switch> \ - <foreignObject width="50px" height="50px"> \ - <div style="width: 100px; height: 10px; background: red;"></div> \ - </foreignObject> \ - </switch> \ - </svg>'; - } + x.attachShadow({ mode: "open" }); + x.shadowRoot.innerHTML = + '<svg width="50px" height="10px"> \ + <switch> \ + <foreignObject width="50px" height="50px"> \ + <div style="width: 100px; height: 10px; background: red;"></div> \ + </foreignObject> \ + </switch> \ + </svg>'; document.documentElement.removeAttribute("class"); } window.addEventListener("MozReftestInvalidate", insertShadowSVG); </script> </body> </html>
deleted file mode 100644 --- a/layout/reftests/css-display/display-contents-shadow-dom-1.html +++ /dev/null @@ -1,231 +0,0 @@ -<!DOCTYPE html> -<!-- - Any copyright is dedicated to the Public Domain. - http://creativecommons.org/publicdomain/zero/1.0/ ---> -<html class="reftest-wait" lang="en-US"> - <head> - <title>CSS Test: CSS display:contents; in Shadow DOM</title> - <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=907396"> - <link rel="help" href="http://dev.w3.org/csswg/css-display"> -<style> -html,body { - color:black; background-color:white; font-size:16px; padding:0; margin:0; -} -.before::before {content: "a ";} -.after::after {content: " c";} -div.before::before {content: "X ";} -div.after::after {content: " Y";} -.b,.c { display:contents; } -</style> - </head> - <body> - <div id="host1" class="before"></div> - <span id="host2"></span> - <div id="host3" class="after"></div> - <div id="host4" class="before after"></div> - <div id="host5" class="after"></div> - <div id="host6" class="before"></div> - <div id="host7"></div> - <div id="host8" class="after"></div> - <div id="host9" class="before after"></div> - <div id="hostA" class="after"></div> - <div id="hostB"></div> - <div id="hostC"></div> - <div id="hostD"></div> - <div id="hostE"></div> - <div id="hostF" class="before"></div> - <div id="hostG"></div> - <span id="hostH"></span> - <div id="hostI"></div> - <div id="hostJ"></div> - <span id="hostK"></span> - <div id="hostL"></div> - <div id="hostM"><i>Two</i><b>One</b></div> - <div id="hostN"><i class="c">Two</i><b>One</b></div> - <div id="hostO"><i>Two</i><b class="c">One</b></div> - <div id="hostP"><i class="c">Two</i><b class="c">One</b></div> - <div id="hostQ" class="c" style="color:blue"><i class="c">Two</i><b class="c">One</b></div>Three - <div id="hostS" class="c"><span class="c">S</span></div> - <div id="hostT" class="c">T</div> - <div id="hostU"><span class="c">U</span></div> - <div id="hostV" class="c" style="color:red"><b class="c" style="color:inherit">V</b></div> - - <script> - function shadow(id) { - return document.getElementById(id).createShadowRoot(); - } - function span(s) { - var e = document.createElement("span"); - var t = document.createTextNode(s); - e.appendChild(t); - return e; - } - function text(s) { - return document.createTextNode(s); - } - function contents(n) { - var e = document.createElement("z"); - e.style.display = "contents"; - e.style.color = "blue"; - if (n) e.appendChild(n); - return e; - } - - function run() { - document.body.offsetHeight; - - shadow("host1").innerHTML = '<content></content> c'; - shadow("host2").innerHTML = 'a <content style="display:contents"></content> c'; - shadow("host3").innerHTML = 'a <content style="display:contents"></content>'; - shadow("host4").innerHTML = '<content style="display:contents"></content>'; - shadow("host5").innerHTML = 'a <content style="display:contents"></content>'; - shadow("host6").innerHTML = '<z style="color:blue; display:contents"><content></content></z> c'; - shadow("host7").innerHTML = 'a <content style="display:contents"></content> c'; - shadow("host8").innerHTML = 'a <z style="color:blue; display:contents"><content style="display:contents"></z></content>'; - shadow("host9").innerHTML = '<content style="display:contents"></content>'; - shadow("hostA").innerHTML = 'a <content style="display:contents"></content>'; - shadow("hostB").innerHTML = 'a <content select=".c"></content> <content select=".b"></content> B'; - shadow("hostC").innerHTML = 'A <content select=".c"></content> <content select=".b"></content> B'; - shadow("hostD").innerHTML = 'A <content select=".c"></content> <content select=".b"></content> B <content select=".b"></content>'; - shadow("hostE").innerHTML = 'A <content select=".c"></content> <content select=".b"></content> B'; - shadow("hostF").innerHTML = '<content select=".c"></content> <content select=".b"></content> B'; - shadow("hostG").innerHTML = '<content select=".b"></content>'; - shadow("hostH").innerHTML = '<content select=".b"></content>'; - shadow("hostI").innerHTML = 'A<content select=".b"></content>'; - shadow("hostJ").innerHTML = 'A<content select=".b"></content>'; - shadow("hostK").innerHTML = '<content select=".b"></content>'; - shadow("hostL").innerHTML = '<content select=".b"></content>'; - shadow("hostM").innerHTML = '<content select="b"></content><content select="i"></content>'; - shadow("hostN").innerHTML = '<content select="b"></content><content select="i"></content>'; - shadow("hostO").innerHTML = '<content select="b"></content><content select="i"></content>'; - shadow("hostP").innerHTML = '<content select="b"></content><content select="i"></content>'; - shadow("hostQ").innerHTML = '<content select="b"></content><content select="i"></content>'; - } - - function tweak() { - document.body.offsetHeight; - - host1.appendChild(span("1")); - host2.appendChild(text("2")); - host3.appendChild(span("3")); - host4.appendChild(text("4")); - - var e = span("5"); - e.style.display = "contents"; - host5.appendChild(e); - - host6.appendChild(span("6")); - host7.appendChild(contents(text("7"))); - host8.appendChild(contents(span("8"))); - host9.appendChild(contents(text("9"))); - - var e = contents(span("A")); - e.style.display = "contents"; - hostA.appendChild(e); - - var e = contents(text("2")); - e.className = "b"; - hostB.appendChild(e); - var e = contents(text("1")); - e.className = "c"; - hostB.appendChild(e); - - var e = contents(text("2")); - e.className = "b after"; - hostC.appendChild(e); - var e = contents(text("1")); - e.className = "c before"; - hostC.appendChild(e); - - var e = contents(text("2")); - e.className = "b before after"; - hostD.appendChild(e); - var e = contents(text(" 3")); - e.className = "b before after"; - hostD.appendChild(e); - var e = contents(text("1")); - e.className = "c before"; - hostD.appendChild(e); - - var e = contents(contents(text("2"))); - e.className = "before b after"; - hostE.appendChild(e); - var e2 = contents(text("1")); - e2.className = "c before after"; - hostE.insertBefore(e2, e); - - var e = contents(text("2")); - e.className = "before b after"; - hostF.appendChild(e); - var e2 = contents(text("1")); - e2.className = "c before after"; - hostF.insertBefore(e2, e); - - var e = contents(contents(text("1"))); - e.className = "b"; - hostG.appendChild(e); - var e = contents(text("2")); - e.className = "b before after"; - hostG.appendChild(e); - - var e = contents(contents(text("2"))); - e.className = "b"; - hostH.appendChild(e); - var e2 = contents(text("1")); - e2.className = "b before after"; - hostH.insertBefore(e2, e); - - var e = contents(text("b")); - e.className = "b"; - hostI.appendChild(e); - var e = span("c"); - e.className = "b"; - hostI.appendChild(e); - - var e = contents(contents(text("b"))); - e.className = "b"; - hostJ.appendChild(e); - var e = span("c"); - e.className = "b"; - hostJ.appendChild(e); - - var inner = span("b"); - inner.className = "after"; - var e = contents(contents(inner)); - e.className = "b"; - hostK.appendChild(e); - var e = span("d"); - e.className = "b"; - hostK.appendChild(e); - - var inner = contents(null); - inner.className = "before"; - var e = contents(inner); - e.className = "b"; - hostL.appendChild(e); - var e = span("b"); - e.className = "b"; - hostL.appendChild(e); - - document.body.offsetHeight; - setTimeout(function() { - shadow("hostS"); - shadow("hostT"); - shadow("hostU"); - shadow("hostV").innerHTML = '<z style="color:green"><content select="b"></content></z>'; - - document.body.offsetHeight; - document.documentElement.removeAttribute("class"); - },0); - } - - if (document.body.createShadowRoot) { - run(); - window.addEventListener("MozReftestInvalidate", tweak); - } else { - document.documentElement.removeAttribute("class"); - } - </script> - </body> -</html>
--- a/layout/reftests/css-display/reftest.list +++ b/layout/reftests/css-display/reftest.list @@ -12,17 +12,16 @@ fuzzy-if(Android,8,604) == display-conte fuzzy-if(winWidget,12,100) == display-contents-style-inheritance-1-dom-mutations.html display-contents-style-inheritance-1-ref.html == display-contents-tables.xhtml display-contents-tables-ref.xhtml == display-contents-tables-2.xhtml display-contents-tables-ref.xhtml == display-contents-tables-3.xhtml display-contents-tables-3-ref.xhtml == display-contents-visibility-hidden.html display-contents-visibility-hidden-ref.html == display-contents-visibility-hidden-2.html display-contents-visibility-hidden-ref.html == display-contents-495385-2d.html display-contents-495385-2d-ref.html fuzzy-if(Android,7,3935) == display-contents-xbl.xhtml display-contents-xbl-ref.html -#bug 1421540 fuzzy-if(Android,7,1186) pref(dom.webcomponents.shadowdom.enabled,true) == display-contents-shadow-dom-1.html display-contents-shadow-dom-1-ref.html == display-contents-xbl-2.xul display-contents-xbl-2-ref.xul == display-contents-xbl-3.xul display-contents-xbl-3-ref.xul skip == display-contents-xbl-4.xul display-contents-xbl-4-ref.xul # fails (not just asserts) due to bug 1089223 asserts(0-1) fuzzy-if(Android,8,3216) == display-contents-fieldset.html display-contents-fieldset-ref.html # bug 1089223 == display-contents-xbl-5.xul display-contents-xbl-3-ref.xul == display-contents-xbl-6.xhtml display-contents-xbl-6-ref.html == display-contents-xbl-7.xhtml display-contents-xbl-7-ref.html == display-contents-list-item-child.html display-contents-list-item-child-ref.html
--- a/layout/reftests/forms/legend/reftest.list +++ b/layout/reftests/forms/legend/reftest.list @@ -1,4 +1,3 @@ == legend.html legend-ref.html -#bug 1418002 fuzzy-if(skiaContent,1,7) pref(dom.webcomponents.shadowdom.enabled,true) == shadow-dom.html shadow-dom-ref.html == 1273433.html 1273433-ref.html fails == 1339287.html 1339287-ref.html # bug 1383868
deleted file mode 100644 --- a/layout/reftests/forms/legend/shadow-dom.html +++ /dev/null @@ -1,125 +0,0 @@ -<!DOCTYPE html> -<!-- - Any copyright is dedicated to the Public Domain. - http://creativecommons.org/publicdomain/zero/1.0/ ---> -<html class="reftest-wait" lang="en-US"> - <head> - <title>Test LEGEND placed into FIELDSET shadow DOM</title> - <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1140579"> - <link rel="match" href="shadow-dom-ref.html"> -<style> -html,body { - color:black; background-color:white; font-size:16px; padding:0; margin:0; -} -.before::before {content: "a ";} -.after::after {content: " c";} -div.before::before {content: "X ";} -div.after::after {content: " Y";} -.b,.c { display:contents; } -</style> - </head> - <body> - <fieldset id="host1" class="before"></fieldset> - <fieldset id="host2"></fieldset> - <fieldset id="host3" class="after"></fieldset> - <fieldset id="host4" class="before after"></fieldset> - <fieldset id="host5" class="after"></fieldset> - <fieldset id="host6" class="before"></fieldset> - <fieldset id="host7"></fieldset> - <fieldset id="host8"></fieldset> - <fieldset id="host9"></fieldset> - - <script> - function shadow(id) { - return document.getElementById(id).createShadowRoot(); - } - function legend(s) { - var e = document.createElement("legend"); - var t = document.createTextNode(s); - e.appendChild(t); - return e; - } - function contents(n) { - var e = document.createElement("z"); - e.style.display = "contents"; - e.style.color = "blue"; - if (n) e.appendChild(n); - return e; - } - - function run() { - document.body.offsetHeight; - - shadow("host1").innerHTML = '<content></content> c'; - shadow("host2").innerHTML = 'a <content></content> c'; - shadow("host3").innerHTML = 'a <content></content>'; - shadow("host4").innerHTML = '<content></content>'; - shadow("host5").innerHTML = 'a <content></content>'; - shadow("host6").innerHTML = '<z style="color:blue; display:contents"><content></content></z> c'; - shadow("host7").innerHTML = 'a <content select=".c"></content> <content select=".b"></content> B'; - shadow("host8").innerHTML = 'A <content select=".c"></content> <content select=".b"></content> B'; - shadow("host9").innerHTML = 'A <content select=".c"></content> <content select=".b"></content> B <content select=".b"></content>'; - } - - function tweak() { - document.body.offsetHeight; - - host1.appendChild(legend("1")); - host2.appendChild(legend("2")); - host3.appendChild(legend("3")); - host4.appendChild(legend("4")); - - var e = legend("5"); - e.style.display = "contents"; - host5.appendChild(e); - - document.body.offsetHeight; - - host6.appendChild(legend("6")); - - var e = legend("L"); - e.className = "b"; - host7.appendChild(e); - var e = legend("7"); - e.className = "c"; - - document.body.offsetHeight; - - host7.appendChild(e); - - var e = legend("L"); - e.className = "b after"; - host8.appendChild(e); - var e = legend("8"); - e.className = "c before"; - host8.appendChild(e); - - document.body.offsetHeight; - - var e = legend("L2"); - e.className = "b before after"; - host9.appendChild(e); - var e = contents(legend(" L3")); - e.className = "b before after"; - host9.appendChild(e); - var e = legend("9"); - e.className = "c before"; - host9.appendChild(e); - - document.body.offsetHeight; - setTimeout(function() { - document.body.offsetHeight; - document.documentElement.removeAttribute("class"); - },0); - } - - if (document.body.createShadowRoot) { - run(); - window.addEventListener("MozReftestInvalidate", tweak); - } else { - document.documentElement.removeAttribute("class"); - } - </script> - </body> -</html>
--- a/layout/reftests/mathml/shadow-dom-1.html +++ b/layout/reftests/mathml/shadow-dom-1.html @@ -2,19 +2,17 @@ <html class="reftest-wait"> <meta charset="utf-8"> <title>Test for bug 1066554 - Shadow DOM loads MathML stylesheets as needed</title> <body> <div id="x"></div> <script> function insertShadowMathML() { var x = document.getElementById("x"); - if (x.createShadowRoot) { - x.createShadowRoot(); - x.shadowRoot.innerHTML = - '<math><msup><mi>X</mi><mi>X</mi></msup></math>'; - } + x.attachShadow({ mode: "open" }); + x.shadowRoot.innerHTML = + '<math><msup><mi>X</mi><mi>X</mi></msup></math>'; document.documentElement.removeAttribute("class"); } window.addEventListener("MozReftestInvalidate", insertShadowMathML); </script> </body> </html>
--- a/layout/reftests/webcomponents/cross-tree-selection-1.html +++ b/layout/reftests/webcomponents/cross-tree-selection-1.html @@ -1,20 +1,15 @@ <!DOCTYPE HTML> <html class="reftest-wait"> <head> <script> function tweak() { - if (!document.body.createShadowRoot) { - document.documentElement.className = ""; - return; - } - var host = document.getElementById("host"); - var shadow = host.createShadowRoot(); + var shadow = host.attachShadow({ mode: "open" }); var textNode = document.createTextNode(" World"); shadow.appendChild(textNode); // Create a selection with focus preceeding anchor var selection = window.getSelection(); var range = document.createRange(); range.setStart(shadow, 1);
--- a/layout/style/crashtests/1017798-1.html +++ b/layout/style/crashtests/1017798-1.html @@ -47,17 +47,17 @@ gaia_switch/examples/index.html from the <script> 'use strict'; /* global ComponentUtils */ window.GaiaSwitch = (function(win) { // Extend from the HTMLElement prototype class GaiaSwitch extends HTMLElement { connectedCallback() { - var shadow = this.createShadowRoot(); + var shadow = this.attachShadow({ mode: "open" }); this._template = template.content.cloneNode(true); this._input = this._template.querySelector('input[type="checkbox"]'); var checked = this.getAttribute('checked'); if (checked !== null) { this._input.checked = true; } @@ -100,17 +100,17 @@ window.GaiaSwitch = (function(win) { // wanted to use <gaia-switch>, this would make // markup changes complicated, and could lead to // things getting out of sync. This is a short-term // hack until we can import entire custom-elements // using HTML Imports (bug 877072). var template = document.createElement('template'); template.innerHTML = '<label id="switch-label" class="pack-switch">' + '<input type="checkbox">' + - '<span><content select="label"></content></span>' + + '<span><slot></slot></span>' + '</label>'; // Register and return the constructor return document.registerElement('gaia-switch', { prototype: proto }); })(window); </script> <body> <section>
--- a/layout/style/crashtests/1089463-1.html +++ b/layout/style/crashtests/1089463-1.html @@ -1,14 +1,14 @@ <!DOCTYPE html> <div></div> <script> window.onload = function() { var div = document.querySelector("div"); - var shadow = div.createShadowRoot(); + var shadow = div.attachShadow({ mode: "open" }); shadow.innerHTML = "<p style='display: none'><span><i>x</i></span></p>"; var p = shadow.lastChild; var span = p.firstChild; var i = span.firstChild; span.style.color = 'blue'; p.remove();
deleted file mode 100644 --- a/layout/style/crashtests/1415021.html +++ /dev/null @@ -1,39 +0,0 @@ -<script> -try { o = [document.documentElement] } catch(e) { } -try { o1 = document.createElement('dir') } catch(e) { } -try { o2 = document.createElement('th') } catch(e) { } -try { o3 = document.createElement('rb') } catch(e) { } -try { o4 = document.createElement('input') } catch(e) { } -try { o5 = document.createElement('applet') } catch(e) { } -try { o6 = document.createElement('input') } catch(e) { } -try { o7 = document.createElement('legend') } catch(e) { } -try { o8 = document.createElement('keygen') } catch(e) { } -try { o9 = document.createElement('input') } catch(e) { } -try { o10 = document.createElement('input') } catch(e) { } -try { o11 = document.createElement('input') } catch(e) { } -try { o12 = document.createElement('button') } catch(e) { } -try { o13 = document.createElement('video') } catch(e) { } -try { o14 = document.createElement('body') } catch(e) { } -try { o15 = document.createElement('template') } catch(e) { } -try { o16 = document.createElement('area') } catch(e) { } -try { document.documentElement.appendChild(o1) } catch(e) { } -try { document.documentElement.appendChild(o2) } catch(e) { } -try { document.documentElement.appendChild(o3) } catch(e) { } -try { document.documentElement.appendChild(o4) } catch(e) { } -try { document.documentElement.appendChild(o5) } catch(e) { } -try { document.documentElement.appendChild(o6) } catch(e) { } -try { document.documentElement.appendChild(o7) } catch(e) { } -try { document.documentElement.appendChild(o8) } catch(e) { } -try { document.documentElement.appendChild(o9) } catch(e) { } -try { document.documentElement.appendChild(o10) } catch(e) { } -try { document.documentElement.appendChild(o11) } catch(e) { } -try { document.documentElement.appendChild(o12) } catch(e) { } -try { document.documentElement.appendChild(o13) } catch(e) { } -try { document.documentElement.appendChild(o14) } catch(e) { } -try { document.documentElement.appendChild(o15) } catch(e) { } -try { o15.content.append(document.documentElement, "") } catch(e) { } -try { document.appendChild(document.createElement("html")) } catch(e) { } -try { o17 = o14.createShadowRoot() } catch(e) { } -try { document.replaceChild(o[0], document.documentElement); } catch(e) { } -try { try { o17.appendChild(o16) } catch(e) { document.documentElement.appendChild(o16) } } catch(e) { } -</script>
--- a/layout/style/crashtests/1415353.html +++ b/layout/style/crashtests/1415353.html @@ -1,8 +1,8 @@ <!doctype html> <textarea id="htmlvar00003" maxlength="0"> <!-- Text nodes around me are important --> </textarea> <script> document.body.offsetTop; -document.querySelector('textarea').createShadowRoot(); +document.querySelector('textarea').attachShadow({ mode: "open" }); </script>
deleted file mode 100644 --- a/layout/style/crashtests/1415663.html +++ /dev/null @@ -1,13 +0,0 @@ -<html> - <head> - <script> - function boom() { - document.getElementById('x').createShadowRoot() - } - </script> - </head> - <body onload=boom()> - <marquee id='x'> - <table id='x'> - </body> -</html> \ No newline at end of file
--- a/layout/style/crashtests/crashtests.list +++ b/layout/style/crashtests/crashtests.list @@ -257,19 +257,17 @@ load 1409502.html load 1409931.html load 1410226-1.html load 1410226-2.html load 1411143.html load 1411478.html load 1413288.html load 1413361.html load 1413670.html -load 1415663.html pref(dom.webcomponents.shadowdom.enabled,true) load 1415353.html -pref(dom.webcomponents.shadowdom.enabled,true) load 1415021.html load 1418059.html test-pref(dom.animations-api.core.enabled,true) load 1418867.html pref(dom.webcomponents.shadowdom.enabled,true) load 1419554.html load 1426312.html load 1439793.html load 1409183.html pref(dom.webcomponents.shadowdom.enabled,true) load 1445682.html load 1450691.html
--- a/testing/marionette/harness/marionette_harness/www/test_shadow_dom.html +++ b/testing/marionette/harness/marionette_harness/www/test_shadow_dom.html @@ -10,17 +10,17 @@ <title>Marionette Test</title> </head> <body> <div id="host"></div> <div id="empty-host"></div> <script> 'use strict'; var host = document.getElementById('host'); - var root = host.createShadowRoot(); + var root = host.attachShadow({ mode: "open" }); root.innerHTML = '<button id="button">Foo</button>' + '<div id="inner-host"></div>'; var innerHost = host.shadowRoot.getElementById('inner-host'); - var innerRoot = innerHost.createShadowRoot(); + var innerRoot = innerHost.attachShadow({ mode: "open" }); innerRoot.innerHTML = '<button id="inner-button">Bar</button>'; </script> </body> </html>
--- a/testing/web-platform/tests/css/cssom-view/scrollIntoView-shadow.html +++ b/testing/web-platform/tests/css/cssom-view/scrollIntoView-shadow.html @@ -9,25 +9,25 @@ <div id="space2" style="height: 2000px; width: 2000px;background-color: blue"> </div> </div> <script> add_completion_callback(() => document.getElementById("container").remove()); test(t => { var shadow = document.getElementById("shadow"); - var shadowRoot = shadow.createShadowRoot(); + var shadowRoot = shadow.attachShadow({ mode: "open" }); var shadowDiv = document.createElement("div"); shadowDiv.style.height = "200px"; shadowDiv.style.width = "200px"; shadowDiv.style.backgroundColor = "green"; shadowRoot.appendChild(shadowDiv); window.scrollTo(0, 0); var expected_x = shadowDiv.offsetLeft; var expected_y = shadowDiv.offsetTop; assert_not_equals(window.scrollX, expected_x); assert_not_equals(window.scrollY, expected_y); shadowDiv.scrollIntoView({block: "start", inline: "start"}); assert_approx_equals(window.scrollX, expected_x, 1); assert_approx_equals(window.scrollY, expected_y, 1); }, "scrollIntoView should behave correctly if applies to shadow dom elements"); -</script> \ No newline at end of file +</script>
--- a/testing/web-platform/tests/innerText/getter-tests.js +++ b/testing/web-platform/tests/innerText/getter-tests.js @@ -321,17 +321,17 @@ testText("<div><ruby>abc<rp>(</rp><rt>de testText("<div><rp>abc</rp>", "", "Lone <rp>"); testText("<div><rp style='visibility:hidden'>abc</rp>", "", "visibility:hidden <rp>"); testText("<div><rp style='display:block'>abc</rp>def", "abc\ndef", "display:block <rp>"); testText("<div><rp style='display:block'> abc </rp>def", "abc\ndef", "display:block <rp> with whitespace"); testText("<div><select class='poke-rp'></select>", "", "<rp> in a <select>"); /**** Shadow DOM ****/ -if ("createShadowRoot" in document.body) { +if ("attachShadow" in document.body) { testText("<div class='shadow'>", "", "Shadow DOM contents ignored"); testText("<div><div class='shadow'>", "", "Shadow DOM contents ignored"); } /**** Flexbox ****/ if (CSS.supports('display', 'flex')) { testText("<div style='display:flex'><div style='order:1'>1</div><div>2</div></div>",
--- a/testing/web-platform/tests/innerText/getter.html +++ b/testing/web-platform/tests/innerText/getter.html @@ -44,17 +44,17 @@ function textTextInContainer(cont, html, for (var i = 0; i < pokes.length; ++i) { var el = document.createElement(tag); el.textContent = "abc"; pokes[i].appendChild(el); } }); var shadows = document.getElementsByClassName('shadow'); for (var i = 0; i < shadows.length; ++i) { - var s = shadows[i].createShadowRoot(); + var s = shadows[i].attachShadow({ mode: "open" }); s.textContent = 'abc'; } while (e && e.nodeType != Node.ELEMENT_NODE) { e = e.nextSibling; } assert_equals(e.innerText, expectedPlain); cont.textContent = ''; }, msg + ' (' + format_value(html) + ')');
--- a/testing/web-platform/tests/intersection-observer/shadow-content.html +++ b/testing/web-platform/tests/intersection-observer/shadow-content.html @@ -18,17 +18,17 @@ var vw = document.documentElement.client var vh = document.documentElement.clientHeight; var entries = []; var target; runTestCycle(function() { var shadowHost = document.getElementById("host"); assert_true(!!shadowHost, "Host exists"); - var shadowRoot = shadowHost.createShadowRoot(); + var shadowRoot = shadowHost.attachShadow({ mode: "open" }); assert_true(!!shadowRoot, "Shadow root exists"); shadowRoot.innerHTML = "<div id='target' style='width: 100px; height: 100px; background-color: green;'></div>"; target = shadowRoot.getElementById("target"); assert_true(!!target, "target exists"); var observer = new IntersectionObserver(function(changes) { entries = entries.concat(changes) });
--- a/testing/web-platform/tests/resize-observer/eventloop.html +++ b/testing/web-platform/tests/resize-observer/eventloop.html @@ -124,17 +124,17 @@ function test1() { setup: observer => { onErrorCalled = false; let t2 = document.createElement('div'); t1.appendChild(t2); resizers.push(t2); let t3 = document.createElement('div'); resizers.push(t3); t2.appendChild(t3); - let shadow = t3.createShadowRoot(); + let shadow = t3.attachShadow({ mode: "open" }); let t4 = document.createElement('div'); resizers.push(t4); shadow.appendChild(t4); let t5 = document.createElement('div'); resizers.push(t5); t4.appendChild(t5); resizers.forEach( el => observer.observe(el) ); },