Merge Chromium + Blink git repositories
[chromium-blink-merge.git] / third_party / WebKit / LayoutTests / compositing / geometry / limit-layer-bounds-opacity-transition.html
blob25bce5f933f459d624d2bfdd8162309f0b6e7149
1 <!DOCTYPE html>
3 <html>
4 <style type="text/css" media="screen">
5 .test {
6 position: relative;
7 top: -10px; /* overlap composited layer */
8 width: 100px;
9 height: 100px;
10 background-color: white;
11 text-indent: -10000px;
14 .compositing {
15 width: 1px;
16 height: 1px;
17 transform: translateZ(0);
20 #fading {
21 opacity: 0;
22 -webkit-transition: opacity 0.1s;
24 </style>
25 <script type="text/javascript" charset="utf-8">
26 if (window.testRunner) {
27 testRunner.waitUntilDone();
28 testRunner.dumpAsText();
31 function startFade()
33 // At the end of this fade we are interested in the size of .test in the layer dump.
34 // It should be constrained to the size of the view, so not tiled.
35 var fader = document.getElementById('fading');
36 fader.addEventListener('webkitTransitionEnd', fadeDone, false);
37 document.getElementById('fading').style.opacity = 1;
40 function fadeDone()
42 if (window.testRunner) {
43 document.getElementById('layers').innerText = window.internals.layerTreeAsText(document);
44 testRunner.notifyDone();
47 </script>
48 <head>
49 </head>
50 <body>
52 <!-- Go into compositing. -->
53 <div class="compositing"></div>
55 <div class="test">
56 Test
57 </div>
59 <div id="fading">
60 Fader
61 </div>
63 <pre id="layers">Layer tree goes here in DRT</pre>
64 <script>
65 window.onload = startFade;
66 </script>
67 </body>
68 </html>