Merge Chromium + Blink git repositories
[chromium-blink-merge.git] / third_party / WebKit / LayoutTests / fast / reflections / reflection-overflow-hidden.html
blob7d4a5bee23249c5ea37c53711d9ecaabe7123bb4
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
2 "http://www.w3.org/TR/html4/strict.dtd">
4 <html>
5 <head>
6 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
7 <title>Reflection and overflow</title>
9 <style type="text/css" media="screen">
10 body {
11 margin: 50px;
13 #player {
14 position: absolute;
15 top: 100px;
16 -webkit-box-reflect: below 10px;
17 width: 400px;
20 #inner {
21 position: relative;
22 height: 200px;
23 overflow: hidden;
24 outline: 2px solid black;
27 .top {
28 position: absolute;
29 width: 100%;
30 height: 50px;
31 top: 0px;
32 background-color: green;
35 .bottom {
36 position: absolute;
37 width: 100%;
38 height: 50px;
39 bottom: 0px;
40 background-color: green;
43 .tester {
44 position: absolute;
45 width: 400px;
46 height: 50px;
47 background-color: red;
48 z-index: -1;
50 </style>
51 </head>
52 <body>
54 <p><a href="https://bugs.webkit.org/show_bug.cgi?id=22570">https://bugs.webkit.org/show_bug.cgi?id=22570</a>. Test for
55 reflection painting on overflow:hidden element. You should not see any red below.</p>
57 <div class="tester" style="top: 100px;"></div>
58 <div class="tester" style="top: 250px;"></div>
60 <div id="player">
61 <div id="inner">
62 <div class="top">Top</div>
63 <div class="bottom">Bottom</div>
64 </div>
65 </div>
67 </body>
68 </html>