testing/web-platform/tests/css/css-backgrounds/box-shadow-003.htm

   1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
   2 <html xmlns="http://www.w3.org/1999/xhtml">
   3     <head>
   4         <title>CSS Test: Layering of box shadows</title>
   5         <link rel="author" title="Microsoft" href="http://www.microsoft.com/" />
   6         <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size" />
   7         <meta name="flags" content="" />
   8         <meta name="assert" content="Shadow effects are applied front to back, where the first shadow is on the top and the last shadow is on the bottom." />
   9         <style type="text/css">
  10             div
  11             {
  12                 height: 96px;
  13                 width: 96px;
  14             }
  15             #reference1
  16             {
  17                 box-shadow: orange 30px 30px;
  18             }
  19             #reference2
  20             {
  21                 margin-top: -96px;
  22                 box-shadow: blue 20px 20px
  23             }
  24             #reference3
  25             {
  26                 margin-top: -96px;
  27                 box-shadow: 10px 10px;
  28             }
  29             #test
  30             {
  31                 margin-top: 40px;
  32                 box-shadow: 10px 10px, blue 20px 20px, orange 30px 30px;
  33             }
  34         </style>
  35     </head>
  36     <body>
  37         <p>Test passes if two drawings are exactly the same.</p>
  38         <div id="reference1"></div>
  39         <div id="reference2"></div>
  40         <div id="reference3"></div>
  41         <div id="test"></div>
  42     </body>
  43 </html>