Bug 1373155 - Disable Web Components in Servo-styled documents. r=wchen
MozReview-Commit-ID: 5IBBN2Gfazs
--- a/dom/base/nsDocument.cpp
+++ b/dom/base/nsDocument.cpp
@@ -6046,42 +6046,63 @@ nsDocument::CustomElementConstructor(JSC
return true;
}
bool
nsDocument::IsWebComponentsEnabled(JSContext* aCx, JSObject* aObject)
{
JS::Rooted<JSObject*> obj(aCx, aObject);
- if (nsContentUtils::IsWebComponentsEnabled()) {
- return true;
- }
-
- // Check for the webcomponents permission. See Bug 1181555.
JSAutoCompartment ac(aCx, obj);
JS::Rooted<JSObject*> global(aCx, JS_GetGlobalForObject(aCx, obj));
nsCOMPtr<nsPIDOMWindowInner> window =
do_QueryInterface(nsJSUtils::GetStaticScriptGlobal(global));
- return IsWebComponentsEnabled(window);
+ bool enabled =
+ nsContentUtils::IsWebComponentsEnabled() ||
+ // Check for the webcomponents permission. See Bug 1181555.
+ IsWebComponentsEnabled(window);
+
+ if (!enabled) {
+ return false;
+ }
+
+ nsIDocument* doc = window ? window->GetExtantDoc() : nullptr;
+ if (doc && doc->IsStyledByServo()) {
+ NS_WARNING("stylo: Web Components not supported yet");
+ return false;
+ }
+
+ return true;
}
bool
nsDocument::IsWebComponentsEnabled(dom::NodeInfo* aNodeInfo)
{
- if (nsContentUtils::IsWebComponentsEnabled()) {
- return true;
- }
-
nsIDocument* doc = aNodeInfo->GetDocument();
- // Use GetScopeObject() here so that data documents work the same way as the
- // main document they're associated with.
- nsCOMPtr<nsPIDOMWindowInner> window =
- do_QueryInterface(doc->GetScopeObject());
- return IsWebComponentsEnabled(window);
+
+ bool enabled = nsContentUtils::IsWebComponentsEnabled();
+ if (!enabled) {
+ // Use GetScopeObject() here so that data documents work the same way as the
+ // main document they're associated with.
+ nsCOMPtr<nsPIDOMWindowInner> window =
+ do_QueryInterface(doc->GetScopeObject());
+ enabled = IsWebComponentsEnabled(window);
+ }
+
+ if (!enabled) {
+ return false;
+ }
+
+ if (doc->IsStyledByServo()) {
+ NS_WARNING("stylo: Web Components not supported yet");
+ return false;
+ }
+
+ return true;
}
bool
nsDocument::IsWebComponentsEnabled(nsPIDOMWindowInner* aWindow)
{
if (aWindow) {
nsresult rv;
nsCOMPtr<nsIPermissionManager> permMgr =
--- a/dom/base/nsDocument.h
+++ b/dom/base/nsDocument.h
@@ -1390,27 +1390,28 @@ protected:
mozilla::dom::FlashClassification mFlashClassification;
// Do not use this value directly. Call the |IsThirdParty()| method, which
// caches its result here.
mozilla::Maybe<bool> mIsThirdParty;
private:
void UpdatePossiblyStaleDocumentState();
static bool CustomElementConstructor(JSContext* aCx, unsigned aArgc, JS::Value* aVp);
+ // Check whether web components are enabled for the given window.
+ static bool IsWebComponentsEnabled(nsPIDOMWindowInner* aWindow);
+
public:
virtual already_AddRefed<mozilla::dom::CustomElementRegistry>
GetCustomElementRegistry() override;
// Check whether web components are enabled for the global of aObject.
static bool IsWebComponentsEnabled(JSContext* aCx, JSObject* aObject);
// Check whether web components are enabled for the global of the document
// this nodeinfo comes from.
static bool IsWebComponentsEnabled(mozilla::dom::NodeInfo* aNodeInfo);
- // Check whether web components are enabled for the given window.
- static bool IsWebComponentsEnabled(nsPIDOMWindowInner* aWindow);
RefPtr<mozilla::EventListenerManager> mListenerManager;
RefPtr<mozilla::dom::StyleSheetList> mDOMStyleSheets;
RefPtr<nsDOMStyleSheetSetList> mStyleSheetSetList;
RefPtr<mozilla::dom::ScriptLoader> mScriptLoader;
nsDocHeaderData* mHeaderData;
/* mIdentifierMap works as follows for IDs:
* 1) Attribute changes affect the table immediately (removing and adding
--- a/layout/reftests/bugs/1066554-1.html
+++ b/layout/reftests/bugs/1066554-1.html
@@ -2,23 +2,25 @@
<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");
- 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>';
+ 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>';
+ }
document.documentElement.removeAttribute("class");
}
window.addEventListener("MozReftestInvalidate", insertShadowSVG);
</script>
</body>
</html>
--- a/layout/reftests/bugs/reftest.list
+++ b/layout/reftests/bugs/reftest.list
@@ -1851,17 +1851,17 @@ fuzzy-if(skiaContent,1,24000) == 1025914
test-pref(layout.css.grid.enabled,true) == 1053035-1-grid.html 1053035-1-ref.html
== 1059167-1.html 1059167-1-ref.html
== 1059498-1.html 1059498-1-ref.html
== 1059498-2.html 1059498-1-ref.html
== 1059498-3.html 1059498-1-ref.html
== 1062108-1.html 1062108-1-ref.html
== 1062792-1.html 1062792-1-ref.html
== 1062963-floatmanager-reflow.html 1062963-floatmanager-reflow-ref.html
-test-pref(dom.webcomponents.enabled,true) == 1066554-1.html 1066554-1-ref.html
+test-pref(dom.webcomponents.enabled,true) fails-if(stylo||styloVsGecko) == 1066554-1.html 1066554-1-ref.html
== 1069716-1.html 1069716-1-ref.html
fails-if(webrender) == 1078262-1.html about:blank
test-pref(layout.testing.overlay-scrollbars.always-visible,false) == 1081072-1.html 1081072-1-ref.html
== 1081185-1.html 1081185-1-ref.html
== 1097437-1.html 1097437-1-ref.html
== 1103258-1.html 1103258-1-ref.html # assertion crash test with layers culling test
== 1105137-1.html 1105137-1-ref.html
fuzzy-if(d2d,36,304) fuzzy-if(/^Windows\x20NT\x2010\.0/.test(http.oscpu)&&d2d,127,701) HTTP(..) == 1116480-1-fakeitalic-overflow.html 1116480-1-fakeitalic-overflow-ref.html
--- a/layout/reftests/css-display/display-contents-shadow-dom-1.html
+++ b/layout/reftests/css-display/display-contents-shadow-dom-1.html
@@ -71,48 +71,50 @@ div.after::after {content: " Y";}
function contents(n) {
var e = document.createElement("z");
e.style.display = "contents";
e.style.color = "blue";
if (n) e.appendChild(n);
return e;
}
- document.body.offsetHeight;
+ 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>';
- 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>';
+ 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>';
+ 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() {
document.body.offsetHeight;
host1.appendChild(span("1"));
host2.appendChild(text("2"));
host3.appendChild(span("3"));
host4.appendChild(text("4"));
@@ -225,12 +227,17 @@ div.after::after {content: " Y";}
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");
},0);
}
- window.addEventListener("MozReftestInvalidate", tweak);
+ 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,17 @@ fails-if(styloVsGecko||stylo) == display
fuzzy-if(winWidget,12,100) skip-if(styloVsGecko||stylo) == 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
-fuzzy-if(Android,7,1186) pref(dom.webcomponents.enabled,true) skip-if(styloVsGecko||stylo) == display-contents-shadow-dom-1.html display-contents-shadow-dom-1-ref.html
+fuzzy-if(Android,7,1186) pref(dom.webcomponents.enabled,true) fails-if(stylo||styloVsGecko) == display-contents-shadow-dom-1.html display-contents-shadow-dom-1-ref.html
== display-contents-xbl-2.xul display-contents-xbl-2-ref.xul
asserts(1) asserts-if(styloVsGecko,2) == display-contents-xbl-3.xul display-contents-xbl-3-ref.xul # bug 1089223
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
asserts(1) asserts-if(styloVsGecko,2) == display-contents-xbl-5.xul display-contents-xbl-3-ref.xul # bug 1089223
fails-if(!stylo) == display-contents-xbl-6.xhtml display-contents-xbl-6-ref.html # bug 1345809
== 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,4 @@
== legend.html legend-ref.html
-fuzzy-if(skiaContent,1,7) pref(dom.webcomponents.enabled,true) fails-if(styloVsGecko||stylo) == shadow-dom.html shadow-dom-ref.html
+fuzzy-if(skiaContent,1,7) pref(dom.webcomponents.enabled,true) fails-if(stylo||styloVsGecko) == shadow-dom.html shadow-dom-ref.html
== 1273433.html 1273433-ref.html
fails-if(styloVsGecko||stylo) == 1339287.html 1339287-ref.html
--- a/layout/reftests/forms/legend/shadow-dom.html
+++ b/layout/reftests/forms/legend/shadow-dom.html
@@ -43,27 +43,29 @@ div.after::after {content: " Y";}
function contents(n) {
var e = document.createElement("z");
e.style.display = "contents";
e.style.color = "blue";
if (n) e.appendChild(n);
return e;
}
- document.body.offsetHeight;
+ 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>';
+ 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"));
@@ -100,12 +102,17 @@ div.after::after {content: " Y";}
document.body.offsetHeight;
setTimeout(function() {
document.body.offsetHeight;
document.documentElement.removeAttribute("class");
},0);
}
- window.addEventListener("MozReftestInvalidate", tweak);
+ if (document.body.createShadowRoot) {
+ run();
+ window.addEventListener("MozReftestInvalidate", tweak);
+ } else {
+ document.documentElement.removeAttribute("class");
+ }
</script>
</body>
</html>
--- a/layout/reftests/mathml/reftest.list
+++ b/layout/reftests/mathml/reftest.list
@@ -362,17 +362,17 @@ fuzzy-if(OSX,1,100) fuzzy-if(skiaContent
== mfrac-C-2.html mfrac-C-2-ref.html
== mfrac-C-3.html mfrac-C-3-ref.html
== mfrac-C-4.html mfrac-C-4-ref.html
fuzzy-if(OSX,1,100) fuzzy-if(skiaContent,1,14) == mfrac-D-1.html mfrac-D-1-ref.html
== mfrac-D-2.html mfrac-D-2-ref.html
== mfrac-D-3.html mfrac-D-3-ref.html
== mfrac-D-4.html mfrac-D-4-ref.html
== mfrac-E-1.html mfrac-E-1-ref.html
-test-pref(dom.webcomponents.enabled,true) == shadow-dom-1.html shadow-dom-1-ref.html
+test-pref(dom.webcomponents.enabled,true) fails-if(stylo||styloVsGecko) == shadow-dom-1.html shadow-dom-1-ref.html
pref(font.size.inflation.emPerLine,25) == font-inflation-1.html font-inflation-1-ref.html
test-pref(font.minimum-size.x-math,40) == default-font.html default-font-ref.html
!= radicalbar-1.html about:blank
!= radicalbar-1a.html about:blank
!= radicalbar-1b.html about:blank
!= radicalbar-1c.html about:blank
!= radicalbar-1d.html about:blank
!= radicalbar-2.html about:blank
--- a/layout/reftests/mathml/shadow-dom-1.html
+++ b/layout/reftests/mathml/shadow-dom-1.html
@@ -2,17 +2,19 @@
<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");
- x.createShadowRoot();
- x.shadowRoot.innerHTML =
- '<math><msup><mi>X</mi><mi>X</mi></msup></math>';
+ if (x.createShadowRoot) {
+ x.createShadowRoot();
+ 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,13 +1,18 @@
<!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 textNode = document.createTextNode(" World");
shadow.appendChild(textNode);
// Create a selection with focus preceeding anchor
var selection = window.getSelection();
--- a/layout/reftests/webcomponents/dynamic-insertion-point-distribution-1.html
+++ b/layout/reftests/webcomponents/dynamic-insertion-point-distribution-1.html
@@ -1,25 +1,34 @@
<!DOCTYPE html>
<html class="reftest-wait">
<head>
</head>
<body>
<div id="host"></div>
<script>
- var host = document.getElementById("host");
- var root = host.createShadowRoot();
- root.innerHTML = 'a <content></content> c';
+ var host, root;
+
+ function run() {
+ host = document.getElementById("host");
+ root = host.createShadowRoot();
+ root.innerHTML = 'a <content></content> c';
+ }
function tweak() {
var span = document.createElement("span");
span.innerHTML = "b";
// Span should be distributed to insertion point between 'a' and 'c'.
host.appendChild(span);
document.documentElement.removeAttribute("class");
}
- window.addEventListener("MozReftestInvalidate", tweak);
+ if (document.body.createShadowRoot) {
+ run();
+ window.addEventListener("MozReftestInvalidate", tweak);
+ } else {
+ document.documentElement.className = "";
+ }
</script>
</body>
</html>
--- a/layout/reftests/webcomponents/dynamic-insertion-point-distribution-2.html
+++ b/layout/reftests/webcomponents/dynamic-insertion-point-distribution-2.html
@@ -1,26 +1,35 @@
<!DOCTYPE html>
<html class="reftest-wait">
<head>
</head>
<body>
<div id="host"></div>
<script>
- var host = document.getElementById("host");
- var root = host.createShadowRoot();
- root.innerHTML = "<span>a</span>";
+ var host, root;
+
+ function run() {
+ host = document.getElementById("host");
+ root = host.createShadowRoot();
+ root.innerHTML = "<span>a</span>";
+ }
function tweak() {
var span = document.createElement("span");
span.innerHTML = "b";
// Span should not be visible because it is not distributed to any
// insertion points in the shadow DOM.
host.appendChild(span);
document.documentElement.removeAttribute("class");
}
- window.addEventListener("MozReftestInvalidate", tweak);
+ if (document.body.createShadowRoot) {
+ run();
+ window.addEventListener("MozReftestInvalidate", tweak);
+ } else {
+ document.documentElement.className = "";
+ }
</script>
</body>
</html>
--- a/layout/reftests/webcomponents/input-transition-1.html
+++ b/layout/reftests/webcomponents/input-transition-1.html
@@ -1,23 +1,32 @@
<!DOCTYPE html>
<html class="reftest-wait">
<head>
</head>
<body>
<div id="host"></div>
<script>
- var host = document.getElementById("host");
- var root = host.createShadowRoot();
- root.innerHTML = '<style>input ~ div { background: red; transition: background 100ms; } input:checked ~ div { background: green; }</style><input id="one" type="checkbox"><div style="height: 50px; width: 50px;"></div>';
+ var host, root;
+
+ function run() {
+ host = document.getElementById("host");
+ root = host.createShadowRoot();
+ root.innerHTML = '<style>input ~ div { background: red; transition: background 100ms; } input:checked ~ div { background: green; }</style><input id="one" type="checkbox"><div style="height: 50px; width: 50px;"></div>';
+ }
function tweak() {
var el = root.getElementById("one");
el.checked = true;
el.nextSibling.addEventListener("transitionend", function() {
setTimeout(()=>{document.documentElement.removeAttribute("class")}, 1000); // wait for the checkbox SVG image to load on Android
});
}
- window.addEventListener("MozReftestInvalidate", tweak);
+ if (document.body.createShadowRoot) {
+ run();
+ window.addEventListener("MozReftestInvalidate", tweak);
+ } else {
+ document.documentElement.className = "";
+ }
</script>
</body>
</html>
--- a/layout/reftests/webcomponents/reftest.list
+++ b/layout/reftests/webcomponents/reftest.list
@@ -1,19 +1,19 @@
-pref(dom.webcomponents.enabled,true) == cross-tree-selection-1.html cross-tree-selection-1-ref.html
-pref(dom.webcomponents.enabled,true) == basic-shadow-1.html basic-shadow-1-ref.html
-pref(dom.webcomponents.enabled,true) == basic-shadow-2.html basic-shadow-2-ref.html
-pref(dom.webcomponents.enabled,true) == basic-shadow-3.html basic-shadow-3-ref.html
-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) skip-if(styloVsGecko||stylo) == 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) skip-if(styloVsGecko||stylo) == basic-shadow-element-1.html basic-shadow-element-1-ref.html
-pref(dom.webcomponents.enabled,true) skip-if(styloVsGecko||stylo) == nested-shadow-element-1.html nested-shadow-element-1-ref.html
-pref(dom.webcomponents.enabled,true) skip-if(styloVsGecko||stylo) == update-dist-node-descendants-1.html update-dist-node-descendants-1-ref.html
-pref(dom.webcomponents.enabled,true) skip-if(styloVsGecko||stylo) == 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
-pref(dom.webcomponents.enabled,true) == dynamic-insertion-point-distribution-2.html dynamic-insertion-point-distribution-2-ref.html
-pref(dom.webcomponents.enabled,true) == remove-append-shadow-host-1.html remove-append-shadow-host-1-ref.html
+pref(dom.webcomponents.enabled,true) fails-if(stylo||styloVsGecko) == cross-tree-selection-1.html cross-tree-selection-1-ref.html
+pref(dom.webcomponents.enabled,true) fails-if(stylo||styloVsGecko) == basic-shadow-1.html basic-shadow-1-ref.html
+pref(dom.webcomponents.enabled,true) fails-if(stylo||styloVsGecko) == basic-shadow-2.html basic-shadow-2-ref.html
+pref(dom.webcomponents.enabled,true) fails-if(stylo||styloVsGecko) == basic-shadow-3.html basic-shadow-3-ref.html
+pref(dom.webcomponents.enabled,true) fails-if(stylo||styloVsGecko) == basic-shadow-4.html basic-shadow-4-ref.html
+pref(dom.webcomponents.enabled,true) fails-if(stylo||styloVsGecko) == basic-insertion-point-1.html basic-insertion-point-1-ref.html
+pref(dom.webcomponents.enabled,true) fails-if(stylo||styloVsGecko) == basic-insertion-point-2.html basic-insertion-point-2-ref.html
+pref(dom.webcomponents.enabled,true) fails-if(stylo||styloVsGecko) == adjacent-insertion-points-1.html adjacent-insertion-points-1-ref.html
+pref(dom.webcomponents.enabled,true) fails-if(stylo||styloVsGecko) == adjacent-insertion-points-2.html adjacent-insertion-points-2-ref.html
+pref(dom.webcomponents.enabled,true) fails-if(stylo||styloVsGecko) == fallback-content-1.html fallback-content-1-ref.html
+pref(dom.webcomponents.enabled,true) fails-if(stylo||styloVsGecko) == remove-insertion-point-1.html remove-insertion-point-1-ref.html
+pref(dom.webcomponents.enabled,true) fails-if(stylo||styloVsGecko) == nested-insertion-point-1.html nested-insertion-point-1-ref.html
+pref(dom.webcomponents.enabled,true) fails-if(stylo||styloVsGecko) == basic-shadow-element-1.html basic-shadow-element-1-ref.html
+pref(dom.webcomponents.enabled,true) fails-if(stylo||styloVsGecko) == nested-shadow-element-1.html nested-shadow-element-1-ref.html
+pref(dom.webcomponents.enabled,true) fails-if(stylo||styloVsGecko) == update-dist-node-descendants-1.html update-dist-node-descendants-1-ref.html
+pref(dom.webcomponents.enabled,true) fails-if(stylo||styloVsGecko) == input-transition-1.html input-transition-1-ref.html
+pref(dom.webcomponents.enabled,true) fails-if(stylo||styloVsGecko) == dynamic-insertion-point-distribution-1.html dynamic-insertion-point-distribution-1-ref.html
+pref(dom.webcomponents.enabled,true) fails-if(stylo||styloVsGecko) == dynamic-insertion-point-distribution-2.html dynamic-insertion-point-distribution-2-ref.html
+pref(dom.webcomponents.enabled,true) fails-if(stylo||styloVsGecko) == remove-append-shadow-host-1.html remove-append-shadow-host-1-ref.html
--- a/layout/reftests/webcomponents/update-dist-node-descendants-1.html
+++ b/layout/reftests/webcomponents/update-dist-node-descendants-1.html
@@ -1,21 +1,28 @@
<!DOCTYPE HTML>
<html class="reftest-wait">
<head>
</head>
<body>
<div id="outer"><span id="distnode">text</span></div>
<script>
-var shadowRoot = document.getElementById('outer').createShadowRoot();
-shadowRoot.innerHTML = '<div><content></content></div>';
+function run() {
+ var shadowRoot = document.getElementById('outer').createShadowRoot();
+ shadowRoot.innerHTML = '<div><content></content></div>';
+}
function tweak() {
var distNode = document.getElementById("distnode");
distNode.textContent = "Hello World";
document.documentElement.removeAttribute("class");
}
-window.addEventListener("MozReftestInvalidate", tweak);
+if (document.body.createShadowRoot) {
+ run();
+ window.addEventListener("MozReftestInvalidate", tweak);
+} else {
+ document.documentElement.className = "";
+}
</script>
</body>
</html>