<html>
<head>
<style>
div.box {
display: -moz-box;
display: -webkit-box;
display: box;
}
div.number {
border: 2px solid black;
padding: 4px;
margin: 4px;
}
.first {
-moz-box-ordinal-group: 1;
-webkit-box-ordinal-group: 1;
box-ordinal-group: 1;
}
.second {
-moz-box-ordinal-group: 1000000000;
-webkit-box-ordinal-group: 1000000000;
box-ordinal-group: 1000000000;
}
.third {
-moz-box-ordinal-group: 2000000000;
-webkit-box-ordinal-group: 2000000000;
box-ordinal-group: 2000000000;
}
.fourth {
-moz-box-ordinal-group: 3000000000;
-webkit-box-ordinal-group: 3000000000;
box-ordinal-group: 3000000000;
}
.fifth {
-moz-box-ordinal-group: 4000000000;
-webkit-box-ordinal-group: 4000000000;
box-ordinal-group: 4000000000;
}
</style>
<script>
if (window.testRunner)
testRunner.dumpAsText();
</script>
<body>
<p>
This tests to make sure that large box-ordinal-group values don't hang the renderer.
This test passes if it does not timeout.
</p>
<div class="box">
<div class="number first">1</div>
<div class="number second">2</div>
<div class="number third">3</div>
<div class="number fourth">4</div>
<div class="number fifth">5</div>
</div>
<div class="box" style="-webkit-box-direction: reverse">
<div class="number third">3</div>
<div class="number second">4</div>
<div class="number fifth">1</div>
<div class="number fourth">2</div>
<div class="number first">5</div>
</div>
</body>
</html>