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 .flow { -webkit-flow-into: flow } | |
10 .region { -webkit-flow-from: flow; } | |
11 #region { width: 250px; height: 50px; } | |
12 #region2 { width: 250px; height: 50px; } | |
13 #region3 { width: 250px; height: 50px; } | |
14 </style> | |
15 </head> | |
16 <body> | |
17 <div id="article" class="flow"> | |
18 <p>Content inside article</p> | |
19 </div> | |
20 <script> | |
21 description("Test for https://bugs.webkit.org/show_bug.cgi?id=87491 [CSS Reg
ions]Rename NamedFlow::overflow to NamedFlow::overset. \ | |
22 For more details see http://www.w3.org/TR/2012/WD-css3-regions-2
0120503/"); | |
23 | |
24 if (window.testRunner) | |
25 window.testRunner.dumpAsText(); | |
26 | |
27 // Flow article does not have any regions yet | |
28 var namedFlow = getFlowByName("flow"); | |
29 | |
30 // Overset should be false for a flow without regions | |
31 shouldBe("namedFlow.overset", "true"); | |
32 | |
33 // Add a region to take the content, overset should be false since the conte
nt first the regions. | |
34 var region = document.createElement("div"); | |
35 document.body.appendChild(region); | |
36 region.id = "region"; | |
37 region.className = "region"; | |
38 | |
39 // Overset should be false since the content fits the regions | |
40 shouldBe("namedFlow.overset", "false"); | |
41 | |
42 // Add more content to the flow, overset should be true. | |
43 var p = document.createElement("p"); | |
44 p.appendChild(document.createTextNode("Content inside article")); | |
45 document.getElementById("article").appendChild(p); | |
46 | |
47 // Overset should be true since the content does not fit the regions | |
48 shouldBe("namedFlow.overset", "true"); | |
49 | |
50 // Add another region, overset should be false | |
51 var region2 = document.createElement("div"); | |
52 document.body.appendChild(region2); | |
53 region2.id = "region2"; | |
54 region2.className = "region"; | |
55 | |
56 // Overset should be false since the content fits in the regions | |
57 shouldBe("namedFlow.overset", "false"); | |
58 | |
59 // Add visual overset, overset should be true. | |
60 document.getElementById("article").style.webkitBoxShadow="0px 50px lime"; | |
61 | |
62 // Overset should be true since the content does not fit in regions | |
63 shouldBe("namedFlow.overset", "true"); | |
64 | |
65 // Add the third region, overset should be false. | |
66 var region3 = document.createElement("div"); | |
67 document.body.appendChild(region3); | |
68 region3.id = "region3"; | |
69 region3.className = "region"; | |
70 | |
71 // Overset should be false since the content fits in regions | |
72 shouldBe("namedFlow.overset", "false"); | |
73 | |
74 // Remove the first region from the flow, overset should be true. | |
75 region.className = ""; | |
76 | |
77 // Overset should be true since the content does not fit the regions | |
78 shouldBe("namedFlow.overset", "true"); | |
79 | |
80 // Remove the content from the flow, overset should be false. | |
81 document.getElementById("article").className = ""; | |
82 | |
83 // Overset should be false since the flow does not have any content | |
84 shouldBe("namedFlow.overset", "false"); | |
85 | |
86 // Remove all the regions from the flow | |
87 region2.className = region3.className = ""; | |
88 | |
89 // Overset should be true since the flow does not have any region chain | |
90 shouldBe("namedFlow.overset", "true"); | |
91 | |
92 document.getElementById("article").style.display = "none"; | |
93 region.style.display = "none"; | |
94 region2.style.display = "none"; | |
95 region3.style.display = "none"; | |
96 </script> | |
97 </body> | |
98 </html> | |
OLD | NEW |