diff options
| author | Matt A. Tobin <mattatobin@localhost.localdomain> | 2018-02-02 04:16:08 -0500 |
|---|---|---|
| committer | Matt A. Tobin <mattatobin@localhost.localdomain> | 2018-02-02 04:16:08 -0500 |
| commit | 5f8de423f190bbb79a62f804151bc24824fa32d8 (patch) | |
| tree | 10027f336435511475e392454359edea8e25895d /layout/reftests/webcomponents | |
| parent | 49ee0794b5d912db1f95dce6eb52d781dc210db5 (diff) | |
| download | UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.gz UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.lz UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.xz UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.zip | |
Add m-esr52 at 52.6.0
Diffstat (limited to 'layout/reftests/webcomponents')
42 files changed, 687 insertions, 0 deletions
diff --git a/layout/reftests/webcomponents/adjacent-insertion-points-1-ref.html b/layout/reftests/webcomponents/adjacent-insertion-points-1-ref.html new file mode 100644 index 000000000..2c1f4e341 --- /dev/null +++ b/layout/reftests/webcomponents/adjacent-insertion-points-1-ref.html @@ -0,0 +1,6 @@ +<!DOCTYPE HTML> +<html> +<body> +<div><span>Hello</span><span>World</span></div> +</body> +</html> diff --git a/layout/reftests/webcomponents/adjacent-insertion-points-1.html b/layout/reftests/webcomponents/adjacent-insertion-points-1.html new file mode 100644 index 000000000..a8c6f983d --- /dev/null +++ b/layout/reftests/webcomponents/adjacent-insertion-points-1.html @@ -0,0 +1,17 @@ +<!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> diff --git a/layout/reftests/webcomponents/adjacent-insertion-points-2-ref.html b/layout/reftests/webcomponents/adjacent-insertion-points-2-ref.html new file mode 100644 index 000000000..2c1f4e341 --- /dev/null +++ b/layout/reftests/webcomponents/adjacent-insertion-points-2-ref.html @@ -0,0 +1,6 @@ +<!DOCTYPE HTML> +<html> +<body> +<div><span>Hello</span><span>World</span></div> +</body> +</html> diff --git a/layout/reftests/webcomponents/adjacent-insertion-points-2.html b/layout/reftests/webcomponents/adjacent-insertion-points-2.html new file mode 100644 index 000000000..f90cb206b --- /dev/null +++ b/layout/reftests/webcomponents/adjacent-insertion-points-2.html @@ -0,0 +1,17 @@ +<!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> diff --git a/layout/reftests/webcomponents/basic-insertion-point-1-ref.html b/layout/reftests/webcomponents/basic-insertion-point-1-ref.html new file mode 100644 index 000000000..16f6afb28 --- /dev/null +++ b/layout/reftests/webcomponents/basic-insertion-point-1-ref.html @@ -0,0 +1,8 @@ +<!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 new file mode 100644 index 000000000..727175ef3 --- /dev/null +++ b/layout/reftests/webcomponents/basic-insertion-point-1.html @@ -0,0 +1,21 @@ +<!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 new file mode 100644 index 000000000..5e9213775 --- /dev/null +++ b/layout/reftests/webcomponents/basic-insertion-point-2-ref.html @@ -0,0 +1,11 @@ +<!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 new file mode 100644 index 000000000..595edb471 --- /dev/null +++ b/layout/reftests/webcomponents/basic-insertion-point-2.html @@ -0,0 +1,24 @@ +<!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-ref.html b/layout/reftests/webcomponents/basic-shadow-1-ref.html new file mode 100644 index 000000000..0d498d8c5 --- /dev/null +++ b/layout/reftests/webcomponents/basic-shadow-1-ref.html @@ -0,0 +1,8 @@ +<!DOCTYPE HTML> +<html> +<body> +<div> + <div style="width:300px; height:100px; background-color:green;"></div> +</div> +</body> +</html> diff --git a/layout/reftests/webcomponents/basic-shadow-1.html b/layout/reftests/webcomponents/basic-shadow-1.html new file mode 100644 index 000000000..944a594d2 --- /dev/null +++ b/layout/reftests/webcomponents/basic-shadow-1.html @@ -0,0 +1,22 @@ +<!DOCTYPE HTML> +<html> +<head> + <script> + function tweak() { + // div with style "width:300px; height:100px; background-color:green" + var shadowDiv = document.createElement("div"); + shadowDiv.style.width = "300px"; + shadowDiv.style.height = "100px"; + shadowDiv.style.backgroundColor = "green"; + + var shadowRoot = document.getElementById('outer').createShadowRoot(); + shadowRoot.appendChild(shadowDiv); + } + </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/basic-shadow-2-ref.html b/layout/reftests/webcomponents/basic-shadow-2-ref.html new file mode 100644 index 000000000..74c50f516 --- /dev/null +++ b/layout/reftests/webcomponents/basic-shadow-2-ref.html @@ -0,0 +1,11 @@ +<!DOCTYPE HTML> +<html> +<body> +<div> + <div style="border: 10px solid green"> + <div style="border: 10px solid orange"></div> + <div style="border: 10px solid purple"></div> + </div> +</div> +</body> +</html> diff --git a/layout/reftests/webcomponents/basic-shadow-2.html b/layout/reftests/webcomponents/basic-shadow-2.html new file mode 100644 index 000000000..587c47221 --- /dev/null +++ b/layout/reftests/webcomponents/basic-shadow-2.html @@ -0,0 +1,28 @@ +<!DOCTYPE HTML> +<html> +<head> + <script> + function tweak() { + var shadowDiv = document.createElement("div"); + shadowDiv.style.border = "10px solid green"; + + var shadowRoot = document.getElementById('outer').createShadowRoot(); + shadowRoot.appendChild(shadowDiv); + + var orangeDiv = document.createElement("div"); + orangeDiv.style.border = "10px solid orange"; + + var purpleDiv = document.createElement("div"); + purpleDiv.style.border = "10px solid purple"; + + shadowDiv.appendChild(purpleDiv); + shadowDiv.insertBefore(orangeDiv, purpleDiv); + } + </script> +</head> +<body onload="tweak()"> +<div id="outer"> + <div style="background-color:red;"></div> +</div> +</body> +</html> diff --git a/layout/reftests/webcomponents/basic-shadow-3-ref.html b/layout/reftests/webcomponents/basic-shadow-3-ref.html new file mode 100644 index 000000000..21b2075b7 --- /dev/null +++ b/layout/reftests/webcomponents/basic-shadow-3-ref.html @@ -0,0 +1,10 @@ +<!DOCTYPE HTML> +<html> +<body> +<div> + <div style="border: 10px solid green"> + <div style="border: 10px solid orange"></div> + </div> +</div> +</body> +</html> diff --git a/layout/reftests/webcomponents/basic-shadow-3.html b/layout/reftests/webcomponents/basic-shadow-3.html new file mode 100644 index 000000000..2ae53b5a9 --- /dev/null +++ b/layout/reftests/webcomponents/basic-shadow-3.html @@ -0,0 +1,29 @@ +<!DOCTYPE HTML> +<html> +<head> + <script> + function tweak() { + var shadowDiv = document.createElement("div"); + shadowDiv.style.border = "10px solid green"; + + var shadowRoot = document.getElementById('outer').createShadowRoot(); + shadowRoot.appendChild(shadowDiv); + + var orangeDiv = document.createElement("div"); + orangeDiv.style.border = "10px solid orange"; + + var purpleDiv = document.createElement("div"); + purpleDiv.style.border = "10px solid purple"; + + shadowDiv.appendChild(purpleDiv); + shadowDiv.insertBefore(orangeDiv, purpleDiv); + shadowDiv.removeChild(purpleDiv); + } + </script> +</head> +<body onload="tweak()"> +<div id="outer"> + <div style="background-color:red;"></div> +</div> +</body> +</html> diff --git a/layout/reftests/webcomponents/basic-shadow-4-ref.html b/layout/reftests/webcomponents/basic-shadow-4-ref.html new file mode 100644 index 000000000..e6dd40868 --- /dev/null +++ b/layout/reftests/webcomponents/basic-shadow-4-ref.html @@ -0,0 +1,10 @@ +<!DOCTYPE HTML> +<html> +<body> +<div> + <div style="border: 10px solid green"></div> + <div style="border: 10px solid orange"></div> + <div style="border: 10px solid purple"></div> +</div> +</body> +</html> diff --git a/layout/reftests/webcomponents/basic-shadow-4.html b/layout/reftests/webcomponents/basic-shadow-4.html new file mode 100644 index 000000000..70f91773e --- /dev/null +++ b/layout/reftests/webcomponents/basic-shadow-4.html @@ -0,0 +1,28 @@ +<!DOCTYPE HTML> +<html> +<head> + <script> + function tweak() { + var shadowDiv = document.createElement("div"); + shadowDiv.style.border = "10px solid green"; + + var shadowRoot = document.getElementById('outer').createShadowRoot(); + shadowRoot.appendChild(shadowDiv); + + var orangeDiv = document.createElement("div"); + orangeDiv.style.border = "10px solid orange"; + + var purpleDiv = document.createElement("div"); + purpleDiv.style.border = "10px solid purple"; + + shadowRoot.appendChild(purpleDiv); + shadowRoot.insertBefore(orangeDiv, purpleDiv); + } + </script> +</head> +<body onload="tweak()"> +<div id="outer"> + <div style="background-color:red;"></div> +</div> +</body> +</html> diff --git a/layout/reftests/webcomponents/basic-shadow-element-1-ref.html b/layout/reftests/webcomponents/basic-shadow-element-1-ref.html new file mode 100644 index 000000000..a47b9362a --- /dev/null +++ b/layout/reftests/webcomponents/basic-shadow-element-1-ref.html @@ -0,0 +1,10 @@ +<!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> diff --git a/layout/reftests/webcomponents/basic-shadow-element-1.html b/layout/reftests/webcomponents/basic-shadow-element-1.html new file mode 100644 index 000000000..e51bd8b72 --- /dev/null +++ b/layout/reftests/webcomponents/basic-shadow-element-1.html @@ -0,0 +1,19 @@ +<!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> diff --git a/layout/reftests/webcomponents/cross-tree-selection-1-ref.html b/layout/reftests/webcomponents/cross-tree-selection-1-ref.html new file mode 100644 index 000000000..e2a62f534 --- /dev/null +++ b/layout/reftests/webcomponents/cross-tree-selection-1-ref.html @@ -0,0 +1,8 @@ +<!DOCTYPE HTML> +<html> +<body> +<div> +Hello World +</div> +</body> +</html> diff --git a/layout/reftests/webcomponents/cross-tree-selection-1.html b/layout/reftests/webcomponents/cross-tree-selection-1.html new file mode 100644 index 000000000..1e4f02747 --- /dev/null +++ b/layout/reftests/webcomponents/cross-tree-selection-1.html @@ -0,0 +1,32 @@ +<!DOCTYPE HTML> +<html class="reftest-wait"> +<head> + <script> + function tweak() { + 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(); + var range = document.createRange(); + range.setStart(shadow, 1); + range.setEnd(shadow, 1); + selection.addRange(range); + selection.extend(shadow, 0); + + // Extend selection into a different node tree + // (from ShadowRoot into the previous node in the parent node tree). + setTimeout(function() { + selection.extend(document.getElementById("previous"), 0); + document.documentElement.className = ''; + }, 100); + } + </script> +</head> +<body onload="tweak()"> +<span id="previous">Hello</span><span id="host"></span> +</body> +</html> diff --git a/layout/reftests/webcomponents/dynamic-insertion-point-distribution-1-ref.html b/layout/reftests/webcomponents/dynamic-insertion-point-distribution-1-ref.html new file mode 100644 index 000000000..5cf030c4c --- /dev/null +++ b/layout/reftests/webcomponents/dynamic-insertion-point-distribution-1-ref.html @@ -0,0 +1,6 @@ +<!DOCTYPE html> +<html> + <body> + <div>a b c</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 new file mode 100644 index 000000000..c57f72b37 --- /dev/null +++ b/layout/reftests/webcomponents/dynamic-insertion-point-distribution-1.html @@ -0,0 +1,25 @@ +<!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'; + + 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, false); + </script> + </body> +</html> diff --git a/layout/reftests/webcomponents/dynamic-insertion-point-distribution-2-ref.html b/layout/reftests/webcomponents/dynamic-insertion-point-distribution-2-ref.html new file mode 100644 index 000000000..e5121d97e --- /dev/null +++ b/layout/reftests/webcomponents/dynamic-insertion-point-distribution-2-ref.html @@ -0,0 +1,6 @@ +<!DOCTYPE html> +<html> + <body> + <div>a</div> + </body> +</html> diff --git a/layout/reftests/webcomponents/dynamic-insertion-point-distribution-2.html b/layout/reftests/webcomponents/dynamic-insertion-point-distribution-2.html new file mode 100644 index 000000000..29a850e90 --- /dev/null +++ b/layout/reftests/webcomponents/dynamic-insertion-point-distribution-2.html @@ -0,0 +1,26 @@ +<!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>"; + + 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, false); + </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 new file mode 100644 index 000000000..a3b5150f6 --- /dev/null +++ b/layout/reftests/webcomponents/dynamic-shadow-element-1-ref.html @@ -0,0 +1,10 @@ +<!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 new file mode 100644 index 000000000..0142164a1 --- /dev/null +++ b/layout/reftests/webcomponents/dynamic-shadow-element-1.html @@ -0,0 +1,23 @@ +<!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-ref.html b/layout/reftests/webcomponents/fallback-content-1-ref.html new file mode 100644 index 000000000..28bed659d --- /dev/null +++ b/layout/reftests/webcomponents/fallback-content-1-ref.html @@ -0,0 +1,8 @@ +<!DOCTYPE HTML> +<html> +<body> +<div> + <div style="border: 10px solid green"><span style="background-color: orange">Hello</span> <span style="background-color: green">World</span></div> +</div> +</body> +</html> diff --git a/layout/reftests/webcomponents/fallback-content-1.html b/layout/reftests/webcomponents/fallback-content-1.html new file mode 100644 index 000000000..ac3b5d02a --- /dev/null +++ b/layout/reftests/webcomponents/fallback-content-1.html @@ -0,0 +1,25 @@ +<!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"; + + // Insertion point will match nothing and use fallback content. + var insertionPoint = document.createElement("content"); + shadowDiv.appendChild(insertionPoint); + + // 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>'; + + var shadowRoot = document.getElementById('outer').createShadowRoot(); + shadowRoot.appendChild(shadowDiv); + } + </script> +</head> +<body onload="tweak()"> +<div id="outer"></div> +</body> +</html> diff --git a/layout/reftests/webcomponents/input-transition-1-ref.html b/layout/reftests/webcomponents/input-transition-1-ref.html new file mode 100644 index 000000000..8e42c974e --- /dev/null +++ b/layout/reftests/webcomponents/input-transition-1-ref.html @@ -0,0 +1,6 @@ +<!DOCTYPE html> +<html> + <body> + <input type="checkbox" checked><div style="height: 50px; width: 50px; background: green;"></div> + </body> +</html> diff --git a/layout/reftests/webcomponents/input-transition-1.html b/layout/reftests/webcomponents/input-transition-1.html new file mode 100644 index 000000000..ede0fa40b --- /dev/null +++ b/layout/reftests/webcomponents/input-transition-1.html @@ -0,0 +1,23 @@ +<!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>'; + + function tweak() { + var el = root.getElementById("one"); + el.checked = true; + el.nextSibling.addEventListener("transitionend", function() { + document.documentElement.removeAttribute("class"); + }, false); + } + + window.addEventListener("MozReftestInvalidate", tweak, false); + </script> + </body> +</html> diff --git a/layout/reftests/webcomponents/nested-insertion-point-1-ref.html b/layout/reftests/webcomponents/nested-insertion-point-1-ref.html new file mode 100644 index 000000000..b2faa75cc --- /dev/null +++ b/layout/reftests/webcomponents/nested-insertion-point-1-ref.html @@ -0,0 +1,8 @@ +<!DOCTYPE HTML> +<html> +<body> +<div> + <div style="border: 10px solid green"><div style="border: 10px solid orange">Hello</div></div> +</div> +</body> +</html> diff --git a/layout/reftests/webcomponents/nested-insertion-point-1.html b/layout/reftests/webcomponents/nested-insertion-point-1.html new file mode 100644 index 000000000..66892029a --- /dev/null +++ b/layout/reftests/webcomponents/nested-insertion-point-1.html @@ -0,0 +1,30 @@ +<!DOCTYPE HTML> +<html> +<head> + <script> + function tweak() { + // div with style "border: 10px solid green" + var outerShadow = document.createElement("div"); + outerShadow.style.border = "10px solid green"; + + var outerInsertionPoint = document.createElement("content"); + 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); + + outerShadow.createShadowRoot().appendChild(innerShadow); + + var shadowRoot = document.getElementById('outer').createShadowRoot(); + shadowRoot.appendChild(outerShadow); + } + </script> +</head> +<body onload="tweak()"> +<div id="outer">Hello</div> +</body> +</html> diff --git a/layout/reftests/webcomponents/nested-shadow-element-1-ref.html b/layout/reftests/webcomponents/nested-shadow-element-1-ref.html new file mode 100644 index 000000000..a3b5150f6 --- /dev/null +++ b/layout/reftests/webcomponents/nested-shadow-element-1-ref.html @@ -0,0 +1,10 @@ +<!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/nested-shadow-element-1.html b/layout/reftests/webcomponents/nested-shadow-element-1.html new file mode 100644 index 000000000..cfaad3d49 --- /dev/null +++ b/layout/reftests/webcomponents/nested-shadow-element-1.html @@ -0,0 +1,29 @@ +<!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> diff --git a/layout/reftests/webcomponents/reftest-stylo.list b/layout/reftests/webcomponents/reftest-stylo.list new file mode 100644 index 000000000..8271f1a5a --- /dev/null +++ b/layout/reftests/webcomponents/reftest-stylo.list @@ -0,0 +1,22 @@ +# DO NOT EDIT! This is a auto-generated temporary list for Stylo testing +pref(dom.webcomponents.enabled,true) == cross-tree-selection-1.html cross-tree-selection-1.html +pref(dom.webcomponents.enabled,true) == basic-shadow-1.html basic-shadow-1.html +pref(dom.webcomponents.enabled,true) == basic-shadow-2.html basic-shadow-2.html +pref(dom.webcomponents.enabled,true) == basic-shadow-3.html basic-shadow-3.html +pref(dom.webcomponents.enabled,true) == basic-shadow-4.html basic-shadow-4.html +pref(dom.webcomponents.enabled,true) == basic-insertion-point-1.html basic-insertion-point-1.html +pref(dom.webcomponents.enabled,true) == basic-insertion-point-2.html basic-insertion-point-2.html +pref(dom.webcomponents.enabled,true) == adjacent-insertion-points-1.html adjacent-insertion-points-1.html +pref(dom.webcomponents.enabled,true) == adjacent-insertion-points-2.html adjacent-insertion-points-2.html +pref(dom.webcomponents.enabled,true) == fallback-content-1.html fallback-content-1.html +pref(dom.webcomponents.enabled,true) == remove-insertion-point-1.html remove-insertion-point-1.html +pref(dom.webcomponents.enabled,true) == nested-insertion-point-1.html nested-insertion-point-1.html +pref(dom.webcomponents.enabled,true) == basic-shadow-element-1.html basic-shadow-element-1.html +pref(dom.webcomponents.enabled,true) == nested-shadow-element-1.html nested-shadow-element-1.html +pref(dom.webcomponents.enabled,true) == update-dist-node-descendants-1.html update-dist-node-descendants-1.html +skip pref(dom.webcomponents.enabled,true) random-if((B2G&&browserIsRemote)||Mulet) == input-transition-1.html input-transition-1.html +# Failure on B2G emulator due to Bug 1018381 +# Initial mulet triage: parity with B2G/B2G Desktop +pref(dom.webcomponents.enabled,true) == dynamic-insertion-point-distribution-1.html dynamic-insertion-point-distribution-1.html +skip pref(dom.webcomponents.enabled,true) == dynamic-insertion-point-distribution-2.html dynamic-insertion-point-distribution-2.html +skip pref(dom.webcomponents.enabled,true) == remove-append-shadow-host-1.html remove-append-shadow-host-1.html diff --git a/layout/reftests/webcomponents/reftest.list b/layout/reftests/webcomponents/reftest.list new file mode 100644 index 000000000..beba21b18 --- /dev/null +++ b/layout/reftests/webcomponents/reftest.list @@ -0,0 +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) == 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 +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 diff --git a/layout/reftests/webcomponents/remove-append-shadow-host-1-ref.html b/layout/reftests/webcomponents/remove-append-shadow-host-1-ref.html new file mode 100644 index 000000000..88e10614a --- /dev/null +++ b/layout/reftests/webcomponents/remove-append-shadow-host-1-ref.html @@ -0,0 +1,6 @@ +<!DOCTYPE html> +<html> + <body> + <div>inside shadow DOM</div> + </body> +</html> diff --git a/layout/reftests/webcomponents/remove-append-shadow-host-1.html b/layout/reftests/webcomponents/remove-append-shadow-host-1.html new file mode 100644 index 000000000..85161565e --- /dev/null +++ b/layout/reftests/webcomponents/remove-append-shadow-host-1.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<html> + <head> + </head> + <body> + <div id="container"><div id="host"></div></div> + <script> + var host = document.getElementById("host"); + var root = host.createShadowRoot(); + root.innerHTML = 'inside shadow DOM'; + + var container = document.getElementById("container"); + container.removeChild(host); + container.appendChild(host); + </script> + </body> +</html> diff --git a/layout/reftests/webcomponents/remove-insertion-point-1-ref.html b/layout/reftests/webcomponents/remove-insertion-point-1-ref.html new file mode 100644 index 000000000..3ecceb303 --- /dev/null +++ b/layout/reftests/webcomponents/remove-insertion-point-1-ref.html @@ -0,0 +1,8 @@ +<!DOCTYPE HTML> +<html> +<body> +<div> + <div style="border: 10px solid green"></div> +</div> +</body> +</html> diff --git a/layout/reftests/webcomponents/remove-insertion-point-1.html b/layout/reftests/webcomponents/remove-insertion-point-1.html new file mode 100644 index 000000000..195673ca8 --- /dev/null +++ b/layout/reftests/webcomponents/remove-insertion-point-1.html @@ -0,0 +1,26 @@ +<!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"; + + // Insertion point will match nothing and use fallback content. + var insertionPoint = document.createElement("content"); + shadowDiv.appendChild(insertionPoint); + + var shadowRoot = document.getElementById('outer').createShadowRoot(); + shadowRoot.appendChild(shadowDiv); + + // Remove the insertion point from the ShadowRoot, "Hello" should no + // longer be rendered. + shadowDiv.removeChild(insertionPoint); + } + </script> +</head> +<body onload="tweak()"> +<div id="outer">Hello</div> +</body> +</html> diff --git a/layout/reftests/webcomponents/update-dist-node-descendants-1-ref.html b/layout/reftests/webcomponents/update-dist-node-descendants-1-ref.html new file mode 100644 index 000000000..41fe64ff3 --- /dev/null +++ b/layout/reftests/webcomponents/update-dist-node-descendants-1-ref.html @@ -0,0 +1,8 @@ +<!DOCTYPE HTML> +<html> +<body> +<div> + <div><div><span>Hello World</span></div></div> +</div> +</body> +</html> diff --git a/layout/reftests/webcomponents/update-dist-node-descendants-1.html b/layout/reftests/webcomponents/update-dist-node-descendants-1.html new file mode 100644 index 000000000..e2dd4ebb7 --- /dev/null +++ b/layout/reftests/webcomponents/update-dist-node-descendants-1.html @@ -0,0 +1,21 @@ +<!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 tweak() { + var distNode = document.getElementById("distnode"); + distNode.textContent = "Hello World"; + + document.documentElement.removeAttribute("class"); +} + +window.addEventListener("MozReftestInvalidate", tweak); +</script> +</body> +</html> |