mozilla
/
gecko-dev
зеркало из https://github.com/mozilla/gecko-dev.git
1
0
Форкнуть 0
Код Задачи Пакеты Проекты Релизы Вики Активность

Bug 1409975 - Part 4: Update and add reftests for Shadow DOM v1. r=emilio 

--HG--
rename : layout/reftests/webcomponents/basic-insertion-point-1-ref.html => layout/reftests/webcomponents/basic-slot-5-ref.html
rename : layout/reftests/webcomponents/basic-insertion-point-1.html => layout/reftests/webcomponents/basic-slot-5.html
rename : layout/reftests/webcomponents/basic-insertion-point-2-ref.html => layout/reftests/webcomponents/basic-slot-6-ref.html
rename : layout/reftests/webcomponents/basic-insertion-point-2.html => layout/reftests/webcomponents/basic-slot-6.html
This commit is contained in:
Jessica Jong 2017-12-04 16:06:42 +08:00
Родитель fbd3a63cba
Коммит bdf8958759
30 изменённых файлов: 151 добавлений и 119 удалений
Показать статистику Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

2
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>

2
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");

2
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");

2
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");

11
layout/reftests/webcomponents/basic-slot-1-ref.html Normal file
Просмотреть файл

@ -0,0 +1,11 @@
<!DOCTYPE html>
<html>
<head>
<style>
body { color: green; }
</style>
</head>
<body>
This text should be green
</body>
</html>

6
layout/reftests/webcomponents/basic-slot-1.html Normal file
Просмотреть файл

@ -0,0 +1,6 @@
<!DOCTYPE HTML>
<html>
<body>
<slot style="color: green">This text should be green</slot>
</body>
</html>

16
layout/reftests/webcomponents/basic-slot-2-ref.html Normal file
Просмотреть файл

@ -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>

7
layout/reftests/webcomponents/basic-slot-2.html Normal file
Просмотреть файл

@ -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>

8
layout/reftests/webcomponents/basic-slot-3-ref.html Normal file
Просмотреть файл

@ -0,0 +1,8 @@
<!DOCTYPE HTML>
<html>
<body>
<div>
<div style="color: green">This text should be green</div>
</div>
</body>
</html>

18
layout/reftests/webcomponents/basic-slot-3.html Normal file
Просмотреть файл

@ -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>

20
layout/reftests/webcomponents/basic-slot-4.html Normal file
Просмотреть файл

@ -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>

0
layout/reftests/webcomponents/basic-insertion-point-1-ref.html → layout/reftests/webcomponents/basic-slot-5-ref.html
Просмотреть файл

6
layout/reftests/webcomponents/basic-insertion-point-1.html → layout/reftests/webcomponents/basic-slot-5.html
Просмотреть файл

@ -7,10 +7,10 @@
var shadowDiv = document.createElement("div");
shadowDiv.style.border = "10px solid green";
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);
}
</script>

0
layout/reftests/webcomponents/basic-insertion-point-2-ref.html → layout/reftests/webcomponents/basic-slot-6-ref.html
Просмотреть файл

7
layout/reftests/webcomponents/basic-insertion-point-2.html → layout/reftests/webcomponents/basic-slot-6.html
Просмотреть файл

@ -7,10 +7,11 @@
var shadowDiv = document.createElement("div");
shadowDiv.style.border = "10px solid green";
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);
}
</script>

15
layout/reftests/webcomponents/dynamic-insertion-point-distribution-1.html
Просмотреть файл

@ -7,11 +7,9 @@
<script>
var host, root;
function run() {
host = document.getElementById("host");
root = host.createShadowRoot();
root.innerHTML = 'a <content></content> c';
}
host = document.getElementById("host");
root = host.attachShadow({mode: 'open'});
root.innerHTML = 'a <slot></slot> c';
function tweak() {
var span = document.createElement("span");
@ -23,12 +21,7 @@
document.documentElement.removeAttribute("class");
}
if (document.body.createShadowRoot) {
run();
window.addEventListener("MozReftestInvalidate", tweak);
} else {
document.documentElement.className = "";
}
window.addEventListener("MozReftestInvalidate", tweak);
</script>
</body>
</html>

15
layout/reftests/webcomponents/dynamic-insertion-point-distribution-2.html
Просмотреть файл

@ -7,11 +7,9 @@
<script>
var host, root;
function run() {
host = document.getElementById("host");
root = host.createShadowRoot();
root.innerHTML = "<span>a</span>";
}
host = document.getElementById("host");
root = host.attachShadow({mode: 'open'});
root.innerHTML = "<span>a</span>";
function tweak() {
var span = document.createElement("span");
@ -24,12 +22,7 @@
document.documentElement.removeAttribute("class");
}
if (document.body.createShadowRoot) {
run();
window.addEventListener("MozReftestInvalidate", tweak);
} else {
document.documentElement.className = "";
}
window.addEventListener("MozReftestInvalidate", tweak);
</script>
</body>
</html>

10
layout/reftests/webcomponents/dynamic-shadow-element-1-ref.html
Просмотреть файл

@ -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>

23
layout/reftests/webcomponents/dynamic-shadow-element-1.html
Просмотреть файл

@ -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>

8
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>

25
layout/reftests/webcomponents/input-transition-1.html
Просмотреть файл

@ -7,26 +7,19 @@
<script>
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>';
}
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() {
setTimeout(()=>{document.documentElement.removeAttribute("class")}, 1000); // wait for the checkbox SVG image to load on Android
});
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
});
}
if (document.body.createShadowRoot) {
run();
window.addEventListener("MozReftestInvalidate", tweak);
} else {
document.documentElement.className = "";
}
window.addEventListener("MozReftestInvalidate", tweak);
</script>
</body>
</html>

11
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>

2
layout/reftests/webcomponents/reframe-shadow-child-1.html
Просмотреть файл

@ -8,7 +8,7 @@
</template>
<div id="host"></div>
<script>
let shadowRoot = document.getElementById("host").createShadowRoot();
let shadowRoot = document.getElementById("host").attachShadow({mode: 'open'});
let tmpl = document.getElementById("tmpl");
shadowRoot.appendChild(document.importNode(tmpl.content, true));
document.body.offsetTop;

2
layout/reftests/webcomponents/reframe-shadow-child-2.html
Просмотреть файл

@ -7,7 +7,7 @@
</template>
<div id="host"></div>
<script>
let shadowRoot = document.getElementById("host").createShadowRoot();
let shadowRoot = document.getElementById("host").attachShadow({mode: 'open'});
let tmpl = document.getElementById("tmpl");
shadowRoot.appendChild(document.importNode(tmpl.content, true));
document.body.offsetTop;

14
layout/reftests/webcomponents/reftest.list
Просмотреть файл

@ -3,17 +3,21 @@ 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
#bug 1421542 pref(dom.webcomponents.enabled,true) == update-dist-node-descendants-1.html update-dist-node-descendants-1-ref.html
pref(dom.webcomponents.enabled,true) == nested-insertion-point-1.html nested-insertion-point-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) fuzzy-if(Android,2,7) == input-transition-1.html input-transition-1-ref.html
#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-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) == reframe-shadow-child-1.html reframe-shadow-child-ref.html
pref(dom.webcomponents.enabled,true) == reframe-shadow-child-2.html reframe-shadow-child-ref.html
pref(dom.webcomponents.enabled,true) == style-sharing.html style-sharing-ref.html
pref(dom.webcomponents.enabled,true) skip-if(!stylo||styloVsGecko) == style-sharing-across-shadow.html style-sharing-ref.html # bug 1412400
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

2
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");

8
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>

4
layout/reftests/webcomponents/style-sharing-across-shadow.html
Просмотреть файл

@ -6,13 +6,13 @@
<div></div>
<script>
let divs = document.querySelectorAll('div');
divs[0].createShadowRoot().innerHTML = `
divs[0].attachShadow({mode: 'open'}).innerHTML = `
<style>
* { color: green; }
</style>
<span>Should be green</span>
`;
divs[1].createShadowRoot().innerHTML = `
divs[1].attachShadow({mode: 'open'}).innerHTML = `
<style>
* { color: initial; }
[foo] { }

2
layout/reftests/webcomponents/style-sharing.html
Просмотреть файл

@ -1,7 +1,7 @@
<!doctype html>
<div id="host"></div>
<script>
let root = host.createShadowRoot();
let root = host.attachShadow({mode: 'open'});
root.innerHTML = `
<style>
#test {

22
layout/reftests/webcomponents/update-dist-node-descendants-1.html
Просмотреть файл

@ -5,24 +5,18 @@
<body>
<div id="outer"><span id="distnode">text</span></div>
<script>
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";
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";
document.documentElement.removeAttribute("class");
}
if (document.body.createShadowRoot) {
run();
window.addEventListener("MozReftestInvalidate", tweak);
} else {
document.documentElement.className = "";
}
</script>
</body>
</html>