order-of-images

Order of images

WeasyPrint

This browser

Assertion
Background images are listed in order, with the first image being rendered on top of all the other images, and so on.

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: Order of images</title>
 4         <link href="http://www.microsoft.com/" rel="author" title="Microsoft">
 5         <link href="http://www.w3.org/TR/css3-background/#the-background-image" rel="help">
 6         <meta content="" name="flags">
 7         <meta content="Background images are listed in order, with the first image being rendered on top of all the other images, and so on." name="assert">
 8         <style type="text/css">
 9             div
10             {
11                 width: 250px;
12                 height: 250px;
13                 background-image: url("support/blue_color.png"), url("support/orange_color.png"), url("support/black_color.png");
14                 background-repeat: no-repeat;
15                 background-position: 30px 30px, 60px 60px, 90px 90px;
16             }
17         </style>
18     </head>
19     <body>
20         <p>Test passes if a blue box overlaps an orange box, which overlaps a black box.</p>
21         <div></div>
22     
23 </body></html>