third_party/WebKit/LayoutTests/fast/gradients/unprefixed-linear-angle-gradients.html

   1 <!DOCTYPE html>
   2
   3 <html>
   4 <head>
   5   <style>
   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: linear-gradient(white, black);
  17     }
  18
  19     .linear2 {
  20       background-image: linear-gradient(to top left, white, black);
  21     }
  22
  23     .linear3 {
  24       background-image: linear-gradient(45deg, white, black);
  25     }
  26
  27     .linear4 {
  28       background-image: linear-gradient(-45deg, white, black);
  29     }
  30
  31     .linear5 {
  32       background-image: linear-gradient(540deg, white, black);
  33     }
  34
  35     .linear6 {
  36       background-image: linear-gradient(to top left, white -20%, black 120%);
  37     }
  38
  39     .linear7 {
  40       background-image: linear-gradient(to top left, white -20px, black 120px);
  41     }
  42
  43     .linear8 {
  44       background-image: linear-gradient(to top left, white -20%, blue, black 120%);
  45     }
  46
  47     .linear9 {
  48       background-image: linear-gradient(0deg, white -20%, blue, black 120%);
  49     }
  50   </style>
  51   <script>
  52     if (window.testRunner) {
  53       testRunner.dumpAsTextWithPixelResults();
  54     }
  55   </script>
  56 </head>
  57 <body>
  58
  59   <div class="linear1 box"></div>
  60   <div class="linear2 box"></div>
  61   <div class="linear3 box"></div>
  62   <br>
  63   <div class="linear4 box"></div>
  64   <div class="linear5 box"></div>
  65   <div class="linear6 box"></div>
  66   <br>
  67   <div class="linear7 box"></div>
  68   <div class="linear8 box"></div>
  69   <div class="linear9 box"></div>
  70
  71 </body>
  72 </html>