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 .content { -webkit-flow-into: flow } | |
10 .region { -webkit-flow-from: flow} | |
11 #region, #region2, #region3 { width: 250px; height: 50px; } | |
12 </style> | |
13 </head> | |
14 <body> | |
15 <div id="article" class="content"> | |
16 <p>Content inside article</p> | |
17 </div> | |
18 <script> | |
19 description("Test for 90608: [CSSRegions]Implement NamedFlow::firstEmptyRegi
onIndex attribute."); | |
20 | |
21 if (window.testRunner) | |
22 testRunner.dumpAsText(); | |
23 | |
24 // Named flow does not have any regions yet | |
25 var namedFlow = getFlowByName("flow"); | |
26 | |
27 // FirstEmptyRegionIndex should be -1 for an empty named flow | |
28 shouldBe("namedFlow.firstEmptyRegionIndex", "-1"); | |
29 | |
30 // Add a region to take the content, firstEmptyRegionIndex should still be -
1. | |
31 var region = document.createElement("div"); | |
32 document.body.appendChild(region); | |
33 region.id = "region"; | |
34 region.className = "region"; | |
35 | |
36 // FirstEmptyRegions should be -1, since there are no empty regions | |
37 shouldBe("namedFlow.firstEmptyRegionIndex", "-1"); | |
38 | |
39 // Add another region, firstEmptyRegionIndex should be 1 since content only
flows within the first region. | |
40 var region2 = document.createElement("div"); | |
41 document.body.appendChild(region2); | |
42 region2.id = "region2"; | |
43 region2.className = "region"; | |
44 | |
45 // FirstEmptyRegionIndex should be 1 | |
46 shouldBe("namedFlow.firstEmptyRegionIndex", "1"); | |
47 | |
48 // Add content until some is flowed inside second region | |
49 while (region2.webkitRegionOverset == "empty") { | |
50 var p = document.createElement("p"); | |
51 p.appendChild(document.createTextNode("Content inside article")); | |
52 document.getElementById("article").appendChild(p); | |
53 } | |
54 // Add the third region, firstEmptyRegionIndex should be 2. | |
55 var region3 = document.createElement("div"); | |
56 document.body.appendChild(region3); | |
57 region3.id = "region3"; | |
58 region3.className = "region"; | |
59 | |
60 // FirstEmptyRegionIndex should be 2 since the content fits in the first two
regions. | |
61 shouldBe("namedFlow.firstEmptyRegionIndex", "2"); | |
62 | |
63 // Remove the first region from the flow, firstEmptyRegionIndex should be -1
. | |
64 region.className = ""; | |
65 | |
66 // Overset should be true since the content does not fit the regions | |
67 shouldBe("namedFlow.firstEmptyRegionIndex", "-1"); | |
68 | |
69 // Remove the content from the flow, firstEmptyRegionIndex should be 0. | |
70 document.getElementById("article").className = ""; | |
71 | |
72 // FirstEmptyRegionIndex should be 0, since there is no more content. | |
73 shouldBe("namedFlow.firstEmptyRegionIndex", "0"); | |
74 | |
75 // Remove all the regions from the flow | |
76 region2.className = region3.className = ""; | |
77 | |
78 // FirstEmptyRegionIndex should be -1, since there are no more regions in th
e named flow. | |
79 shouldBe("namedFlow.firstEmptyRegionIndex", "-1"); | |
80 | |
81 document.getElementById("article").style.display = "none"; | |
82 region.style.display = "none"; | |
83 region2.style.display = "none"; | |
84 region3.style.display = "none"; | |
85 </script> | |
86 </body> | |
87 </html> | |
OLD | NEW |