webkit-box-ordinal-group-3.html (2871B)
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 with huge values 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 .bogTen { -webkit-box-ordinal-group: 10; } 25 .bogHugeA { -webkit-box-ordinal-group: 2147483646; /* 2^31 - 2 */ } 26 .bogHugeB { 27 /* NOTE: This is INT32_MAX, so we may not be able to distinguish this 28 from anything larger than it (if we represent it internally in a 29 32-bit signed integer). However, it's still worth testing larger 30 values against e.g. 10 to be sure they don't overflow into 31 negative territory. */ 32 -webkit-box-ordinal-group: 2147483647; /* 2^31 - 1 */ } 33 34 .bogHugeC { -webkit-box-ordinal-group: 4294967294; /* 2^32 - 2 */ } 35 .bogHugeD { -webkit-box-ordinal-group: 4294967295; /* 2^32 - 1 */ } 36 .bogHugeE { -webkit-box-ordinal-group: 4294967296; /* 2^32 */ } 37 .bogHugeF { -webkit-box-ordinal-group: 8589934592; /* 2^33 */ } 38 </style> 39 </head> 40 <body> 41 <!-- Test each huge value to see if it sorts after smaller values. 42 (The divs with huge values should sort to the right.) --> 43 <div class="box"> 44 <div class="bogHugeA">A</div> 45 <div class="bogTen">10</div> 46 <div>*</div> 47 </div> 48 <div class="box"> 49 <div class="bogHugeB">B</div> 50 <div class="bogTen">10</div> 51 <div>*</div> 52 </div> 53 <div class="box"> 54 <div class="bogHugeC">C</div> 55 <div class="bogTen">10</div> 56 <div>*</div> 57 </div> 58 59 <br> 60 61 <div class="box"> 62 <div class="bogHugeD">D</div> 63 <div class="bogTen">10</div> 64 <div>*</div> 65 </div> 66 <div class="box"> 67 <div class="bogHugeE">E</div> 68 <div class="bogTen">10</div> 69 <div>*</div> 70 </div> 71 <div class="box"> 72 <div class="bogHugeE">F</div> 73 <div class="bogTen">10</div> 74 <div>*</div> 75 </div> 76 77 <br> 78 79 <!-- Test that 'bogHugeA' sorts to the left of larger huge values. It's 80 less than INT32_MAX, so it's reasonable to expect that it can be 81 compared correctly against (possibly-clamped) larger values) --> 82 <div class="box"> 83 <div class="bogHugeB">B</div> 84 <div class="bogHugeA">A</div> 85 </div> 86 <div class="box"> 87 <div class="bogHugeC">C</div> 88 <div class="bogHugeA">A</div> 89 </div> 90 <div class="box"> 91 <div class="bogHugeD">D</div> 92 <div class="bogHugeA">A</div> 93 </div> 94 <div class="box"> 95 <div class="bogHugeE">E</div> 96 <div class="bogHugeA">A</div> 97 </div> 98 <div class="box"> 99 <div class="bogHugeF">F</div> 100 <div class="bogHugeA">A</div> 101 </div> 102 </body> 103 </html>