layout/reftests/border-image/multicolor-image-3-ref.html

   1 <!DOCTYPE html>
   2 <html lang="en-US">
   3 <head>
   4   <title>test of -moz-border-image: number repetition</title>
   5   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
   6   <meta http-equiv="Content-Style-Type" content="text/css">
   7   <style type="text/css">
   8
   9   div {
  10     background: red; /* fail if this shows through */
  11     background-image: url('3x3multicolor.png'); /* fail if this shows through */
  12     margin-bottom: 2px;
  13   }
  14
  15   div.one {
  16     -moz-border-image: url(10x5multicolor.png) 2 2 2 2 / 4px 6px 8px 6px;
  17     -khtml-border-image: url(10x5multicolor.png) 2 2 2 2 / 4px 6px 8px 6px;
  18     border-image: url(10x5multicolor.png) 2 2 2 2 / 4px 6px 8px 6px;
  19     width: 5px;
  20     height: 2px;
  21   }
  22
  23   div.two {
  24     -moz-border-image: url(10x5multicolor.png) 2 1 2 1/ 4px 4px 4px 4px;
  25     -khtml-border-image: url(10x5multicolor.png) 2 1 2 1/ 4px 4px 4px 4px;
  26     border-image: url(10x5multicolor.png) 2 1 2 1/ 4px 4px 4px 4px;
  27     width: 5px;
  28     height: 2px;
  29   }
  30
  31   div.three {
  32     -moz-border-image: url(10x5multicolor.png) 2 3 1 3 / 4px 2px 4px 2px;
  33     -khtml-border-image: url(10x5multicolor.png) 2 3 1 3 / 4px 2px 4px 2px;
  34     border-image: url(10x5multicolor.png) 2 3 1 3 / 4px 2px 4px 2px;
  35     width: 5px;
  36     height: 2px;
  37   }
  38
  39   div.four {
  40     -moz-border-image: url(10x5multicolor.png) 2 3 1 1 / 4px 3px 4px 3px;
  41     -khtml-border-image: url(10x5multicolor.png) 2 3 1 1 / 4px 3px 4px 3px;
  42     border-image: url(10x5multicolor.png) 2 3 1 1 / 4px 3px 4px 3px;
  43     width: 5px;
  44     height: 2px;
  45   }
  46
  47   </style>
  48 </head>
  49 <body>
  50 <div class="one"></div>
  51 <div class="two"></div>
  52 <div class="three"></div>
  53 <div class="four"></div>
  54 </body>
  55 </html>