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