third_party/WebKit/LayoutTests/fast/borders/border-image-repeat-round.html

   1 <html>
   2 <head>
   3     <style>
   4         div {
   5             width: 83px;
   6             height: 60px;
   7             margin: 10px;
   8             display: inline-block;
   9         }
  10
  11         .text-image {
  12             border-width: 21px 30px 30px 21px;
  13             -webkit-border-image: url("resources/border-image.png") 21 30 30 21;
  14         }
  15
  16         .diamond-image {
  17             border: 15px solid transparent;
  18             border-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFoAAABaCAYAAAA4qEECAAADsklEQVR4Xu3cSXbbMAwAUOpk7SnSZdOTNd3mkq5ki7YlTgCIgXqEt7GE4AePIiGGS/gOt2Dx+QgLJeztO3yu1/1YPsIfyvVW+S5WgQMBekf+uwN/kbCNCusy0CfkWMx4bIcuDwQFZBq2Q+ehG8h4bIdOoYHIOGyHPkIjkeHYDv2CJiLDsB364dSJ3MZ2aDbkOvbs0EyVfH6ipvPsmaGFkPOVPSu0MHKKPSO0EvIRezbotWW4dd9ig4jUiCNc9LW2DLfun/rHrKlkAn0L/5Yl/FZXXgOaQW9tUtWhY0P+tVbzbENH7EerYEfkrZRnhWZcDRbaf3slx5/ODC2G/V7JDs3WTDq1/06V7NAnn8fL175pX66SHTodWrsekDXk2R+GuacYCbuF7NCFCQNmGIEgO3R5rQaqbCiyQ9cXxVVsDLJDt7sPWWwsskO3oZNFDQXZoWHQT+xb+HlvEFE+Zktwyi+7XtO9q5MY1+qy3nx7ts727eq0EiPE5djFioZm29VJSNjiEq58UdCsuzot1JAxOfMFQ4MWDiHg9ysjk9f6One+IGhg0GhweWyJfJvQyKCXx5bKtwpNDHpZbMl8i9CdQS+HLZ1vFpop6GWwNfJNoJmDDo+tle8BWijosNia+T6hhYMOh62d7x1aKegw2Bb56u5/ey3rzBY1ysiv4jIJTG3aM6y/zfJVHzoMkePfSRV7z1f3YTgAsir2W75607uBkFWwT/nqLFgGRBbFzuQrvwQfGFkEu5CvbFPpAsis2JV85dqkF0JmwW7kK9P4vyByFzYg3yY0ep4NCMqw7hC9BWqeDcwXBA3GBgYVVWK6OQgbkS8YuomNCMpkIX6bKjYyXxR0ERsZVFyIMUAWm5AvGjrBJgRldFC51QGbmC8J+onds6tThYgvyB27I1/T/wWnMOzV5WeTgvH8bFIwVd8XkdCFGQD+TY3ZRnSjwJjTdhtzWhy2Ub7Dj9GghQNmF6tDpyMREDleCKtshz5CI5Hh2A79giYiw7Ad+uHUidzGdmg25Dr27NBMlXx+ovrZpO/zaCHkfGXPWtHCyCn2jNBKyEfs2aBNjszcVpB+Nmlfjwp09da097NJQVT0L8U3I7MNHX42Kb1mcFe+9aNFH4rnd3yzVnT864hg516kzg7N2OfYmyZ+NukDovAqi6Wya1sCvKKZ2qStfRcOzdD4byFvIRw6nbSghhEIskOXZ4YgbCiyQ9en4Jy7On3oaCx3uHZ1OjRgXcmxq9OhAdDPRU3Hrk4r6P9CduKlL0jWvgAAAABJRU5ErkJggg==) 30 30;
  19         }
  20
  21         div.round-round {
  22             border-image-repeat: round round;
  23         }
  24
  25         div.round-stretch {
  26             border-image-repeat: round stretch;
  27         }
  28
  29         div.repeat-round {
  30             border-image-repeat: repeat round;
  31         }
  32
  33     </style>
  34 </head>
  35 <body>
  36     <div class="text-image round-round"></div>
  37     <div class="text-image round-stretch"></div>
  38     <div class="text-image repeat-round"></div>
  39     <br>
  40     <div class="diamond-image round-round"></div>
  41     <div class="diamond-image round-stretch"></div>
  42     <div class="diamond-image repeat-round"></div>
  43 </body>
  44 </html>