layout/reftests/border-image/multicolor-image-2.html

   1 <!DOCTYPE html>
   2 <html lang="en-US">
   3 <head>
   4   <title>test of border-image</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     border-image: url(10x5multicolor.png) 2 2 1 3 fill;
  17     -khtml-border-image: url(10x5multicolor.png) 2 2 1 3 fill;
  18     border-image: url(10x5multicolor.png) 2 2 1 3 fill;
  19     border-width: 4px 6px 8px 11px;
  20     border-style: solid;
  21     width: 9px;
  22     height: 1px;
  23   }
  24
  25   div.two {
  26     border-image: url(10x5multicolor.png) 40% 20% 20% 30% fill;
  27     -khtml-border-image: url(10x5multicolor.png) 40% 20% 20% 30% fill;
  28     border-image: url(10x5multicolor.png) 40% 20% 20% 30% fill;
  29     border-width: 3px 1px 0px 4px;
  30     border-style: solid;
  31     width: 2px;
  32     height: 17px;
  33   }
  34
  35   div.three {
  36     border-image: url(10x5multicolor.png) 40% 2 1 30% fill;
  37     -khtml-border-image: url(10x5multicolor.png) 40% 2 1 30% fill;
  38     border-image: url(10x5multicolor.png) 40% 2 1 30% fill;
  39     border-width: 10px 2px 5px 3px;
  40     border-style: solid;
  41     width: 17px;
  42     height: 8px;
  43   }
  44
  45   div.four {
  46     border-image: url(10x5multicolor.png) 2 2 20% 30% fill;
  47     -khtml-border-image: url(10x5multicolor.png) 2 2 20% 30% fill;
  48     border-image: url(10x5multicolor.png) 2 2 20% 30% fill;
  49     border-width: 5px 7px 1px 0;
  50     border-style: solid;
  51     width: 8px;
  52     height: 5px;
  53   }
  54
  55   div.five {
  56     border-width: 4px 8px 10px 2px;
  57     border-image: url(10x5multicolor.png) 40% 2 1 30% fill;
  58     -khtml-border-image: url(10x5multicolor.png) 40% 2 1 30% fill;
  59     border-image: url(10x5multicolor.png) 40% 2 1 30% fill;
  60     border-style: solid;
  61     width: 0;
  62     height: 8px;
  63   }
  64
  65   div.six {
  66     border-width: 4px 0 10px 2px;
  67     border-image: url(10x5multicolor.png) 40% 2 1 30% fill;
  68     -khtml-border-image: url(10x5multicolor.png) 40% 2 1 30% fill;
  69     border-image: url(10x5multicolor.png) 40% 2 1 30% fill;
  70     border-style: solid;
  71     width: 17px;
  72     height: 0;
  73   }
  74
  75   div.seven {
  76     border-image: url(10x5multicolor.png) 40% 2 1 30% fill;
  77     -khtml-border-image: url(10x5multicolor.png) 40% 2 1 30% fill;
  78     border-image: url(10x5multicolor.png) 40% 2 1 30% fill;
  79     border-width: 1px 3px 0 0;
  80     border-style: solid;
  81     width: 17px;
  82     height: 0;
  83   }
  84
  85   </style>
  86 </head>
  87 <body>
  88 <div class="one"></div>
  89 <div class="two"></div>
  90 <div class="three"></div>
  91 <div class="four"></div>
  92 <div class="five"></div>
  93 <div class="six"></div>
  94 <div class="seven"></div>
  95 </body>
  96 </html>