layout/reftests/border-image/border-image-linear-gradient-repeat-round-1.html

   1 <!DOCTYPE html>
   2 <html lang="en-US">
   3 <head>
   4 <title>test of border-image-source: linear-gradient with border-image-repeat</title>
   5 <style>
   6 div {
   7   border: 30px solid black;
   8   border-image: linear-gradient(to bottom right, red, blue);
   9   width: 180px;
  10   height: 180px;
  11 }
  12 div.borderround {
  13   border-image-repeat: round;
  14 }
  15 div.border12round {
  16   border-image-repeat: round;
  17   border-image-slice: 12;
  18 }
  19 div.border30round {
  20   border-image-repeat: round;
  21   border-image-slice: 30;
  22 }
  23 </style>
  24 </head>
  25 <body>
  26 <div class="borderround"></div>
  27 <div class="border12round"></div>
  28 <div class="border30round"></div>
  29 </body>
  30 </html>