Issue #1375 - Fix IsWebComponentsEnabled checks

10 files changed, 122 insertions, 69 deletions

diff --git a/layout/reftests/bugs/1066554-1.html b/layout/reftests/bugs/1066554-1.html
index bb0a97f96..f4df207a1 100644
--- a/layout/reftests/bugs/1066554-1.html
+++ b/layout/reftests/bugs/1066554-1.html
@@ -7,15 +7,17 @@
   <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, false);
diff --git a/layout/reftests/bugs/reftest.list b/layout/reftests/bugs/reftest.list
index d6f58a9c2..84d7f188f 100644
--- a/layout/reftests/bugs/reftest.list
+++ b/layout/reftests/bugs/reftest.list
@@ -1851,7 +1851,7 @@ test-pref(layout.css.grid.enabled,true) == 1053035-1-grid.html 1053035-1-ref.htm
 == 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
 == 1078262-1.html about:blank
 test-pref(layout.testing.overlay-scrollbars.always-visible,false) == 1081072-1.html 1081072-1-ref.html
diff --git a/layout/reftests/css-display/display-contents-shadow-dom-1.html b/layout/reftests/css-display/display-contents-shadow-dom-1.html
index 40f67baf5..6c0f297f9 100644
--- a/layout/reftests/css-display/display-contents-shadow-dom-1.html
+++ b/layout/reftests/css-display/display-contents-shadow-dom-1.html
@@ -74,36 +74,40 @@ div.after::after {content: " Y";}
         return e;
       }
 
-      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>';
-      // TODO(bug 1021572?) shadow("hostY").innerHTML = '<content select="b"><style scoped>:scope{color:green}</style></content>';
+      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>';
+      }
 
       function tweak() {
         document.body.offsetHeight;
@@ -224,7 +228,12 @@ div.after::after {content: " Y";}
           },0);
       }
 
-      window.addEventListener("MozReftestInvalidate", tweak, false);
+      if (document.body.createShadowRoot) {
+        run();
+        window.addEventListener("MozReftestInvalidate", tweak, false);
+      } else {
+        document.documentElement.removeAttribute("class");
+      }
     </script>
   </body>
 </html>
diff --git a/layout/reftests/forms/legend/shadow-dom.html b/layout/reftests/forms/legend/shadow-dom.html
index ad7babcf7..0f0a53665 100644
--- a/layout/reftests/forms/legend/shadow-dom.html
+++ b/layout/reftests/forms/legend/shadow-dom.html
@@ -48,17 +48,19 @@ div.after::after {content: " Y";}
         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;
@@ -105,7 +107,12 @@ div.after::after {content: " Y";}
           },0);
       }
 
-      window.addEventListener("MozReftestInvalidate", tweak, false);
+      if (document.body.createShadowRoot) {
+        run();
+        window.addEventListener("MozReftestInvalidate", tweak, false);
+      } else {
+        document.documentElement.removeAttribute("class");
+      }
     </script>
   </body>
 </html>
diff --git a/layout/reftests/mathml/shadow-dom-1.html b/layout/reftests/mathml/shadow-dom-1.html
index 547253a3c..bbf27069f 100644
--- a/layout/reftests/mathml/shadow-dom-1.html
+++ b/layout/reftests/mathml/shadow-dom-1.html
@@ -7,9 +7,11 @@
   <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, false);
diff --git a/layout/reftests/webcomponents/cross-tree-selection-1.html b/layout/reftests/webcomponents/cross-tree-selection-1.html
index 1e4f02747..01e7317f2 100644
--- a/layout/reftests/webcomponents/cross-tree-selection-1.html
+++ b/layout/reftests/webcomponents/cross-tree-selection-1.html
@@ -3,6 +3,11 @@
 <head>
   <script>
     function tweak() {
+      if (!document.body.createShadowRoot) {
+        document.documentElement.className = "";
+        return;
+      }
+
       var host = document.getElementById("host");
       var shadow = host.createShadowRoot();
 
diff --git a/layout/reftests/webcomponents/dynamic-insertion-point-distribution-1.html b/layout/reftests/webcomponents/dynamic-insertion-point-distribution-1.html
index aefe84f25..8919a9c6a 100644
--- a/layout/reftests/webcomponents/dynamic-insertion-point-distribution-1.html
+++ b/layout/reftests/webcomponents/dynamic-insertion-point-distribution-1.html
@@ -7,9 +7,11 @@
     <script>
       var host, root;
 
-      host = document.getElementById("host");
-      root = host.attachShadow({mode: 'open'});
-      root.innerHTML = 'a <slot></slot> c';
+      function run() {
+        host = document.getElementById("host");
+        root = host.createShadowRoot();
+        root.innerHTML = 'a <content></content> c';
+      }
 
       function tweak() {
         var span = document.createElement("span");
@@ -21,7 +23,12 @@
         document.documentElement.removeAttribute("class");
       }
 
-      window.addEventListener("MozReftestInvalidate", tweak);
+      if (document.body.createShadowRoot) {
+        run();
+        window.addEventListener("MozReftestInvalidate", tweak, false);
+      } else {
+        document.documentElement.className = "";
+      }
     </script>
   </body>
 </html>
diff --git a/layout/reftests/webcomponents/dynamic-insertion-point-distribution-2.html b/layout/reftests/webcomponents/dynamic-insertion-point-distribution-2.html
index d753af09c..c58b9cfbd 100644
--- a/layout/reftests/webcomponents/dynamic-insertion-point-distribution-2.html
+++ b/layout/reftests/webcomponents/dynamic-insertion-point-distribution-2.html
@@ -7,9 +7,11 @@
     <script>
       var host, root;
 
-      host = document.getElementById("host");
-      root = host.attachShadow({mode: 'open'});
-      root.innerHTML = "<span>a</span>";
+      function run() {
+        host = document.getElementById("host");
+        root = host.createShadowRoot();
+        root.innerHTML = "<span>a</span>";
+      }
 
       function tweak() {
         var span = document.createElement("span");
@@ -22,7 +24,12 @@
         document.documentElement.removeAttribute("class");
       }
 
-      window.addEventListener("MozReftestInvalidate", tweak);
+      if (document.body.createShadowRoot) {
+        run();
+        window.addEventListener("MozReftestInvalidate", tweak);
+      } else {
+        document.documentElement.className = "";
+      }
     </script>
   </body>
 </html>
diff --git a/layout/reftests/webcomponents/input-transition-1.html b/layout/reftests/webcomponents/input-transition-1.html
index c11444d05..a4be5271b 100644
--- a/layout/reftests/webcomponents/input-transition-1.html
+++ b/layout/reftests/webcomponents/input-transition-1.html
@@ -7,9 +7,11 @@
     <script>
       var host, root;
 
-      host = document.getElementById("host");
-      root = host.attachShadow({mode: 'open'});
-      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 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");
@@ -19,7 +21,12 @@
         });
       }
 
-      window.addEventListener("MozReftestInvalidate", tweak);
+      if (document.body.createShadowRoot) {
+        run();
+        window.addEventListener("MozReftestInvalidate", tweak);
+      } else {
+        document.documentElement.className = "";
+      }
     </script>
   </body>
 </html>
diff --git a/layout/reftests/webcomponents/update-dist-node-descendants-1.html b/layout/reftests/webcomponents/update-dist-node-descendants-1.html
index 003c23394..3ba96594b 100644
--- a/layout/reftests/webcomponents/update-dist-node-descendants-1.html
+++ b/layout/reftests/webcomponents/update-dist-node-descendants-1.html
@@ -6,8 +6,10 @@
 <div id="outer"><span id="distnode">text</span></div>
 <script>
 
-  var shadowRoot = document.getElementById('outer').attachShadow({mode: 'open'});
-  shadowRoot.innerHTML = '<div><slot></slot></div>';
+function run() {
+  var shadowRoot = document.getElementById('outer').createShadowRoot();
+  shadowRoot.innerHTML = '<div><content></content></div>';
+}
 
   function tweak() {
     var distNode = document.getElementById("distnode");
@@ -16,7 +18,12 @@
     document.documentElement.removeAttribute("class");
 	}
 
+if (document.body.createShadowRoot) {
+  run();
   window.addEventListener("MozReftestInvalidate", tweak);
+} else {
+  document.documentElement.className = "";
+}
 </script>
 </body>
 </html>