layout/reftests/pixel-rounding/border-image-width-4.html

   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 div { position: absolute; height: 10px; width: 10px; border-style: solid; }
   9
  10 </style>
  11 </head>
  12 <body>
  13
  14 <div style="top: 10px; left: 110px; border-image: url(random-10x10.png) 3 2 2 3; border-width: 2.4px 2px 2px 2px;"></div>
  15 <div style="top: 10px; left: 130px; border-image: url(random-10x10.png) 3 2 2 3 stretch; border-width: 2px 2.4px 2px 2px;"></div>
  16 <div style="top: 10px; left: 150px; border-image: url(random-10x10.png) 3 2 2 3 stretch stretch; border-width: 2px 2px 2.4px 2px;"></div>
  17 <div style="top: 10px; left: 170px; border-image: url(random-10x10.png) 3 2 2 3; border-width: 2px 2px 2px 2.4px;"></div>
  18 <div style="top: 10px; left: 190px; border-image: url(random-10x10.png) 3 2 2 3; border-width: 2.4px 2.4px 2.4px 2.4px;"></div>
  19
  20 <div style="top: 30px; left: 110px; border-image: url(random-10x10.png) 3 2 2 3 round round; border-width: 2.4px 2px 2px 2px;"></div>
  21 <div style="top: 30px; left: 130px; border-image: url(random-10x10.png) 3 2 2 3 round; border-width: 2px 2.4px 2px 2px;"></div>
  22 <div style="top: 30px; left: 150px; border-image: url(random-10x10.png) 3 2 2 3 round; border-width: 2px 2px 2.4px 2px;"></div>
  23 <div style="top: 30px; left: 170px; border-image: url(random-10x10.png) 3 2 2 3 round; border-width: 2px 2px 2px 2.4px;"></div>
  24 <div style="top: 30px; left: 190px; border-image: url(random-10x10.png) 3 2 2 3 round round; border-width: 2.4px 2.4px 2.4px 2.4px;"></div>
  25
  26 <div style="top: 50px; left: 110px; border-image: url(random-10x10.png) 3 2 2 3 repeat repeat; border-width: 2.4px 2px 2px 2px;"></div>
  27 <div style="top: 50px; left: 130px; border-image: url(random-10x10.png) 3 2 2 3 repeat; border-width: 2px 2.4px 2px 2px;"></div>
  28 <div style="top: 50px; left: 150px; border-image: url(random-10x10.png) 3 2 2 3 repeat; border-width: 2px 2px 2.4px 2px;"></div>
  29 <div style="top: 50px; left: 170px; border-image: url(random-10x10.png) 3 2 2 3 repeat; border-width: 2px 2px 2px 2.4px;"></div>
  30 <div style="top: 50px; left: 190px; border-image: url(random-10x10.png) 3 2 2 3 repeat repeat; border-width: 2.4px 2.4px 2.4px 2.4px;"></div>
  31
  32 <div style="top: 70px; left: 110px; border-image: url(random-10x10.png) 3 2 2 3 stretch round; border-width: 2.4px 2px 2px 2px;"></div>
  33 <div style="top: 70px; left: 130px; border-image: url(random-10x10.png) 3 2 2 3 round repeat; border-width: 2px 2.4px 2px 2px;"></div>
  34 <div style="top: 70px; left: 150px; border-image: url(random-10x10.png) 3 2 2 3 stretch repeat; border-width: 2px 2px 2.4px 2px;"></div>
  35 <div style="top: 70px; left: 170px; border-image: url(random-10x10.png) 3 2 2 3 repeat round; border-width: 2px 2px 2px 2.4px;"></div>
  36 <div style="top: 70px; left: 190px; border-image: url(random-10x10.png) 3 2 2 3 repeat round; border-width: 2.4px 2.4px 2.4px 2.4px;"></div>
  37
  38 </body>
  39 </html>