| <!DOCTYPE html> |
| <!-- |
| | This test has an increased chance of failing when the insertion order of |
| | positioned boxes into container boxes is not honored. |
| --> |
| <html> |
| <head> |
| <style> |
| body { |
| margin: 0px; |
| font-family: Roboto; |
| font-size: 18px; |
| } |
| .light-blue { |
| background-color: #B3E5FC; |
| } |
| .teal { |
| background-color: #26A69A; |
| } |
| .red { |
| background-color: #F44336; |
| } |
| .relative { |
| position:absolute; |
| display:inline-block; |
| width:20px; |
| height:30px; |
| } |
| .box { |
| min-height:30px; |
| } |
| </style> |
| <script> |
| if (window.testRunner) { |
| window.testRunner.waitUntilDone(); |
| } |
| |
| makebox = function(text, color) { |
| var new_box = document.createElement('span'); |
| new_box.className = 'relative ' + color; |
| new_box.textContent = text; |
| return new_box; |
| } |
| |
| window.onload = function() { |
| var new_box_1 = makebox('1', 'teal'); |
| var new_box_2 = makebox('2', 'red'); |
| var new_box_3 = makebox('3', 'red'); |
| document.getElementById('parent1').appendChild(new_box_3); |
| document.getElementById('parent1').appendChild(new_box_2); |
| document.getElementById('parent1').appendChild(new_box_1); |
| |
| var new_box_z = makebox('Z', 'red'); |
| var new_box_y = makebox('Y', 'red'); |
| var new_box_x = makebox('X', 'teal'); |
| document.getElementById('parent2').appendChild(new_box_z); |
| document.getElementById('parent2').appendChild(new_box_y); |
| document.getElementById('parent2').appendChild(new_box_x); |
| |
| var new_box_p = makebox('P', 'red'); |
| var new_box_q = makebox('Q', 'teal'); |
| var new_box_r = makebox('R', 'red'); |
| document.getElementById('parent3').appendChild(new_box_p); |
| document.getElementById('parent3').appendChild(new_box_r); |
| document.getElementById('parent3').appendChild(new_box_q); |
| |
| if (window.testRunner) { |
| window.testRunner.notifyDone(); |
| } |
| } |
| </script> |
| </head> |
| <body> |
| <div id="parent1" class="light-blue box"></div> |
| <div id="parent2" class="light-blue box"></div> |
| <div id="parent3" class="light-blue box"></div> |
| </body> |
| </html> |
