LayoutTests/fast/gradients/css3-color-stops.html

   1 <!DOCTYPE html>
   2
   3 <html>
   4 <head>
   5   <style type="text/css" media="screen">
   6     .box {
   7       display: inline-block;
   8       height: 120px;
   9       width: 200px;
  10       margin: 10px;
  11       border: 1px solid black;
  12       background-repeat: no-repeat;
  13     }
  14
  15     .linear1 {
  16       background-image: -webkit-linear-gradient(left, black);
  17       background-image: -moz-linear-gradient(left, black);
  18     }
  19
  20     .linear2 {
  21       background-image: -webkit-linear-gradient(left, white, black);
  22       background-image: -moz-linear-gradient(left, white, black);
  23     }
  24
  25     .linear3 {
  26       background-image: -webkit-linear-gradient(left, red, green, blue);
  27       background-image: -moz-linear-gradient(left, red, green, blue);
  28     }
  29
  30     .linear4 {
  31       background-image: -webkit-linear-gradient(left, red 25%, green 50%, blue 75%);
  32       background-image: -moz-linear-gradient(left, red 25%, green 50%, blue 75%);
  33     }
  34
  35     .linear5 {
  36       /* Green should get shifted to 50% */
  37       background-image: -webkit-linear-gradient(left, red 50%, green 30%, blue 90%);
  38       background-image: -moz-linear-gradient(left, red 50%, green 30%, blue 90%);
  39     }
  40
  41     .linear6 {
  42       /* Green and yellow should be evenly spaced */
  43       background-image: -webkit-linear-gradient(left, red, yellow, green, blue);
  44       background-image: -moz-linear-gradient(left, red, yellow, green, blue);
  45     }
  46
  47     .linear7 {
  48       background-image: -webkit-linear-gradient(red -50%, green, blue, green, blue 150%);
  49       background-image: -moz-linear-gradient(red -50%, green, blue, green, blue 150%);
  50     }
  51
  52     .linear8 {
  53       background-image: -webkit-linear-gradient(left, red, green 100px, blue);
  54       background-image: -moz-linear-gradient(left, red, green 100px, blue);
  55     }
  56
  57     .linear9 {
  58       background-image: -webkit-linear-gradient(left, red, green 120%, blue);
  59       background-image: -moz-linear-gradient(left, red, green 120%, blue);
  60     }
  61   </style>
  62   <script type="text/javascript" charset="utf-8">
  63     if (window.layoutTestController) {
  64       var dumpPixels = true;
  65       layoutTestController.dumpAsText(dumpPixels);
  66     }
  67   </script>
  68 </head>
  69 <body>
  70
  71   <div class="linear1 box"></div>
  72   <div class="linear2 box"></div>
  73   <div class="linear3 box"></div>
  74   <br>
  75   <div class="linear4 box"></div>
  76   <div class="linear5 box"></div>
  77   <div class="linear6 box"></div>
  78   <br>
  79   <div class="linear7 box"></div>
  80   <div class="linear8 box"></div>
  81   <div class="linear9 box"></div>
  82
  83 </body>
  84 </html>