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="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." />
   8         <style type="text/css">
   9             div
  10             {
  11                 height: 96px;
  12                 width: 96px;
  13             }
  14             #reference1
  15             {
  16                 box-shadow: orange 30px 30px;
  17             }
  18             #reference2
  19             {
  20                 margin-top: -96px;
  21                 box-shadow: blue 20px 20px
  22             }
  23             #reference3
  24             {
  25                 margin-top: -96px;
  26                 box-shadow: 10px 10px;
  27             }
  28             #test
  29             {
  30                 margin-top: 40px;
  31                 box-shadow: 10px 10px, blue 20px 20px, orange 30px 30px;
  32             }
  33         </style>
  34     </head>
  35     <body>
  36         <p>Test passes if two drawings are exactly the same.</p>
  37         <div id="reference1"></div>
  38         <div id="reference2"></div>
  39         <div id="reference3"></div>
  40         <div id="test"></div>
  41     </body>
  42 </html>