third_party/WebKit/LayoutTests/fast/box-shadow/spread-multiple-inset.html

   1 <html>
   2 <head>
   3 <style>
   4 .square {
   5   margin: 25px;
   6   height: 200px;
   7   width: 200px;
   8   background-color: black;
   9   border-radius: 100px;
  10 }
  11
  12 #negative {
  13   position: absolute;
  14   top:  10px;
  15   left: 10px;
  16
  17   -webkit-box-shadow: inset  40px 0px 0px -10px #00f,
  18                       inset  80px 0px 0px -15px #808,
  19                       inset 120px 0px 0px -20px #b04,
  20                       inset 160px 0px 0px -25px #f00;
  21 }
  22
  23 #positive {
  24   position: absolute;
  25   top:   10px;
  26   left: 300px;
  27
  28   -webkit-box-shadow: inset  40px 0px 0px  10px #00f,
  29                       inset  80px 0px 0px  15px #808,
  30                       inset 120px 0px 0px  20px #b04,
  31                       inset 160px 0px 0px  25px #f00;
  32 }
  33
  34 #mixed1 {
  35   position: absolute;
  36   top:  300px;
  37   left:  10px;
  38
  39   -webkit-box-shadow: inset  40px 0px 0px  10px #00f,
  40                       inset  80px 0px 0px -15px #808,
  41                       inset 120px 0px 0px  20px #b04,
  42                       inset 160px 0px 0px -25px #f00;
  43 }
  44
  45 #mixed2 {
  46   position: absolute;
  47   top:  300px;
  48   left: 300px;
  49
  50   -webkit-box-shadow: inset  40px 0px 0px -10px #00f,
  51                       inset  80px 0px 0px  15px #808,
  52                       inset 120px 0px 0px -20px #b04,
  53                       inset 160px 0px 0px  25px #f00;
  54 }
  55
  56 </style>
  57 <script>
  58 if (window.testRunner)
  59     testRunner.dumpAsTextWithPixelResults();
  60 </script>
  61 </head>
  62 <body>
  63 <p>Bug <a href="https://bugs.webkit.org/show_bug.cgi?id=51386">51386</a></p>
  64 <div class="square" id="negative"></div>
  65 <div class="square" id="positive"></div>
  66 <div class="square" id="mixed1"></div>
  67 <div class="square" id="mixed2"></div>
  68 </body>
  69 </html>