1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
|
<!DOCTYPE html>
<html>
<head>
<style>
/* relative positioning ensures underlying Layer */
.container {
position: relative;
}
</style>
<script>
function log(message)
{
var line = document.createElement("div");
line.textContent = message;
document.getElementById("console").appendChild(line);
}
var contentSources = [
"<div/>",
"#text<div/>",
"<div/>#text",
"#text<div/>#text",
"<span/>",
"#text<span/>",
"<span/>#text",
"#text<span/>#text",
"<span/>#text<div/>",
"<div/>#text<span/>",
"<div/><span/>",
"<span/><div/>"
];
var shadowSources = [
"<content/>",
"<div/><content/><div/>",
"<div/><content/><span/>",
"<span/><content/><span/>",
"<span/><content/><div/>",
"<div/><content/><div/>",
"<div/><content/><span/>",
"<span/><content/><span/>",
"<span/><content/><div/>",
"<div/>#text<content/>#text<div/>",
"<div/>#text<content/>#text<span/>",
"<span/>#text<content/>#text<span/>",
"<span/>#text<content/>#text<div/>",
"<div><content/></div>",
"<span><content/></span>"
];
function createTreeFrom(html)
{
var enhancedHtml = html.replace(/<span\/>/g, "<span> </span>").replace(/<div\/>/g, "<div> </div>").replace(/<content\/>/g, "<content></content>").replace(/#text/g, " ");
var root = document.createElement("blockquote");
root.innerHTML = enhancedHtml;
var contentPlaceholder = root.getElementsByTagName("CONTENT")[0];
if (contentPlaceholder) {
var contentParent = contentPlaceholder.parentNode;
contentParent.replaceChild(window.document.createElement('content'), contentPlaceholder);
};
return root;
}
function moveChildren(fromParent, toParent)
{
var children = fromParent.childNodes;
while (fromParent.firstChild)
toParent.appendChild(fromParent.firstChild);
}
function createTargetTree(contentHtml, shadowHtml)
{
var content = createTreeFrom(contentHtml);
var shadow = createTreeFrom(shadowHtml);
var host = document.createElement("blockquote");
var shadowRoot = host.createShadowRoot();
moveChildren(content, host);
moveChildren(shadow, shadowRoot);
return host;
}
function cleanupContainer(container)
{
var child = container.firstChild;
if (child)
container.removeChild(child);
container.offsetLeft;
}
function testWithContentAndShadow(contentHtml, shadowHtml, label)
{
var targetContainer = document.getElementById("targetContainer");
cleanupContainer(targetContainer);
var target = createTargetTree(contentHtml, shadowHtml);
targetContainer.appendChild(target);
var targetLayoutTree = removeContainerLines(window.internals.elementLayoutTreeAsText(targetContainer));
var referenceContainer = document.getElementById("referenceContainer");
cleanupContainer(referenceContainer);
var separator = "<!-- -->"; // Uses a separator for keeping text node separate.
var referenceHtml = shadowHtml.replace("<content/>", (separator + contentHtml + separator));
var reference = createTreeFrom(referenceHtml);
referenceContainer.appendChild(reference);
var referenceLayoutTree = removeContainerLines(window.internals.elementLayoutTreeAsText(referenceContainer));
if (targetLayoutTree == referenceLayoutTree)
log("PASS[" + label + "]: content=" + contentHtml + " shadow=" + shadowHtml);
else {
log("FAIL[" + label + "]: content=" + contentHtml + " shadow=" + shadowHtml);
log("Expected: (for " + reference.innerHTML + ")");
log(referenceLayoutTree);
log("Actual: (for " + target.innerHTML + ")");
log(targetLayoutTree);
}
}
function removeContainerLines(text)
{
var lines = text.split("\n");
lines.splice(0, 2);
return lines.join("\n");
}
function test()
{
testRunner.dumpAsText();
log("This test compares a shadow-based render tree with one for a reference DOM tree.");
log("Note that this test only runs on DRT.");
for (var i = 0; i < contentSources.length; ++i) {
for (var j = 0; j < shadowSources.length; ++j) {
var testLabel = i + "," + j;
testWithContentAndShadow(contentSources[i], shadowSources[j], testLabel);
}
}
document.getElementById("test").style.display = "none";
document.getElementById("console").style.display = "block";
}
</script>
</head>
<body onload="test()">
<div id="test">
<div class="container" id="targetContainer"></div>
<div class="container" id="referenceContainer"></div>
</div>
<pre id="console" style="display: none;"></pre>
</body>
</html>
|
