third_party/WebKit/LayoutTests/svg/as-border-image/svg-as-border-image.html

   1 <html>
   2 <head>
   3 <style>
   4     .svg, .image {
   5       display: inline-block;
   6       border: 1px solid black;
   7     }
   8     .svg > div, .image > div {
   9         border-width: 30px 30px 30px 30px;
  10         height: 100px;
  11         width: 100px;
  12         margin: 10px;
  13         outline: 1px solid black;
  14         display: inline-block;
  15     }
  16
  17     .svg > .rr {
  18         -webkit-border-image: url("resources/tiles-fixed-size.svg") 30 30 30 30 repeat repeat;
  19     }
  20
  21     .svg > .rs {
  22         -webkit-border-image: url("resources/tiles-fixed-size.svg") 30 30 30 30 repeat stretch;
  23     }
  24
  25     .svg > .sr {
  26         -webkit-border-image: url("resources/tiles-fixed-size.svg") 30 30 30 30 stretch repeat;
  27     }
  28
  29     .svg > .ss {
  30         -webkit-border-image: url("resources/tiles-fixed-size.svg") 30 30 30 30 stretch stretch;
  31     }
  32
  33
  34     .image > .rr {
  35         -webkit-border-image: url("resources/tiles.png") 30 30 30 30 repeat repeat;
  36     }
  37
  38     .image > .rs {
  39         -webkit-border-image: url("resources/tiles.png") 30 30 30 30 repeat stretch;
  40     }
  41
  42     .image > .sr {
  43         -webkit-border-image: url("resources/tiles.png") 30 30 30 30 stretch repeat;
  44     }
  45
  46     .image > .ss {
  47         -webkit-border-image: url("resources/tiles.png") 30 30 30 30 stretch stretch;
  48     }
  49 </style>
  50 </head>
  51 <body>
  52
  53   <!-- Left and right sides should look identical -->
  54   <div class="svg">
  55     <h2>SVG border-image</h2>
  56     <div class="rr"></div>
  57     <div class="rs"></div>
  58     <br>
  59     <div class="sr"></div>
  60     <div class="ss"></div>
  61   </div>
  62
  63   <div class="image">
  64     <h2>PNG border-image</h2>
  65     <div class="rr"></div>
  66     <div class="rs"></div>
  67     <br>
  68     <div class="sr"></div>
  69     <div class="ss"></div>
  70   </div>
  71
  72 </body>
  73 </html>