OLD | NEW |
| (Empty) |
1 <!DOCTYPE HTML> | |
2 | |
3 <style> | |
4 #DIV1 { -webkit-flow-into:flowA; } | |
5 #SPAN2 { -webkit-flow-into: flowB; } | |
6 #DIV3 { -webkit-flow-into: flowC; } | |
7 | |
8 #REGION1, #REGION2, #REGION3 { | |
9 width: 100%; | |
10 height: 100px; | |
11 } | |
12 #REGION1 { -webkit-flow-from: flowA; } | |
13 #REGION2 { -webkit-flow-from: flowB; } | |
14 #REGION3 { -webkit-flow-from: flowC; } | |
15 </style> | |
16 | |
17 <div id="DIV1">DIV1 - flowA</div> | |
18 <span id="SPAN2">SPAN2 - flowB</span> | |
19 <div id="DIV3">DIV3 - flowC</div> | |
20 | |
21 <!-- Make some regions, so that the flow has a size and it's visible in the rend
er tree. --> | |
22 <div id="REGION1"></div> | |
23 <div id="REGION2"></div> | |
24 <div id="REGION3"></div> | |
25 | |
26 <script> | |
27 function test(name, flow, before) { | |
28 var el = document.createElement("div"); | |
29 el.id = name; | |
30 el.setAttribute("style", "-webkit-flow-into:"+ flow); | |
31 el.innerHTML = name + " - " + flow; | |
32 if (before) | |
33 document.body.insertBefore(el, document.getElementById(before)); | |
34 else | |
35 document.body.appendChild(el); | |
36 } | |
37 | |
38 // Insert a new element in flowA, before DIV1 (same flow-thread). | |
39 test("DIV4", "flowA", "DIV1"); | |
40 | |
41 // Insert a new element in flowB, before DIV1 (different flow-thread). | |
42 test("DIV5", "flowB", "DIV1"); | |
43 | |
44 // Insert a new element in flowB, before DIV3 (different flow-thread). | |
45 test("DIV6", "flowB", "DIV3"); | |
46 | |
47 // Insert a new element in flowB, before SPAN2 (same flow-thread, span inside an
onymous block). | |
48 test("DIV7", "flowB", "SPAN2"); | |
49 | |
50 // Append a new element in flowC. | |
51 test("DIV8", "flowC"); | |
52 </script> | |
OLD | NEW |