Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(1490)

Side by Side Diff: LayoutTests/compositing/layer-creation/fixed-position-under-transform.html

Issue 1298493003: Currently we only composite fixed position elements if we are on High DPI devices. This fix allows … Base URL: https://chromium.googlesource.com/chromium/blink.git@master
Patch Set: Update affected tests Created 5 years, 4 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View unified diff | Download patch
OLDNEW
1 <!DOCTYPE html> 1 <!DOCTYPE html>
2 <html> 2 <html>
3 <head> 3 <head>
4 <style> 4 <style>
5 body { 5 body {
6 height: 5000px; 6 height: 5000px;
7 overflow-x: hidden; 7 overflow-x: hidden;
8 } 8 }
9 9
10 #transform { 10 #transform {
11 z-index: 0; 11 z-index: 0;
12 /* transform establishes a fixed pos container, so translate to make up for scroll offset so indicator is still underneath overlap */ 12 /* transform establishes a fixed pos container, so translate to make up for scroll offset so indicator is still underneath overlap */
13 transform:translate3d(0px, 1000px, 0px); 13 transform:translate3d(0px, 1000px, 0px);
14 } 14 }
15 15
16 #indicator { 16 #indicator {
17 width: 256px; 17 width: 256px;
18 height: 256px; 18 height: 256px;
19 background-color: red; 19 background-color: rgba(255, 0, 0, 0.99);
Ian Vollick 2015/08/21 14:40:43 Just to be sure I'm understanding you; you're chan
davidfox 2015/08/21 14:50:35 That's exactly correct.
20 position: fixed; 20 position: fixed;
21 left: 100px; 21 left: 100px;
22 top: 100px; 22 top: 100px;
23 } 23 }
24 24
25 #overlap { 25 #overlap {
26 width: 500px; 26 width: 500px;
27 height: 500px; 27 height: 500px;
28 background-color: green; 28 background-color: rgba(0, 128, 0, 0.99);
29 position: fixed; 29 position: fixed;
30 left: 0px; 30 left: 0px;
31 top: 0px; 31 top: 0px;
32 } 32 }
33 </style> 33 </style>
34 <script> 34 <script>
35 function doTest() { 35 function doTest() {
36 window.scrollTo(0, 1000); 36 window.scrollTo(0, 1000);
37 if (window.testRunner) { 37 if (window.testRunner) {
38 document.getElementById('layertree').innerText = window.internals.la yerTreeAsText(document); 38 document.getElementById('layertree').innerText = window.internals.la yerTreeAsText(document);
39 testRunner.dumpAsTextWithPixelResults(); 39 testRunner.dumpAsTextWithPixelResults();
40 } 40 }
41 } 41 }
42 window.addEventListener("load", doTest, false); 42 window.addEventListener("load", doTest, false);
43 </script> 43 </script>
44 </head> 44 </head>
45 <body> 45 <body>
46 <!-- the red indicator should be covered by the green overlap element --> 46 <!-- the red indicator should be covered by the green overlap element -->
47 <div id="transform"> 47 <div id="transform">
48 <div id="indicator"></div> 48 <div id="indicator"></div>
49 </div> 49 </div>
50 <div id="overlap"></div> 50 <div id="overlap"></div>
51 51
52 <pre id="layertree"></pre> 52 <pre id="layertree"></pre>
53 </body> 53 </body>
54 </html> 54 </html>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698