layout/reftests/border-image/border-image-repeating-radial-gradient-repeat-repeat-2.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: repeating-radial-gradient(ellipse farthest-corner, red, blue 20%, red 40%);
   9   width: 180px;
  10   height: 180px;
  11 }
  12 div.border60repeat {
  13   border-image-repeat: repeat;
  14   border-image-slice: 60;
  15 }
  16 div.border60fillrepeat {
  17   border-image-repeat: repeat;
  18   border-image-slice: 60 fill;
  19 }
  20 div.border30fill2repeat {
  21   border-image-repeat: repeat;
  22   border-image-slice: 30 fill;
  23   border-image-width: 2;
  24 }
  25 </style>
  26 </head>
  27 <body>
  28 <div class="border60repeat"></div>
  29 <div class="border60fillrepeat"></div>
  30 <div class="border30fill2repeat"></div>
  31 </body>
  32 </html>