diff options
| author | Matt A. Tobin <email@mattatobin.com> | 2020-04-17 07:10:54 -0400 |
|---|---|---|
| committer | Matt A. Tobin <email@mattatobin.com> | 2020-04-17 07:10:54 -0400 |
| commit | e31ed5b07466d4a579fe4b025f97c971003fbc3f (patch) | |
| tree | abd621b87578770973591fd03608993334f6af64 /layout | |
| parent | 8beb65dd501cbdcfd6a793027b5de2a1fdfc7149 (diff) | |
| download | uxp-e31ed5b07466d4a579fe4b025f97c971003fbc3f.tar.gz | |
Bug 1409975 - Implement node distribution for shadow tree slots
* Implementation for assignedNodes
* Include slots in the flat tree
* Fix event get-the-parent algorithm for a node
* Update and add reftests for Shadow DOM v1
* Update web platform tests expectations
Tag #1375
Diffstat (limited to 'layout')
31 files changed, 214 insertions, 140 deletions
diff --git a/layout/reftests/webcomponents/basic-insertion-point-1-ref.html b/layout/reftests/webcomponents/basic-insertion-point-1-ref.html deleted file mode 100644 index 16f6afb288..0000000000 --- a/layout/reftests/webcomponents/basic-insertion-point-1-ref.html +++ /dev/null @@ -1,8 +0,0 @@ -<!DOCTYPE HTML> -<html> -<body> -<div> - <div style="border: 10px solid green">Hello</div> -</div> -</body> -</html> diff --git a/layout/reftests/webcomponents/basic-insertion-point-1.html b/layout/reftests/webcomponents/basic-insertion-point-1.html deleted file mode 100644 index 727175ef35..0000000000 --- a/layout/reftests/webcomponents/basic-insertion-point-1.html +++ /dev/null @@ -1,21 +0,0 @@ -<!DOCTYPE HTML> -<html> -<head> - <script> - function tweak() { - // div with style "border: 10px solid green" - var shadowDiv = document.createElement("div"); - shadowDiv.style.border = "10px solid green"; - - var insertionPoint = document.createElement("content"); - shadowDiv.appendChild(insertionPoint); - - var shadowRoot = document.getElementById('outer').createShadowRoot(); - shadowRoot.appendChild(shadowDiv); - } - </script> -</head> -<body onload="tweak()"> -<div id="outer">Hello</div> -</body> -</html> diff --git a/layout/reftests/webcomponents/basic-insertion-point-2-ref.html b/layout/reftests/webcomponents/basic-insertion-point-2-ref.html deleted file mode 100644 index 5e92137752..0000000000 --- a/layout/reftests/webcomponents/basic-insertion-point-2-ref.html +++ /dev/null @@ -1,11 +0,0 @@ -<!DOCTYPE HTML> -<html> -<body> -<div> - <div style="border: 10px solid green"> - <span style="background-color: purple">Hello</span> - <span style="background-color: orange">World</span> - </div> -</div> -</body> -</html> diff --git a/layout/reftests/webcomponents/basic-insertion-point-2.html b/layout/reftests/webcomponents/basic-insertion-point-2.html deleted file mode 100644 index 595edb4712..0000000000 --- a/layout/reftests/webcomponents/basic-insertion-point-2.html +++ /dev/null @@ -1,24 +0,0 @@ -<!DOCTYPE HTML> -<html> -<head> - <script> - function tweak() { - // div with style "border: 10px solid green" - var shadowDiv = document.createElement("div"); - shadowDiv.style.border = "10px solid green"; - - var insertionPoint = document.createElement("content"); - shadowDiv.appendChild(insertionPoint); - - var shadowRoot = document.getElementById('outer').createShadowRoot(); - shadowRoot.appendChild(shadowDiv); - } - </script> -</head> -<body onload="tweak()"> -<div id="outer"> - <span style="background-color: purple">Hello</span> - <span style="background-color: orange">World</span> -</div> -</body> -</html> diff --git a/layout/reftests/webcomponents/basic-shadow-1.html b/layout/reftests/webcomponents/basic-shadow-1.html index 944a594d27..8949dfc6de 100644 --- a/layout/reftests/webcomponents/basic-shadow-1.html +++ b/layout/reftests/webcomponents/basic-shadow-1.html @@ -9,7 +9,7 @@ shadowDiv.style.height = "100px"; shadowDiv.style.backgroundColor = "green"; - var shadowRoot = document.getElementById('outer').createShadowRoot(); + var shadowRoot = document.getElementById('outer').attachShadow({mode: 'open'}); shadowRoot.appendChild(shadowDiv); } </script> diff --git a/layout/reftests/webcomponents/basic-shadow-2.html b/layout/reftests/webcomponents/basic-shadow-2.html index 587c47221a..8e066997dc 100644 --- a/layout/reftests/webcomponents/basic-shadow-2.html +++ b/layout/reftests/webcomponents/basic-shadow-2.html @@ -6,7 +6,7 @@ var shadowDiv = document.createElement("div"); shadowDiv.style.border = "10px solid green"; - var shadowRoot = document.getElementById('outer').createShadowRoot(); + var shadowRoot = document.getElementById('outer').attachShadow({mode: 'open'}); shadowRoot.appendChild(shadowDiv); var orangeDiv = document.createElement("div"); diff --git a/layout/reftests/webcomponents/basic-shadow-3.html b/layout/reftests/webcomponents/basic-shadow-3.html index 2ae53b5a9e..3226c4baa6 100644 --- a/layout/reftests/webcomponents/basic-shadow-3.html +++ b/layout/reftests/webcomponents/basic-shadow-3.html @@ -6,7 +6,7 @@ var shadowDiv = document.createElement("div"); shadowDiv.style.border = "10px solid green"; - var shadowRoot = document.getElementById('outer').createShadowRoot(); + var shadowRoot = document.getElementById('outer').attachShadow({mode: 'open'}); shadowRoot.appendChild(shadowDiv); var orangeDiv = document.createElement("div"); diff --git a/layout/reftests/webcomponents/basic-shadow-4.html b/layout/reftests/webcomponents/basic-shadow-4.html index 70f91773e4..39dc51a9e5 100644 --- a/layout/reftests/webcomponents/basic-shadow-4.html +++ b/layout/reftests/webcomponents/basic-shadow-4.html @@ -6,7 +6,7 @@ var shadowDiv = document.createElement("div"); shadowDiv.style.border = "10px solid green"; - var shadowRoot = document.getElementById('outer').createShadowRoot(); + var shadowRoot = document.getElementById('outer').attachShadow({mode: 'open'}); shadowRoot.appendChild(shadowDiv); var orangeDiv = document.createElement("div"); diff --git a/layout/reftests/webcomponents/basic-slot-1-ref.html b/layout/reftests/webcomponents/basic-slot-1-ref.html new file mode 100644 index 0000000000..4f74184983 --- /dev/null +++ b/layout/reftests/webcomponents/basic-slot-1-ref.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<html> + <head> + <style> + body { color: green; } + </style> + </head> + <body> + This text should be green + </body> +</html> diff --git a/layout/reftests/webcomponents/basic-slot-1.html b/layout/reftests/webcomponents/basic-slot-1.html new file mode 100644 index 0000000000..b31f4c1c36 --- /dev/null +++ b/layout/reftests/webcomponents/basic-slot-1.html @@ -0,0 +1,6 @@ +<!DOCTYPE HTML> +<html> + <body> + <slot style="color: green">This text should be green</slot> + </body> +</html> diff --git a/layout/reftests/webcomponents/basic-slot-2-ref.html b/layout/reftests/webcomponents/basic-slot-2-ref.html new file mode 100644 index 0000000000..d4d1b8c066 --- /dev/null +++ b/layout/reftests/webcomponents/basic-slot-2-ref.html @@ -0,0 +1,16 @@ +<!DOCTYPE HTML> +<html> +<head> + <style> + div { + width: 100px; + height: 100px; + background: green; + } + </style> +</head> +<body> + <p>There should be a green box below.</p> + <div></div> +</body> +</html> diff --git a/layout/reftests/webcomponents/basic-slot-2.html b/layout/reftests/webcomponents/basic-slot-2.html new file mode 100644 index 0000000000..3754ace20c --- /dev/null +++ b/layout/reftests/webcomponents/basic-slot-2.html @@ -0,0 +1,7 @@ +<!DOCTYPE HTML> +<html> + <body> + <p>There should be a green box below.</p> + <slot style="display: block; width: 100px; height: 100px; background: green;"></slot> + </body> +</html> diff --git a/layout/reftests/webcomponents/basic-slot-3-ref.html b/layout/reftests/webcomponents/basic-slot-3-ref.html new file mode 100644 index 0000000000..54be54848d --- /dev/null +++ b/layout/reftests/webcomponents/basic-slot-3-ref.html @@ -0,0 +1,8 @@ +<!DOCTYPE HTML> +<html> +<body> +<div> + <div style="color: green">This text should be green</div> +</div> +</body> +</html> diff --git a/layout/reftests/webcomponents/basic-slot-3.html b/layout/reftests/webcomponents/basic-slot-3.html new file mode 100644 index 0000000000..c00483fe2f --- /dev/null +++ b/layout/reftests/webcomponents/basic-slot-3.html @@ -0,0 +1,18 @@ +<!DOCTYPE HTML> +<html> +<head> + <script> + function tweak() { + var slot = document.createElement("slot"); + slot.style.color = "green"; + + var shadowRoot = + document.getElementById('outer').attachShadow({mode: 'open'}); + shadowRoot.appendChild(slot); + } + </script> +</head> +<body onload="tweak()"> +<div id="outer">This text should be green</div> +</body> +</html> diff --git a/layout/reftests/webcomponents/basic-slot-4.html b/layout/reftests/webcomponents/basic-slot-4.html new file mode 100644 index 0000000000..496a926514 --- /dev/null +++ b/layout/reftests/webcomponents/basic-slot-4.html @@ -0,0 +1,20 @@ +<!DOCTYPE HTML> +<html> +<head> + <script> + function tweak() { + var slot = document.createElement("slot"); + // The border shouldn't be visible, due to display: contents. + slot.style.border = "1px solid red"; + slot.style.color = "green"; + + var shadowRoot = + document.getElementById('outer').attachShadow({mode: 'open'}); + shadowRoot.appendChild(slot); + } + </script> +</head> +<body onload="tweak()"> +<div id="outer">This text should be green</div> +</body> +</html> diff --git a/layout/reftests/webcomponents/dynamic-insertion-point-distribution-1.html b/layout/reftests/webcomponents/dynamic-insertion-point-distribution-1.html index c57f72b379..aefe84f252 100644 --- a/layout/reftests/webcomponents/dynamic-insertion-point-distribution-1.html +++ b/layout/reftests/webcomponents/dynamic-insertion-point-distribution-1.html @@ -5,9 +5,11 @@ <body> <div id="host"></div> <script> - var host = document.getElementById("host"); - var root = host.createShadowRoot(); - root.innerHTML = 'a <content></content> c'; + var host, root; + + host = document.getElementById("host"); + root = host.attachShadow({mode: 'open'}); + root.innerHTML = 'a <slot></slot> c'; function tweak() { var span = document.createElement("span"); @@ -19,7 +21,7 @@ document.documentElement.removeAttribute("class"); } - window.addEventListener("MozReftestInvalidate", tweak, false); + window.addEventListener("MozReftestInvalidate", tweak); </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 29a850e90f..d753af09cc 100644 --- a/layout/reftests/webcomponents/dynamic-insertion-point-distribution-2.html +++ b/layout/reftests/webcomponents/dynamic-insertion-point-distribution-2.html @@ -5,8 +5,10 @@ <body> <div id="host"></div> <script> - var host = document.getElementById("host"); - var root = host.createShadowRoot(); + var host, root; + + host = document.getElementById("host"); + root = host.attachShadow({mode: 'open'}); root.innerHTML = "<span>a</span>"; function tweak() { @@ -20,7 +22,7 @@ document.documentElement.removeAttribute("class"); } - window.addEventListener("MozReftestInvalidate", tweak, false); + window.addEventListener("MozReftestInvalidate", tweak); </script> </body> </html> diff --git a/layout/reftests/webcomponents/dynamic-shadow-element-1-ref.html b/layout/reftests/webcomponents/dynamic-shadow-element-1-ref.html deleted file mode 100644 index a3b5150f65..0000000000 --- a/layout/reftests/webcomponents/dynamic-shadow-element-1-ref.html +++ /dev/null @@ -1,10 +0,0 @@ -<!DOCTYPE HTML> -<html> -<head> -</head> -<body> -<div> - <div style="background-color: green"><span>Hello</span><span> </span><span>World</span></div> -</div> -</body> -</html> diff --git a/layout/reftests/webcomponents/dynamic-shadow-element-1.html b/layout/reftests/webcomponents/dynamic-shadow-element-1.html deleted file mode 100644 index 0142164a1a..0000000000 --- a/layout/reftests/webcomponents/dynamic-shadow-element-1.html +++ /dev/null @@ -1,23 +0,0 @@ -<!DOCTYPE HTML> -<html> -<head> - <script> - function tweak() { - var oldestShadow = document.getElementById('outer').createShadowRoot(); - oldestShadow.innerHTML = 'Hello'; - - var olderShadow = document.getElementById('outer').createShadowRoot(); - - var youngerShadow = document.getElementById('outer').createShadowRoot(); - youngerShadow.innerHTML = '<div style="background-color:green"><shadow></shadow></div>'; - - olderShadow.innerHTML = '<shadow></shadow> World'; - } - </script> -</head> -<body onload="tweak()"> -<div id="outer"> - <div style="width:300px; height:100px; background-color:red;"></div> -</div> -</body> -</html> diff --git a/layout/reftests/webcomponents/fallback-content-1.html b/layout/reftests/webcomponents/fallback-content-1.html index ac3b5d02a4..0bcd2abbd3 100644 --- a/layout/reftests/webcomponents/fallback-content-1.html +++ b/layout/reftests/webcomponents/fallback-content-1.html @@ -8,13 +8,13 @@ shadowDiv.style.border = "10px solid green"; // Insertion point will match nothing and use fallback content. - var insertionPoint = document.createElement("content"); - shadowDiv.appendChild(insertionPoint); + var slot = document.createElement("slot"); + shadowDiv.appendChild(slot); // Append three nodes as children to use as fallback content. - insertionPoint.innerHTML = '<span style="background-color: orange">Hello</span> <span style="background-color: green">World</span>'; + slot.innerHTML = '<span style="background-color: orange">Hello</span> <span style="background-color: green">World</span>'; - var shadowRoot = document.getElementById('outer').createShadowRoot(); + var shadowRoot = document.getElementById('outer').attachShadow({mode: 'open'}); shadowRoot.appendChild(shadowDiv); } </script> diff --git a/layout/reftests/webcomponents/input-transition-1.html b/layout/reftests/webcomponents/input-transition-1.html index ede0fa40bb..c11444d05b 100644 --- a/layout/reftests/webcomponents/input-transition-1.html +++ b/layout/reftests/webcomponents/input-transition-1.html @@ -5,19 +5,21 @@ <body> <div id="host"></div> <script> - var host = document.getElementById("host"); - var root = host.createShadowRoot(); + 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 tweak() { - var el = root.getElementById("one"); - el.checked = true; - el.nextSibling.addEventListener("transitionend", function() { - document.documentElement.removeAttribute("class"); - }, false); + 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, false); + window.addEventListener("MozReftestInvalidate", tweak); </script> </body> </html> diff --git a/layout/reftests/webcomponents/nested-insertion-point-1.html b/layout/reftests/webcomponents/nested-insertion-point-1.html index 66892029ab..3d0d92f0dc 100644 --- a/layout/reftests/webcomponents/nested-insertion-point-1.html +++ b/layout/reftests/webcomponents/nested-insertion-point-1.html @@ -7,19 +7,20 @@ var outerShadow = document.createElement("div"); outerShadow.style.border = "10px solid green"; - var outerInsertionPoint = document.createElement("content"); + var outerInsertionPoint = document.createElement("slot"); outerShadow.appendChild(outerInsertionPoint); // div with style "border: 10px solid orange" var innerShadow = document.createElement("div"); innerShadow.style.border = "10px solid orange"; - var innerInsertionPoint = document.createElement("content"); - innerShadow.appendChild(innerInsertionPoint); + var slot = document.createElement("slot"); + innerShadow.appendChild(slot); - outerShadow.createShadowRoot().appendChild(innerShadow); + outerShadow.attachShadow({mode: 'open'}).appendChild(innerShadow); - var shadowRoot = document.getElementById('outer').createShadowRoot(); + var shadowRoot = + document.getElementById('outer').attachShadow({mode: 'open'}); shadowRoot.appendChild(outerShadow); } </script> diff --git a/layout/reftests/webcomponents/reframe-shadow-child-1.html b/layout/reftests/webcomponents/reframe-shadow-child-1.html new file mode 100644 index 0000000000..d953beb6d7 --- /dev/null +++ b/layout/reftests/webcomponents/reframe-shadow-child-1.html @@ -0,0 +1,16 @@ +<!doctype html> +<template id="tmpl"> + <div style="display: table"> + Some text + <span style="display: table-cell">something</span> + More text + </div> +</template> +<div id="host"></div> +<script> + let shadowRoot = document.getElementById("host").attachShadow({mode: 'open'}); + let tmpl = document.getElementById("tmpl"); + shadowRoot.appendChild(document.importNode(tmpl.content, true)); + document.body.offsetTop; + shadowRoot.firstElementChild.querySelector("span").remove(); +</script> diff --git a/layout/reftests/webcomponents/reframe-shadow-child-2.html b/layout/reftests/webcomponents/reframe-shadow-child-2.html new file mode 100644 index 0000000000..0ebbe7433d --- /dev/null +++ b/layout/reftests/webcomponents/reframe-shadow-child-2.html @@ -0,0 +1,15 @@ +<!doctype html> +<template id="tmpl"> + <div style="display: block"> + Some text + More text + </div> +</template> +<div id="host"></div> +<script> + let shadowRoot = document.getElementById("host").attachShadow({mode: 'open'}); + let tmpl = document.getElementById("tmpl"); + shadowRoot.appendChild(document.importNode(tmpl.content, true)); + document.body.offsetTop; + shadowRoot.firstElementChild.style.display = "table"; +</script> diff --git a/layout/reftests/webcomponents/reftest.list b/layout/reftests/webcomponents/reftest.list index 280cd204e3..6afbc27204 100644 --- a/layout/reftests/webcomponents/reftest.list +++ b/layout/reftests/webcomponents/reftest.list @@ -3,8 +3,6 @@ pref(dom.webcomponents.enabled,true) == basic-shadow-1.html basic-shadow-1-ref.h 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 -#bug 1421542 pref(dom.webcomponents.enabled,true) == basic-insertion-point-1.html basic-insertion-point-1-ref.html -#bug 1421542 pref(dom.webcomponents.enabled,true) == basic-insertion-point-2.html basic-insertion-point-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 #bug 1421542 pref(dom.webcomponents.enabled,true) == nested-insertion-point-1.html nested-insertion-point-1-ref.html @@ -13,3 +11,9 @@ pref(dom.webcomponents.enabled,true) == input-transition-1.html input-transition #bug 1421542 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) == basic-slot-1.html basic-slot-1-ref.html +pref(dom.webcomponents.enabled,true) == basic-slot-2.html basic-slot-2-ref.html +pref(dom.webcomponents.enabled,true) == basic-slot-3.html basic-slot-3-ref.html +pref(dom.webcomponents.enabled,true) == basic-slot-4.html basic-slot-3-ref.html +pref(dom.webcomponents.enabled,true) == basic-slot-5.html basic-slot-5-ref.html +pref(dom.webcomponents.enabled,true) == basic-slot-6.html basic-slot-6-ref.html diff --git a/layout/reftests/webcomponents/remove-append-shadow-host-1.html b/layout/reftests/webcomponents/remove-append-shadow-host-1.html index 85161565e0..1a752eba6c 100644 --- a/layout/reftests/webcomponents/remove-append-shadow-host-1.html +++ b/layout/reftests/webcomponents/remove-append-shadow-host-1.html @@ -6,7 +6,7 @@ <div id="container"><div id="host"></div></div> <script> var host = document.getElementById("host"); - var root = host.createShadowRoot(); + var root = host.attachShadow({mode: 'open'}); root.innerHTML = 'inside shadow DOM'; var container = document.getElementById("container"); diff --git a/layout/reftests/webcomponents/remove-insertion-point-1.html b/layout/reftests/webcomponents/remove-insertion-point-1.html index 195673ca8d..1b7588daf6 100644 --- a/layout/reftests/webcomponents/remove-insertion-point-1.html +++ b/layout/reftests/webcomponents/remove-insertion-point-1.html @@ -8,15 +8,15 @@ shadowDiv.style.border = "10px solid green"; // Insertion point will match nothing and use fallback content. - var insertionPoint = document.createElement("content"); - shadowDiv.appendChild(insertionPoint); + var slot = document.createElement("slot"); + shadowDiv.appendChild(slot); - var shadowRoot = document.getElementById('outer').createShadowRoot(); + var shadowRoot = document.getElementById('outer').attachShadow({mode: 'open'}); shadowRoot.appendChild(shadowDiv); // Remove the insertion point from the ShadowRoot, "Hello" should no // longer be rendered. - shadowDiv.removeChild(insertionPoint); + shadowDiv.removeChild(slot); } </script> </head> diff --git a/layout/reftests/webcomponents/style-sharing-across-shadow.html b/layout/reftests/webcomponents/style-sharing-across-shadow.html new file mode 100644 index 0000000000..b41cf74796 --- /dev/null +++ b/layout/reftests/webcomponents/style-sharing-across-shadow.html @@ -0,0 +1,22 @@ +<!doctype html> +<style> + div { display: contents } +</style> +<div></div> +<div></div> +<script> + let divs = document.querySelectorAll('div'); + divs[0].attachShadow({mode: 'open'}).innerHTML = ` + <style> + * { color: green; } + </style> + <span>Should be green</span> + `; + divs[1].attachShadow({mode: 'open'}).innerHTML = ` + <style> + * { color: initial; } + [foo] { } + </style> + <span>Should not be green</span> + `; +</script> diff --git a/layout/reftests/webcomponents/style-sharing.html b/layout/reftests/webcomponents/style-sharing.html new file mode 100644 index 0000000000..0a1e3c95c4 --- /dev/null +++ b/layout/reftests/webcomponents/style-sharing.html @@ -0,0 +1,14 @@ +<!doctype html> +<div id="host"></div> +<script> + let root = host.attachShadow({mode: 'open'}); + root.innerHTML = ` + <style> + #test { + color: green; + } + </style> + <span id="test">Should be green</span> + <span id="test2">Should not be green</span> + `; +</script> diff --git a/layout/reftests/webcomponents/update-dist-node-descendants-1.html b/layout/reftests/webcomponents/update-dist-node-descendants-1.html index e2dd4ebb7b..003c233944 100644 --- a/layout/reftests/webcomponents/update-dist-node-descendants-1.html +++ b/layout/reftests/webcomponents/update-dist-node-descendants-1.html @@ -5,17 +5,18 @@ <body> <div id="outer"><span id="distnode">text</span></div> <script> -var shadowRoot = document.getElementById('outer').createShadowRoot(); -shadowRoot.innerHTML = '<div><content></content></div>'; -function tweak() { - var distNode = document.getElementById("distnode"); - distNode.textContent = "Hello World"; + var shadowRoot = document.getElementById('outer').attachShadow({mode: 'open'}); + shadowRoot.innerHTML = '<div><slot></slot></div>'; - document.documentElement.removeAttribute("class"); -} + function tweak() { + var distNode = document.getElementById("distnode"); + distNode.textContent = "Hello World"; -window.addEventListener("MozReftestInvalidate", tweak); + document.documentElement.removeAttribute("class"); + } + + window.addEventListener("MozReftestInvalidate", tweak); </script> </body> </html> diff --git a/layout/style/res/ua.css b/layout/style/res/ua.css index 931b32eb86..504f5dc570 100644 --- a/layout/style/res/ua.css +++ b/layout/style/res/ua.css @@ -471,3 +471,9 @@ div:-moz-native-anonymous.moz-custom-content-container { width: 100%; height: 100%; } + +/* Shadow DOM v1 + * https://drafts.csswg.org/css-scoping/#slots-in-shadow-tree */ +slot { + display: contents; +}
\ No newline at end of file |