Bug 1396584 - Remove support for multiple ShadowRoots

Tag #1375
This commit is contained in:
Matt A. Tobin 2020-04-17 06:34:38 -04:00 • committed by Roy Tam
commit 5917636e83
44 changed files with 334 additions and 1955 deletions

View file

@ -45,8 +45,6 @@ span { color:blue; }
<span style="color:green">R</span>
<div></div>
<b style="color:green">V</b>
<b style="color:green">W</b>
<b style="color:green">X</b>
<!-- <b style="color:green">Y</b> -->
</body>
</html>

View file

@ -51,8 +51,6 @@ div.after::after {content: " Y";}
<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>
<div id="hostW" class="c" style="color:red"><b class="c" style="color:inherit">W</b></div>
<span id="hostX" style="color:red"><b class="c" style="color:inherit">X</b></span>
<!-- TODO(bug 1021572?) <div id="hostY" class="c" style="color:red"><b>Y</b></div> -->
<script>
@ -105,8 +103,6 @@ div.after::after {content: " Y";}
shadow("hostP").innerHTML = '<content select="b"></content><content select="i"></content>';
shadow("hostQ").innerHTML = '<content select="b"></content><content select="i"></content>';
shadow("hostR").innerHTML = '<content select="span"></content>';
shadow("hostW").innerHTML = '<z style="color:red"><content select="b"></content></z>';
shadow("hostX").innerHTML = '<z style="color:red"><content select="b"></content></z>';
// TODO(bug 1021572?) shadow("hostY").innerHTML = '<content select="b"><style scoped>:scope{color:green}</style></content>';
function tweak() {
@ -222,8 +218,6 @@ div.after::after {content: " Y";}
shadow("hostT");
shadow("hostU");
shadow("hostV").innerHTML = '<z style="color:green"><content select="b"></content></z>';
shadow("hostW").innerHTML = '<z style="color:green"><content select="b"></content></z>';
shadow("hostX").innerHTML = '<z style="color:green"><content select="b"></content></z>';
document.body.offsetHeight;
document.documentElement.removeAttribute("class");

View file

@ -1,6 +0,0 @@
<!DOCTYPE HTML>
<html>
<body>
<div><span>Hello</span><span>World</span></div>
</body>
</html>

View file

@ -1,17 +0,0 @@
<!DOCTYPE HTML>
<html>
<head>
<script>
function tweak() {
var oldShadowRoot = document.getElementById('outer').createShadowRoot();
oldShadowRoot.innerHTML = 'World';
var youngShadowRoot = document.getElementById('outer').createShadowRoot();
youngShadowRoot.innerHTML = 'Hello<content></content><shadow></shadow>';
}
</script>
</head>
<body onload="tweak()">
<div id="outer"></div>
</body>
</html>

View file

@ -1,6 +0,0 @@
<!DOCTYPE HTML>
<html>
<body>
<div><span>Hello</span><span>World</span></div>
</body>
</html>

View file

@ -1,17 +0,0 @@
<!DOCTYPE HTML>
<html>
<head>
<script>
function tweak() {
var oldShadowRoot = document.getElementById('outer').createShadowRoot();
oldShadowRoot.innerHTML = 'Hello';
var youngShadowRoot = document.getElementById('outer').createShadowRoot();
youngShadowRoot.innerHTML = '<shadow></shadow><content></content>World';
}
</script>
</head>
<body onload="tweak()">
<div id="outer"></div>
</body>
</html>

View file

@ -1,10 +0,0 @@
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<div>
<div style="width:100px; height:100px; background-color:green"></div><div style="width:100px; height:100px; background-color:orange">Hello World</div>
</div>
</body>
</html>

View file

@ -1,19 +0,0 @@
<!DOCTYPE HTML>
<html>
<head>
<script>
function tweak() {
var olderShadow = document.getElementById('outer').createShadowRoot();
olderShadow.innerHTML = '<div style="width:100px; height:100px; background-color: orange"><content></content></div>';
var youngerShadow = document.getElementById('outer').createShadowRoot();
youngerShadow.innerHTML = '<div style="width:100px; height:100px; background-color: green"></div><shadow>Hello World</shadow>';
}
</script>
</head>
<body onload="tweak()">
<div id="outer">
<div style="width:300px; height:100px; background-color:red;"></div>
</div>
</body>
</html>

View file

@ -1,29 +0,0 @@
<!DOCTYPE HTML>
<html>
<head>
<script>
function tweak() {
var olderShadow = document.getElementById('outer').createShadowRoot();
olderShadow.innerHTML = '<content></content><span>World</span>';
var youngerShadow = document.getElementById('outer').createShadowRoot();
youngerShadow.innerHTML = '<div id="shadowparent"><shadow id="youngshadow"><span>Hello</span></shadow></div>';
var shadowParent = youngerShadow.getElementById("shadowparent");
var nestedShadow = shadowParent.createShadowRoot();
nestedShadow.innerHTML = '<div style="background-color: green"><content></content></div>';
// Dynamically append a span to the shadow element in the younger ShadowRoot to make sure
// it is projected into the nested shadow.
var appendedSpan = document.createElement("span");
appendedSpan.textContent = ' ';
youngerShadow.getElementById("youngshadow").appendChild(appendedSpan);
}
</script>
</head>
<body onload="tweak()">
<div id="outer">
<div style="width:300px; height:100px; background-color:red;"></div>
</div>
</body>
</html>

View file

@ -5,13 +5,9 @@ pref(dom.webcomponents.enabled,true) == basic-shadow-3.html basic-shadow-3-ref.h
pref(dom.webcomponents.enabled,true) == basic-shadow-4.html basic-shadow-4-ref.html
pref(dom.webcomponents.enabled,true) == basic-insertion-point-1.html basic-insertion-point-1-ref.html
pref(dom.webcomponents.enabled,true) == basic-insertion-point-2.html basic-insertion-point-2-ref.html
pref(dom.webcomponents.enabled,true) == adjacent-insertion-points-1.html adjacent-insertion-points-1-ref.html
pref(dom.webcomponents.enabled,true) == adjacent-insertion-points-2.html adjacent-insertion-points-2-ref.html
pref(dom.webcomponents.enabled,true) == fallback-content-1.html fallback-content-1-ref.html
pref(dom.webcomponents.enabled,true) == remove-insertion-point-1.html remove-insertion-point-1-ref.html
pref(dom.webcomponents.enabled,true) == nested-insertion-point-1.html nested-insertion-point-1-ref.html
pref(dom.webcomponents.enabled,true) == basic-shadow-element-1.html basic-shadow-element-1-ref.html
pref(dom.webcomponents.enabled,true) == nested-shadow-element-1.html nested-shadow-element-1-ref.html
pref(dom.webcomponents.enabled,true) == update-dist-node-descendants-1.html update-dist-node-descendants-1-ref.html
pref(dom.webcomponents.enabled,true) == input-transition-1.html input-transition-1-ref.html
pref(dom.webcomponents.enabled,true) == dynamic-insertion-point-distribution-1.html dynamic-insertion-point-distribution-1-ref.html