Magic-Mirror/gecko-dev
1
0
Fork 0
mirror of https://github.com/mozilla/gecko-dev.git synced 2024-10-09 03:15:11 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Bug 1453789: Remove Element.createShadowRoot. r=smaug

Browse Source 
MozReview-Commit-ID: Hgxbp1Icgvh
This commit is contained in:
Emilio Cobos Álvarez 2018-04-12 22:35:45 +02:00
parent 64e23c4b58
commit 9509cd7e32
36 changed files with 42 additions and 725 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
devtools/client/inspector/markup/test/doc_markup_anonymous.html
View File

@ -25,10 +25,8 @@
<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>

4
devtools/server/tests/mochitest/inspector-traversal-data.html
View File

@ -23,8 +23,8 @@
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 ");

14
dom/base/Element.cpp
View File

@ -1219,18 +1219,6 @@ Element::AttachShadow(const ShadowRootInit& aInit, ErrorResult& aError)
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.
@ -1260,7 +1248,7 @@ Element::AttachShadowInternal(ShadowRootMode aMode, ErrorResult& aError)
* 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());

3
dom/base/Element.h
View File

@ -1263,9 +1263,6 @@ public:
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();

3
dom/base/crashtests/1024428-1.html
View File

@ -5,8 +5,7 @@
<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>

2
dom/base/crashtests/1029710.html
View File

@ -3,7 +3,7 @@
<body>
<script>
var x = document.createElement('span');
x.createShadowRoot();
x.attachShadow({ mode: "open" });
x.id = 'a';
</script>
</body>

33
dom/base/crashtests/1118764.html
View File

@ -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>

6
dom/base/crashtests/1281715.html
View File

@ -11,9 +11,9 @@ html {
<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>

2
dom/base/crashtests/1324463.html
View File

@ -3,7 +3,7 @@
<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("");

6
dom/base/test/test_mutationobservers.html
View File

@ -590,9 +590,9 @@ function testExpandos() {
}
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;
}
@ -608,7 +608,7 @@ function testOutsideShadowDOM() {
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";

173
dom/tests/mochitest/webcomponents/test_shadow_element.html
View File

@ -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>

4
dom/webidl/Element.webidl
View File

@ -276,10 +276,6 @@ partial interface Element {
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;

2
layout/base/crashtests/1261351-iframe.html
View File

@ -10,7 +10,7 @@
}
connectedCallback() {
let shadow = this.createShadowRoot();
let shadow = this.attachShadow({ mode: "open" });
if (this.template) {
let te = document.createElement('template');
te.innerHTML = this.template;

16
layout/base/crashtests/1404789-1.html
View File

@ -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>

16
layout/base/crashtests/1409088.html
View File

@ -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>

2
layout/base/crashtests/crashtests.list
View File

@ -508,10 +508,8 @@ 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

4
layout/generic/crashtests/1059138-1.html
View File

@ -8,7 +8,7 @@
<button class="action-button">
ThisIsAButton
</button>
<content></content>
<slot></slot>
</div>
</template>
@ -21,7 +21,7 @@
// 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);

20
layout/reftests/bugs/1066554-1.html
View File

@ -7,17 +7,15 @@
<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);

231
layout/reftests/css-display/display-contents-shadow-dom-1.html
View File

@ -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>

1
layout/reftests/css-display/reftest.list
View File

@ -17,7 +17,6 @@ fuzzy-if(winWidget,12,100) == display-contents-style-inheritance-1-dom-mutations
== 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

1
layout/reftests/forms/legend/reftest.list
View File

@ -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

125
layout/reftests/forms/legend/shadow-dom.html
View File

@ -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>

8
layout/reftests/mathml/shadow-dom-1.html
View File

@ -7,11 +7,9 @@
<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);

7
layout/reftests/webcomponents/cross-tree-selection-1.html
View File

@ -3,13 +3,8 @@
<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);

4
layout/style/crashtests/1017798-1.html
View File

@ -52,7 +52,7 @@ 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"]');
@ -105,7 +105,7 @@ window.GaiaSwitch = (function(win) {
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

2
layout/style/crashtests/1089463-1.html
View File

@ -3,7 +3,7 @@
<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;

39
layout/style/crashtests/1415021.html
View File

@ -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>

2
layout/style/crashtests/1415353.html
View File

@ -4,5 +4,5 @@
</textarea>
<script>
document.body.offsetTop;
document.querySelector('textarea').createShadowRoot();
document.querySelector('textarea').attachShadow({ mode: "open" });
</script>

13
layout/style/crashtests/1415663.html
View File

@ -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>

2
layout/style/crashtests/crashtests.list
View File

@ -262,9 +262,7 @@ 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

4
testing/marionette/harness/marionette_harness/www/test_shadow_dom.html
View File

@ -15,11 +15,11 @@
<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>

4
testing/web-platform/tests/css/cssom-view/scrollIntoView-shadow.html
View File

@ -14,7 +14,7 @@ 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";
@ -30,4 +30,4 @@ test(t => {
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>
</script>

2
testing/web-platform/tests/innerText/getter-tests.js
View File

@ -326,7 +326,7 @@ 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");
}

2
testing/web-platform/tests/innerText/getter.html
View File

@ -49,7 +49,7 @@ function textTextInContainer(cont, html, expectedPlain, msg) {
});
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) {

2
testing/web-platform/tests/intersection-observer/shadow-content.html
View File

@ -23,7 +23,7 @@ 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");

2
testing/web-platform/tests/resize-observer/eventloop.html
View File

@ -129,7 +129,7 @@ function test1() {
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);