| <html> | |
| <head> | |
| <style> | |
| div { | |
| display: -moz-box; | |
| display: -webkit-box; | |
| display: box; | |
| } | |
| .strip { | |
| -moz-box-pack: justify; | |
| -webkit-box-pack: justify; | |
| box-pack: justify; | |
| } | |
| .black { | |
| background-color: black | |
| } | |
| .board { | |
| border:4px solid maroon; | |
| width: 350px; | |
| height: 350px; | |
| -moz-box-orient: vertical; | |
| -webkit-box-orient: vertical; | |
| box-orient: vertical; | |
| } | |
| .square { | |
| background-color: black; | |
| width: 50px; | |
| height: 50px; | |
| } | |
| .white { | |
| background-color: white; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <p>You should see a 350x350 pixel (7 by 7) black/white checkerboard pattern below. This test is checking | |
| to see if box-pack: justify is supported.</p> | |
| <div class="board"> | |
| <div class="strip"> | |
| <div class="square"></div> | |
| <div class="square"></div> | |
| <div class="square"></div> | |
| <div class="square"></div> | |
| </div> | |
| <div class="strip black"> | |
| <div class="square white"></div> | |
| <div class="square white"></div> | |
| <div class="square white"></div> | |
| <div class="square white"></div> | |
| </div> | |
| <div class="strip"> | |
| <div class="square"></div> | |
| <div class="square"></div> | |
| <div class="square"></div> | |
| <div class="square"></div> | |
| </div> | |
| <div class="strip black"> | |
| <div class="square white"></div> | |
| <div class="square white"></div> | |
| <div class="square white"></div> | |
| <div class="square white"></div> | |
| </div> | |
| <div class="strip"> | |
| <div class="square"></div> | |
| <div class="square"></div> | |
| <div class="square"></div> | |
| <div class="square"></div> | |
| </div> | |
| <div class="strip black"> | |
| <div class="square white"></div> | |
| <div class="square white"></div> | |
| <div class="square white"></div> | |
| <div class="square white"></div> | |
| </div> | |
| <div class="strip"> | |
| <div class="square"></div> | |
| <div class="square"></div> | |
| <div class="square"></div> | |
| <div class="square"></div> | |
| </div> | |
| </div> | |