Merge Chromium + Blink git repositories
[chromium-blink-merge.git] / third_party / WebKit / LayoutTests / compositing / geometry / bounds-ignores-hidden-dynamic.html
blob31efb208ee3ee21963f8d02eed13121c83af907d
1 <style>
2 .composited {
3 transform: translateZ(0);
6 .box {
7 width: 100px;
8 height: 100px;
9 background-color: blue;
12 img {
13 background-color: black;
14 width: 50px;
15 height: 50px;
18 img.to-visible {
19 visibility: hidden;
21 body.changed img.to-visible {
22 visibility: visible;
25 img.to-hidden {
26 visibility: visible;
28 body.changed img.to-hidden {
29 visibility: hidden;
32 #layers {
33 opacity: 0; /* hide from pixel result */
35 </style>
36 <script>
37 if (window.testRunner) {
38 testRunner.dumpAsTextWithPixelResults();
39 testRunner.waitUntilDone();
42 function doTest()
44 window.setTimeout(function() {
45 document.body.classList.add('changed');
46 if (window.testRunner) {
47 document.getElementById('layers').innerText = window.internals.layerTreeAsText(document);
48 testRunner.notifyDone();
50 }, 0);
52 window.addEventListener('load', doTest, false);
53 </script>
54 <body>
55 <div style="position: absolute; left: 0px; top: 0px; z-index: 106; " class="composited">
56 <img style="position: absolute; left: 10px; top: 10px; z-index: 0;">
57 <img style="position: absolute; left: 500px; top: 200px; z-index: 0;" class="to-visible">
58 </div>
60 <div style="position: absolute; left: 0px; top: 250px; z-index: 106; " class="composited">
61 <img style="position: absolute; left: 10px; top: 10px; z-index: 0;">
62 <img style="position: absolute; left: 500px; top: 200px; z-index: 0;" class="to-hidden">
63 </div>
64 <pre id="layers">Layer tree goes here in DRT</pre>
65 </body>