| OLD | NEW |
| (Empty) |
| 1 <!doctype html> | |
| 2 <html> | |
| 3 <head> | |
| 4 <style> | |
| 5 .region { | |
| 6 height: 180px; | |
| 7 width: 80px; | |
| 8 border: 2px solid black; | |
| 9 } | |
| 10 | |
| 11 .content { | |
| 12 height: 60px; | |
| 13 width: 40px; | |
| 14 } | |
| 15 | |
| 16 #red { | |
| 17 background-color: red; | |
| 18 } | |
| 19 | |
| 20 #green { | |
| 21 background-color: green; | |
| 22 display: inline-block; | |
| 23 } | |
| 24 | |
| 25 #yellow { | |
| 26 background-color: yellow; | |
| 27 display: inline-block; | |
| 28 } | |
| 29 | |
| 30 #blue { | |
| 31 background-color: blue; | |
| 32 } | |
| 33 </style> | |
| 34 </head> | |
| 35 <body onload="shuffle()"> | |
| 36 <p>Test for <a href="https://bugs.webkit.org/show_bug.cgi?id=103501">Fix
content node renderers ordering inside the named flow thread</a>.</p> | |
| 37 <p>The test adds four colored content nodes (mix of inline and block) to
a flow and then modifies the flow-into properties to force renderers to shuffle
.</p> | |
| 38 <p>On success, you should see the blocks ordered: red (top), green, yell
ow (middle), blue (bottom).</p> | |
| 39 | |
| 40 <div class="region"> | |
| 41 <div id="red" class="content">1</div> | |
| 42 <div id="green"class="content">2</div><div id="yellow"class="content
">3</div> | |
| 43 <div id="blue" class="content">4</div> | |
| 44 </div> | |
| 45 </body> | |
| 46 </html> | |
| OLD | NEW |