webkit-box-ordinal-group-1.html (1890B)
1 <!DOCTYPE html> 2 <!-- 3 Any copyright is dedicated to the Public Domain. 4 http://creativecommons.org/publicdomain/zero/1.0/ 5 --> 6 <html> 7 <head> 8 <title> 9 CSS Test: -webkit-box-ordinal-group inside a -webkit-box 10 </title> 11 <style> 12 .box { 13 display: -webkit-box; 14 border: 1px solid black; 15 margin: 5px 20px; 16 float: left; /* For testing in "rows" */ 17 } 18 br { clear: both; } 19 20 .box > * { 21 border: 1px dotted purple; 22 } 23 24 .bogOne { -webkit-box-ordinal-group: 1; } 25 .bogTwo { -webkit-box-ordinal-group: 2; } 26 .bogNine { -webkit-box-ordinal-group: 9; } 27 </style> 28 </head> 29 <body> 30 <!-- First row: initial value mixed with single specified values --> 31 <div class="box"> 32 <div>*</div> 33 <div class="bogOne">1a</div> 34 <div>*</div> 35 <div class="bogOne">1b</div> 36 <div>*</div> 37 </div> 38 39 <div class="box"> 40 <div>*</div> 41 <div class="bogTwo">2a</div> 42 <div>*</div> 43 <div class="bogTwo">2b</div> 44 <div>*</div> 45 </div> 46 47 <div class="box"> 48 <div>*</div> 49 <div class="bogNine">9a</div> 50 <div>*</div> 51 <div class="bogNine">9b</div> 52 <div>*</div> 53 </div> 54 55 <br> 56 57 <!-- Second row: various mixes of specified values --> 58 <div class="box"> 59 <div>*</div> 60 <div class="bogOne">1</div> 61 <div class="bogTwo">2</div> 62 <div class="bogNine">9</div> 63 </div> 64 65 <div class="box"> 66 <div class="bogNine">9</div> 67 <div class="bogTwo">2</div> 68 <div class="bogOne">1</div> 69 <div>*</div> 70 </div> 71 72 <div class="box"> 73 <div class="bogTwo">2a</div> 74 <div class="bogNine">9</div> 75 <div class="bogTwo">2b</div> 76 <div class="bogOne">1</div> 77 <div>*</div> 78 </div> 79 80 <div class="box"> 81 <div class="bogTwo">2a</div> 82 <div class="bogNine">9a</div> 83 <div class="bogNine">9b</div> 84 <div class="bogTwo">2b</div> 85 <div class="bogOne">1</div> 86 </div> 87 </body> 88 </html>