5 <script src="../../../resources/js-test.js"></script>
6 <script src="../resources/helper.js"></script>
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; }
17 <div id="article" class="flow">
18 <p>Content inside article</p>
21 description("Test for https://bugs.webkit.org/show_bug.cgi?id=87491 [CSS Regions]Rename NamedFlow::overflow to NamedFlow::overset. \
22 For more details see http://www.w3.org/TR/2012/WD-css3-regions-20120503/");
24 if (window.testRunner)
25 window.testRunner.dumpAsText();
27 // Flow article does not have any regions yet
28 var namedFlow = getFlowByName("flow");
30 // Overset should be false for a flow without regions
31 shouldBe("namedFlow.overset", "true");
33 // Add a region to take the content, overset should be false since the content first the regions.
34 var region = document.createElement("div");
35 document.body.appendChild(region);
37 region.className = "region";
39 // Overset should be false since the content fits the regions
40 shouldBe("namedFlow.overset", "false");
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);
47 // Overset should be true since the content does not fit the regions
48 shouldBe("namedFlow.overset", "true");
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";
56 // Overset should be false since the content fits in the regions
57 shouldBe("namedFlow.overset", "false");
59 // Add visual overset, overset should be true.
60 document.getElementById("article").style.webkitBoxShadow="0px 50px lime";
62 // Overset should be true since the content does not fit in regions
63 shouldBe("namedFlow.overset", "true");
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";
71 // Overset should be false since the content fits in regions
72 shouldBe("namedFlow.overset", "false");
74 // Remove the first region from the flow, overset should be true.
75 region.className = "";
77 // Overset should be true since the content does not fit the regions
78 shouldBe("namedFlow.overset", "true");
80 // Remove the content from the flow, overset should be false.
81 document.getElementById("article").className = "";
83 // Overset should be false since the flow does not have any content
84 shouldBe("namedFlow.overset", "false");
86 // Remove all the regions from the flow
87 region2.className = region3.className = "";
89 // Overset should be true since the flow does not have any region chain
90 shouldBe("namedFlow.overset", "true");
92 document.getElementById("article").style.display = "none";
93 region.style.display = "none";
94 region2.style.display = "none";
95 region3.style.display = "none";