layout/reftests/border-image/multicolor-image-3.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 / 4px 6px 8px;
  17     -khtml-border-image: url(10x5multicolor.png) 2 / 4px 6px 8px;
  18     border-image: url(10x5multicolor.png) 2 / 4px 6px 8px;
  19     width: 5px;
  20     height: 2px;
  21   }
  22
  23   div.two {
  24     -moz-border-image: url(10x5multicolor.png) 2 1 / 4px;
  25     -khtml-border-image: url(10x5multicolor.png) 2 1 / 4px;
  26     border-image: url(10x5multicolor.png) 2 1 / 4px;
  27     width: 5px;
  28     height: 2px;
  29   }
  30
  31   div.three {
  32     -moz-border-image: url(10x5multicolor.png) 2 3 1;
  33     -khtml-border-image: url(10x5multicolor.png) 2 3 1;
  34     border-image: url(10x5multicolor.png) 2 3 1;
  35     border-width: 4px 2px;
  36     width: 5px;
  37     height: 2px;
  38   }
  39
  40   div.four {
  41     -moz-border-image: url(10x5multicolor.png) 2 3 1 1 / 4px 3px;
  42     -khtml-border-image: url(10x5multicolor.png) 2 3 1 1 / 4px 3px;
  43     border-image: url(10x5multicolor.png) 2 3 1 1 / 4px 3px;
  44     width: 5px;
  45     height: 2px;
  46   }
  47
  48   </style>
  49 </head>
  50 <body>
  51 <div class="one"></div>
  52 <div class="two"></div>
  53 <div class="three"></div>
  54 <div class="four"></div>
  55 </body>
  56 </html>