third_party/WebKit/LayoutTests/fast/box-shadow/box-shadow-radius.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4   <style type="text/css" media="screen">
   5     .wrapper {
   6       outline: 1px solid silver;
   7       width: 280px;
   8       height: 280px;
   9       -webkit-box-sizing: border-box;
  10       padding: 90px;
  11       margin: 4px;
  12       display: inline-block;
  13     }
  14
  15     .box {
  16       position: relative;
  17       width: 100px;
  18       height: 100px;
  19       display: inline-block;
  20     }
  21
  22     .indicator {
  23       position: absolute;
  24       outline: 0 solid rgba(0, 255, 0, 0.05);
  25     }
  26
  27   </style>
  28 </head>
  29 <body>
  30
  31   <!-- The extent of the shadow should approximately match the pale green boxes. -->
  32   <div class="wrapper">
  33     <div class="indicator box" style="outline-width: 10px"></div>
  34     <div class="box" style="box-shadow: 0 0 10px black"></div>
  35   </div>
  36
  37   <div class="wrapper">
  38     <div class="indicator box" style="outline-width: 20px"></div>
  39     <div class="box" style="box-shadow: 0 0 20px black"></div>
  40   </div>
  41   <br>
  42
  43   <div class="wrapper">
  44     <div class="indicator box" style="outline-width: 50px"></div>
  45     <div class="box" style="box-shadow: 0 0 50px black"></div>
  46   </div>
  47
  48   <div class="wrapper">
  49     <div class="indicator box" style="outline-width: 90px"></div>
  50     <div class="box" style="box-shadow: 0 0 90px black"></div>
  51   </div>
  52
  53 </body>
  54 </html>