552334-1.html (1119B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <style> 5 div { position: absolute; top: 0; left: 0; width: 100px; height: 100px; } 6 div.offset { left: 100px; } 7 div.offset2 { left: 200px; } 8 </style> 9 </head> 10 <body> 11 <!-- Make sure the difference of the two z-index values overflows a 32-bit 12 signed int. So set the positive one to 2^30 + 1 and the negative one to 13 -(2^30 + 1). Then the difference is 2^31 + 2 which is negative when 14 treated as a 32-bit signed int. --> 15 <div style="background: green; z-index: 1073741825"></div> 16 <div style="background: red; z-index: -1073741825"></div> 17 <!-- Test clamping on the high end by setting the high z-index to 18 2^32 + 1 --> 19 <div class="offset" style="background: green; z-index: 4294967297"></div> 20 <div class="offset" style="background: red; z-index: 2"></div> 21 <!-- Test clamping on the low end by setting the low z-index to 22 -(2^32 + 1) --> 23 <div class="offset2" style="background: green; z-index: -2"></div> 24 <div class="offset2" style="background: red; z-index: -4294967297"></div> 25 </body> 26 </html>