OLD | NEW |
| (Empty) |
1 <!DOCTYPE html> | |
2 <html> | |
3 <head> | |
4 <meta charset="utf-8"> | |
5 <script src="../../../resources/js-test.js"></script> | |
6 <script src="../resources/helper.js"></script> | |
7 <style> | |
8 html { -webkit-writing-mode: vertical-lr; } | |
9 body { font-family: monospace; } | |
10 #wrapper { font-size: 30px; } | |
11 .border { border: 1px solid red; } | |
12 #article { background-color: lightblue; width: 135px; padding: 10px;} | |
13 #box1 { background-color: lightgreen; width: 110px; padding: 10px;} | |
14 #box2 { background-color: orange; width: 10px; padding: 5px;} | |
15 #region1 { -webkit-flow-from: flow1; width: 70px; height: 250px; left: 20px;
top: 250px;} | |
16 #region2 { -webkit-flow-from: flow1; width: 60px; height: 250px; left: 20px;
top: 300px;} | |
17 #region3 { -webkit-flow-from: flow1; width: 60px; height: 250px; left: 20px;
top: 350px;} | |
18 </style> | |
19 </head> | |
20 <body> | |
21 <div id="description"></div> | |
22 <div id="wrapper"><div id="article"><div id="box1"><div id="box2"></div></div>
</div></div> | |
23 <div id="region1" class="border"></div> | |
24 <div id="region2" class="border"></div> | |
25 <div id="region3" class="border"></div> | |
26 <div id="console"></div> | |
27 <script> | |
28 if (window.layoutTestController) | |
29 layoutTestController.dumpAsText(); | |
30 | |
31 description("[CSSRegions] Test for Region::getRegionFlowRanges for vertical-
lr mode"); | |
32 var region1 = document.getElementById("region1"); | |
33 var region2 = document.getElementById("region2"); | |
34 var region3 = document.getElementById("region3"); | |
35 | |
36 debug("Empty regions"); | |
37 var range1 = region1.webkitGetRegionFlowRanges(); | |
38 shouldEvaluateTo("range1.length", 0); | |
39 var range2 = region2.webkitGetRegionFlowRanges(); | |
40 shouldEvaluateTo("range2.length", 0); | |
41 var range3 = region3.webkitGetRegionFlowRanges(); | |
42 shouldEvaluateTo("range3.length", 0); | |
43 | |
44 debug("Flow article"); | |
45 var article = document.getElementById("article"); | |
46 article.style.webkitFlowInto = "flow1"; | |
47 range1 = region1.webkitGetRegionFlowRanges(); | |
48 shouldEvaluateTo("range1.length", 1); | |
49 compareArrays(getRangeAt(range1, 0), ["wrapper", 0, "box1", 1]); | |
50 range2 = region2.webkitGetRegionFlowRanges(); | |
51 shouldEvaluateTo("range2.length", 1); | |
52 compareArrays(getRangeAt(range2, 0), ["box1", 1, "box1", 1]); | |
53 range3 = region3.webkitGetRegionFlowRanges(); | |
54 shouldEvaluateTo("range3.length", 1); | |
55 compareArrays(getRangeAt(range3, 0), ["box1", 1, "wrapper", 1]); | |
56 | |
57 debug("Add text node to region2 (creates anonymous block)"); | |
58 var textNode = document.createTextNode("Text node."); | |
59 document.getElementById("box1").appendChild(textNode); | |
60 range1 = region1.webkitGetRegionFlowRanges(); | |
61 shouldEvaluateTo("range1.length", 1); | |
62 compareArrays(getRangeAt(range1, 0), ["wrapper", 0, "box1", 1]); | |
63 range2 = region2.webkitGetRegionFlowRanges(); | |
64 shouldEvaluateTo("range2.length", 1); | |
65 compareArrays(getRangeAt(range2, 0), ["box1", 1, "box1", 2]); | |
66 range3 = region3.webkitGetRegionFlowRanges(); | |
67 shouldEvaluateTo("range3.length", 1); | |
68 compareArrays(getRangeAt(range3, 0), ["box1", 2, "wrapper", 1]); | |
69 | |
70 debug("Increase font size"); | |
71 var wrapper = document.getElementById("wrapper"); | |
72 wrapper.style.fontSize = "40px"; | |
73 range1 = region1.webkitGetRegionFlowRanges(); | |
74 shouldEvaluateTo("range1.length", 1); | |
75 compareArrays(getRangeAt(range1, 0), ["wrapper", 0, "box1", 1]); | |
76 range2 = region2.webkitGetRegionFlowRanges(); | |
77 shouldEvaluateTo("range2.length", 1); | |
78 compareArrays(getRangeAt(range2, 0), ["box1", 1, "#text", 4]); | |
79 range3 = region3.webkitGetRegionFlowRanges(); | |
80 shouldEvaluateTo("range3.length", 1); | |
81 compareArrays(getRangeAt(range3, 0), ["#text", 5, "wrapper", 1]); | |
82 | |
83 debug("Make child a content node, so it will move from region1 to region3"); | |
84 var box2 = document.getElementById('box2'); | |
85 box2.style.webkitFlowInto = "flow1"; | |
86 range1 = region1.webkitGetRegionFlowRanges(); | |
87 shouldEvaluateTo("range1.length", 2); | |
88 compareArrays(getRangeAt(range1, 0), ["wrapper", 0, "box1", 0]); | |
89 compareArrays(getRangeAt(range1, 1), ["box1", 1, "#text", 4]); | |
90 range2 = region2.webkitGetRegionFlowRanges(); | |
91 shouldEvaluateTo("range2.length", 1); | |
92 compareArrays(getRangeAt(range2, 0), ["#text", 5, "box1", 2]); | |
93 range3 = region3.webkitGetRegionFlowRanges(); | |
94 shouldEvaluateTo("range3.length", 1); | |
95 compareArrays(getRangeAt(range3, 0), ["box1", 0, "box1", 1]); | |
96 | |
97 function hideRegionsAndFlows() { | |
98 document.getElementById("region1").style.visibility = "hidden"; | |
99 document.getElementById("region2").style.visibility = "hidden"; | |
100 document.getElementById("region3").style.visibility = "hidden"; | |
101 } | |
102 | |
103 hideRegionsAndFlows(); | |
104 </script> | |
105 </body> | |
106 </html> | |
OLD | NEW |