rounded-background-color-height-top-6.html (1774B)
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <title>Pixel rounding testcase</title> 5 <style type="text/css"> 6 7 html, body { margin: 0; border: none; padding: 0; } 8 9 body > div { margin: 10px; height: 80px; position: relative; } 10 11 body > div > div { 12 position: absolute; top: 0.1px; left: 0; height: 10.5px; width: 10px; 13 } 14 15 body > div > div { background: green; } 16 17 .tl { top: 20.1px; } 18 .tr { margin-top: 40px; } 19 .bl { left: 20px; } 20 .br { margin-left: 40px; } 21 22 div.one > div.tl { border-top-left-radius: 1px; } 23 div.one > div.tr { border-top-right-radius: 1px; } 24 div.one > div.bl { border-bottom-left-radius: 1px; } 25 div.one > div.br { border-bottom-right-radius: 1px; } 26 div.four > div.tl { border-top-left-radius: 4px; } 27 div.four > div.tr { border-top-right-radius: 4px; } 28 div.four > div.bl { border-bottom-left-radius: 4px; } 29 div.four > div.br { border-bottom-right-radius: 4px; } 30 31 </style> 32 </head> 33 <body> 34 35 <div class="one"> 36 <div></div> 37 <div class="tl"></div> 38 <div class="tr"></div> 39 <div class="bl"></div> 40 <div class="br"></div> 41 <div class="tl tr"></div> 42 <div class="tl bl"></div> 43 <div class="tl br"></div> 44 <div class="tr bl"></div> 45 <div class="tr br"></div> 46 <div class="bl br"></div> 47 <div class="tl tr bl"></div> 48 <div class="tl tr br"></div> 49 <div class="tl bl br"></div> 50 <div class="tr bl br"></div> 51 <div class="tl tr bl br"></div> 52 </div> 53 54 <div class="four"> 55 <div></div> 56 <div class="tl"></div> 57 <div class="tr"></div> 58 <div class="bl"></div> 59 <div class="br"></div> 60 <div class="tl tr"></div> 61 <div class="tl bl"></div> 62 <div class="tl br"></div> 63 <div class="tr bl"></div> 64 <div class="tr br"></div> 65 <div class="bl br"></div> 66 <div class="tl tr bl"></div> 67 <div class="tl tr br"></div> 68 <div class="tl bl br"></div> 69 <div class="tr bl br"></div> 70 <div class="tl tr bl br"></div> 71 </div> 72 73 </body> 74 </html>