<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>