2009-09-29 Simon Fraser <simon.fraser@apple.com>
[WebKit.git] / LayoutTests / compositing / repaint / opacity-between-absolute2.html
1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
2    "http://www.w3.org/TR/html4/loose.dtd">
3
4 <html lang="en">
5 <head>
6   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
7   <title>Opacity between absolutes</title>
8   <style type="text/css" media="screen">
9     .container {
10       position: relative;
11       height: 200px;
12       width: 200px;
13       border: 1px solid black;
14       -webkit-transform: translateZ(0);
15     }
16
17     .fader {
18       height: 50px;
19       width: 50px;
20       margin: 20px;
21       border: 1px solid black;
22       -webkit-transition: opacity 100s;
23     }
24     
25     .container:hover .fader {
26       opacity: 0.5;
27     }
28
29     .inner {
30       position: absolute;
31       left: 100px;
32       top: 100px;
33       height: 80px;
34       width: 80px;
35       background-color: gray;
36     }
37     
38     .inner:hover {
39       background-color: orange !important;
40     }
41   </style>
42   <script type="text/javascript" charset="utf-8">
43     if (window.layoutTestController)
44       layoutTestController.waitUntilDone();
45
46     function runTest()
47     {
48       // Kick off an opacity fade to make .fader into a compositing layer
49       var container = document.querySelectorAll('.fader')[1];
50       container.style.opacity = 0.99;
51       window.setTimeout(function() {
52         // Now test redraw on .inner
53         var inner = document.querySelectorAll('.inner')[0];
54         inner.style.backgroundColor = 'green';
55         if (window.layoutTestController)
56           layoutTestController.notifyDone();
57       }, 0);
58     }
59
60     window.addEventListener('load', runTest, false)
61   </script>
62 </head>
63 <body>
64 <p>This test should not assert, and you should see a fully green square.</p>
65 <div class="container">
66   <div class="fader">
67     <div class="fader">
68       <div class="inner">
69       </div>
70     </div>
71   </div>
72 </div>
73
74 </body>
75 </html>