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
|
<!doctype html>
<html>
<head>
<script src="../../fast/js/resources/js-test-pre.js"></script>
<script src="resources/helper.js"></script>
<style>
html { -webkit-writing-mode: vertical-lr; }
body { font-family: monospace; }
#article { -webkit-flow-into: flow; }
.regionBox { height: 250px; width: 50px; }
#region { -webkit-flow-from: flow; }
#region2 { -webkit-flow-from: flow; }
#region3 { -webkit-flow-from: flow; }
#article2 { -webkit-flow-into: flow2; }
#region4 { -webkit-flow-from: flow2; }
#region5 { -webkit-flow-from: flow2; }
.noRegion { -webkit-flow-from: none; }
</style>
</head>
<body>
<!-- some tests with inline elements -->
<div id="article">
<span id="spanNode">Text inside span.</span>
Text outside span. Text outside span. Text outside span.
<span id="spanNode2">Text inside span2. Text.</span>
<span id="spanNode3">Text inside span3</span>
</div>
<div id="region" class="regionBox"></div>
<div id="region2" class="regionBox"></div>
<!-- some tests with block elements -->
<div id="article2">
<p id="p1">Text inside paragraph p1.</p>
</div>
<div id="region4" class="regionBox"></region>
<script>
if (window.testRunner)
window.testRunner.dumpAsText();
description("Test for 90759: [CSSRegions] Rename NamedFlow::getRegionsByContentNode to NamedFlow::getRegionsByContent");
var namedFlow = getFlowByName("flow");
function hideRegions()
{
document.getElementById("article").style.visibility = "hidden";
document.getElementById("article2").style.visibility = "hidden";
document.getElementById("region").style.visibility = "hidden";
document.getElementById("region2").style.visibility = "hidden";
document.getElementById("region3").style.visibility = "hidden";
document.getElementById("region4").style.visibility = "hidden";
document.getElementById("region5").style.visibility = "hidden";
}
var regionListArticle = namedFlow.getRegionsByContent(document.getElementById("article"));
shouldBeNonNull("regionListArticle");
shouldEvaluateTo("regionListArticle.length", 2);
shouldBeEqualToString("regionListArticle.item(0).id", "region");
shouldBeEqualToString("regionListArticle.item(1).id", "region2");
var spanNode = document.getElementById("spanNode");
var regionListSpan = namedFlow.getRegionsByContent(spanNode);
shouldBeNonNull("regionListSpan");
shouldEvaluateTo("regionListSpan.length", 1);
shouldBeEqualToString("regionListSpan.item(0).id", "region");
var spanNode2 = document.getElementById("spanNode2");
var regionListSpan2 = namedFlow.getRegionsByContent(spanNode2);
shouldBeNonNull("regionListSpan2");
shouldEvaluateTo("regionListSpan2.length", 2);
var spanNode3 = document.getElementById("spanNode3");
var regionListSpan3 = namedFlow.getRegionsByContent(spanNode3);
shouldBeNonNull("regionListSpan3");
shouldEvaluateTo("regionListSpan3.length", 1);
shouldBeEqualToString("regionListSpan3.item(0).id", "region2");
var textNode = document.createTextNode("Text node. Text node. Text node. Text node. Text node. Text node. Text node. ");
document.getElementById("article").appendChild(textNode);
var regionListTextNode = namedFlow.getRegionsByContent(textNode);
shouldBeNonNull("regionListTextNode");
shouldEvaluateTo("regionListTextNode.length", 1);
shouldBeEqualToString("regionListTextNode.item(0).id", "region2");
// Add another text node that will overflow the region2.
var textNode2 = document.createTextNode("Text node2.");
document.getElementById("article").appendChild(textNode2);
var regionListTextNode2 = namedFlow.getRegionsByContent(textNode2);
shouldBeNonNull("regionListTextNode2");
shouldEvaluateTo("regionListTextNode2.length", 1);
shouldBeEqualToString("regionListTextNode2.item(0).id", "region2");
// Add another text node that is in the overflow of the last region.
var textNode3 = document.createTextNode("Text node3.");
document.getElementById("article").appendChild(textNode3);
var regionListTextNode3 = namedFlow.getRegionsByContent(textNode3);
shouldBeNonNull("regionListTextNode3");
shouldEvaluateTo("regionListTextNode3.length", 1);
shouldBeEqualToString("regionListTextNode3.item(0).id", "region2");
// Add another region to take the overflowing elements from second region.
var region3 = document.createElement("div");
region3.id = "region3";
region3.className = "regionBox";
document.body.appendChild(region3);
var regionListTextNode2 = namedFlow.getRegionsByContent(textNode);
shouldEvaluateTo("regionListTextNode2.length", 2);
shouldBeEqualToString("regionListTextNode2.item(0).id", "region2");
shouldBeEqualToString("regionListTextNode2.item(1).id", "region3");
var regionListTextNode32 = namedFlow.getRegionsByContent(textNode3);
shouldEvaluateTo("regionListTextNode32.length", 1);
shouldBeEqualToString("regionListTextNode32.item(0).id", "region3");
var namedFlow2 = getFlowByName("flow2");
var regionListP1 = namedFlow2.getRegionsByContent(document.getElementById("p1"));
shouldBeNonNull("regionListP1");
shouldEvaluateTo("regionListP1.length", 1);
shouldBeEqualToString("regionListP1.item(0).id", "region4");
var p2 = document.createElement("p");
p2.id = "p2";
p2.appendChild(document.createTextNode("Text inside paragraph p2."));
document.getElementById("article2").appendChild(p2);
var regionListP2 = namedFlow2.getRegionsByContent(p2);
shouldBeNonNull("regionListP2");
shouldEvaluateTo("regionListP2.length", 1);
shouldBeEqualToString("regionListP2.item(0).id", "region4");
// add another element p, in the overflow part of the region4
var p3 = document.createElement("p");
p3.id = "p3";
p3.appendChild(document.createTextNode("Text inside paragraph p3."));
document.getElementById("article2").appendChild(p3);
var regionListP3 = namedFlow2.getRegionsByContent(p3);
shouldBeNonNull("regionListP3");
shouldEvaluateTo("regionListP3.length", 1);
shouldBeEqualToString("regionListP3.item(0).id", "region4");
// add another region to flow2, p2 and p3 go to region5
var region5 = document.createElement("div");
region5.id = "region5";
region5.className = "regionBox";
document.body.appendChild(region5);
var regionListP22 = namedFlow2.getRegionsByContent(p2);
shouldEvaluateTo("regionListP22.length", 1);
shouldBeEqualToString("regionListP22.item(0).id", "region5");
hideRegions();
</script>
</body>
</html>
|
