third_party/WebKit/LayoutTests/fast/hidpi/image-set-border-image-comparison.html

   1 <html>
   2 <head>
   3 <script src="resources/srcset-helper.js"></script>
   4 <style>
   5 div {
   6         box-sizing: border-box;
   7     width: 40px;
   8     height: 13px;
   9 }
  10
  11 .test1 {
  12     border-image: -webkit-image-set(url('resources/Breakpoint.png') 1x, url('resources/Breakpoint-2x.png') 2x) 3 7 3 3 fill / 3px 7px 3px 3px;
  13 }
  14
  15 .test2 {
  16     border-image: -webkit-image-set(url('resources/Breakpoint.png') 1x, url('resources/Breakpoint-2x.png') 2x) 3 7 3 3 fill;
  17     border-width: 3px 7px 3px 3px;
  18 }
  19
  20 .test3 {
  21     border-image: url('resources/Breakpoint.png') 3 7 3 3 fill / 3px 7px 3px 3px;
  22 }
  23
  24 .test4 {
  25     border-image: url('resources/Breakpoint.png') 3 7 3 3 fill;
  26     border-width: 3px 7px 3px 3px;
  27 }
  28
  29 @media (-webkit-min-device-pixel-ratio: 2) {
  30     .test3, .test4 {
  31         border-image-source: url('resources/Breakpoint-2x.png');
  32         border-image-slice: 6 14 6 6 fill;
  33     }
  34 }
  35 </style>
  36 </head>
  37
  38 <body>
  39 The first two tests should match the last two.<br><br>
  40 <div class="test1"></div><br>
  41 <div class="test2"></div><br>
  42 <div class="test3"></div><br>
  43 <div class="test4"></div><br>
  44 </body>
  45 </html>