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 #article { | |
9 -webkit-flow-into: article; | |
10 border: 10px solid black; | |
11 } | |
12 #region_1, #region_2 { | |
13 -webkit-flow-from: no_article; | |
14 overflow: hidden; | |
15 display: inline-block; | |
16 vertical-align: top; | |
17 margin: 10px; | |
18 height: auto; | |
19 width: 200px; | |
20 border: 1px solid red; | |
21 padding: 5px; | |
22 -webkit-flex-grow: 1; | |
23 -webkit-flex-basis: 100%; | |
24 } | |
25 #region_2 { | |
26 -webkit-flex-basis: 70%; | |
27 } | |
28 .content { | |
29 background-color: green; | |
30 border: 3px dashed blue; | |
31 margin: 5px; | |
32 } | |
33 #part1 { | |
34 height: 70px; | |
35 } | |
36 #part2 { | |
37 height: 80px; | |
38 } | |
39 #flexbox { | |
40 border: 2px solid green; | |
41 margin: 5px; | |
42 width: 240px; | |
43 height: 300px; | |
44 -webkit-flex-direction: column; | |
45 } | |
46 </style> | |
47 </head> | |
48 <body> | |
49 <div id="article"> | |
50 <div> | |
51 <div id="part1" class="content"></div> | |
52 <div id="part2" class="content"></div> | |
53 </div> | |
54 </div> | |
55 | |
56 <div id="flexbox"> | |
57 <div id="region_1"></div> | |
58 <div id="region_2"></div> | |
59 </div> | |
60 | |
61 <script> | |
62 description("Tests the regionOversetChange event for regions inside flex
boxes"); | |
63 | |
64 if (window.testRunner) { | |
65 testRunner.dumpAsText(); | |
66 testRunner.waitUntilDone(); | |
67 } | |
68 window.jsTestIsAsync = true; | |
69 function flowContent(flowName) { | |
70 var region = document.getElementById("region_1"); | |
71 region.style.webkitFlowFrom = flowName; | |
72 region = document.getElementById("region_2"); | |
73 region.style.webkitFlowFrom = flowName; | |
74 } | |
75 | |
76 var eventFiredCount = 0; | |
77 function finishTest() { | |
78 shouldBe("eventFiredCount", "2"); | |
79 finishJSTest(); | |
80 } | |
81 | |
82 function enableFlexbox() { | |
83 debug("Engaging flexbox...") | |
84 document.getElementById("flexbox").style.display = "-webkit-flex"; | |
85 } | |
86 | |
87 function regionOversetChanged(event) { | |
88 ++eventFiredCount; | |
89 shouldBeEqualToString("event.target.name", "article"); | |
90 | |
91 // Activate the flexbox. | |
92 if (eventFiredCount == 1) { | |
93 if (window.testRunner) | |
94 enableFlexbox(); | |
95 else | |
96 setTimeout("enableFlexbox()", 1000); | |
97 | |
98 return; | |
99 } | |
100 | |
101 else | |
102 setTimeout("finishTest()", 200); | |
103 } | |
104 | |
105 function startTest() { | |
106 var flowThread = getFlowByName("article"); | |
107 flowThread.addEventListener("webkitregionoversetchange", regionOvers
etChanged); | |
108 | |
109 debug("Flowing content into regions..."); | |
110 flowContent("article"); | |
111 } | |
112 | |
113 window.addEventListener("load", startTest); | |
114 </script> | |
115 </body> | |
116 </html> | |
OLD | NEW |