box-shadow-003

Layering of box shadows

WeasyPrint

This browser

Assertion
Shadow effects are applied front to back, where the first shadow is on the top and the last shadow is on the bottom.

Source

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml"><head>
 3         <title>CSS Test: Layering of box shadows</title>
 4         <link href="http://www.microsoft.com/" rel="author" title="Microsoft">
 5         <link href="http://www.w3.org/TR/css3-background/#the-background-size" rel="help">
 6         <meta content="" name="flags">
 7         <meta content="Shadow effects are applied front to back, where the first shadow is on the top and the last shadow is on the bottom." name="assert">
 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     
42 </body></html>