LayoutTests/fast/gradients/border-image-gradient-sides-and-corners.html

   1 <html>
   2 <head>
   3     <style>
   4         div {
   5             background-color: blue;
   6             border: 25px solid black;
   7             width: 50px;
   8             height: 50px;
   9             margin: 10px;
  10         }
  11
  12         .cornersOnly {
  13             -webkit-border-image: -webkit-gradient(linear, left top, left bottom, from(#00abeb), to(#fff), color-stop(0.5, #fff), color-stop(0.5, #66cc00)) 50 50 50 50 repeat repeat;
  14         }
  15
  16         .horizontalOnly {
  17             -webkit-border-image: -webkit-gradient(linear, left top, left bottom, from(#00abeb), to(#fff), color-stop(0.5, #fff), color-stop(0.5, #66cc00)) 50 25 50 25 repeat repeat;
  18         }
  19
  20         .verticalOnly {
  21             -webkit-border-image: -webkit-gradient(linear, left top, left bottom, from(#00abeb), to(#fff), color-stop(0.5, #fff), color-stop(0.5, #66cc00)) 25 50 25 50 stretch stretch;
  22         }
  23     </style>
  24 </head>
  25 <body>
  26     <div class="cornersOnly"></div>
  27     <div class="horizontalOnly"></div>
  28     <div class="verticalOnly"></div>
  29 </body>
  30 </html>