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

   1 <html>
   2 <head>
   3 <style>
   4     .svg, .image {
   5       display: inline-block;
   6       border: 1px solid black;
   7     }
   8
   9     .svg > div, .image > div {
  10         border-width: 30px 30px 30px 30px;
  11         height: 100px;
  12         width: 100px;
  13         margin: 10px;
  14         outline: 1px solid black;
  15         display: inline-block;
  16     }
  17
  18     .svg > .rr {
  19         -webkit-border-image: url("resources/tiles-relative-size.svg") 30 30 30 30 repeat repeat;
  20     }
  21
  22     .svg > .rs {
  23         -webkit-border-image: url("resources/tiles-relative-size.svg") 30 30 30 30 repeat stretch;
  24     }
  25
  26     .svg > .sr {
  27         -webkit-border-image: url("resources/tiles-relative-size.svg") 30 30 30 30 stretch repeat;
  28     }
  29
  30     .svg > .ss {
  31         -webkit-border-image: url("resources/tiles-relative-size.svg") 30 30 30 30 stretch stretch;
  32     }
  33
  34     .image > .rr {
  35         -webkit-border-image: url("resources/large-tiles.png") 30 30 30 30 repeat repeat;
  36     }
  37
  38     .image > .rs {
  39         -webkit-border-image: url("resources/large-tiles.png") 30 30 30 30 repeat stretch;
  40     }
  41
  42     .image > .sr {
  43         -webkit-border-image: url("resources/large-tiles.png") 30 30 30 30 stretch repeat;
  44     }
  45
  46     .image > .ss {
  47         -webkit-border-image: url("resources/large-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>