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

Side by Side Diff: LayoutTests/compositing/layer-creation/overlap-transformed-preserved-3d.html

Issue 637763002: Unprefix usage of -webkit-transform in tests (Closed) Base URL: https://chromium.googlesource.com/chromium/blink.git@master
Patch Set: Created 6 years, 2 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 2
3 <html> 3 <html>
4 <head> 4 <head>
5 <style> 5 <style>
6 .container { 6 .container {
7 position: relative; 7 position: relative;
8 } 8 }
9 .box { 9 .box {
10 position: absolute; 10 position: absolute;
11 height: 150px; 11 height: 150px;
12 width: 100px; 12 width: 100px;
13 background-color: gray; 13 background-color: gray;
14 } 14 }
15 .green { 15 .green {
16 height: 100px; 16 height: 100px;
17 background-color: green; 17 background-color: green;
18 } 18 }
19 .box-container { 19 .box-container {
20 position: absolute; 20 position: absolute;
21 -webkit-perspective: 200; 21 -webkit-perspective: 200;
22 -webkit-perspective-origin: 50px 50px; 22 -webkit-perspective-origin: 50px 50px;
23 } 23 }
24 .rotate-3d-start { 24 .rotate-3d-start {
25 -webkit-transform: scale(0.5) rotateX(45deg) rotateY(45deg); 25 transform: scale(0.5) rotateX(45deg) rotateY(45deg);
26 -webkit-transform-origin: 50px 50px; 26 -webkit-transform-origin: 50px 50px;
27 -webkit-transform-style: preserve-3d; 27 -webkit-transform-style: preserve-3d;
28 } 28 }
29 .rotate-3d-end { 29 .rotate-3d-end {
30 -webkit-transform: scale(1.0) rotateX(45deg) rotateY(45deg); 30 transform: scale(1.0) rotateX(45deg) rotateY(45deg);
31 } 31 }
32 .top { 32 .top {
33 top: 0px; 33 top: 0px;
34 } 34 }
35 .bottom { 35 .bottom {
36 top: 150px; 36 top: 150px;
37 } 37 }
38 .left { 38 .left {
39 left: 0px; 39 left: 0px;
40 } 40 }
(...skipping 13 matching lines...) Expand all
54 width: 98px; 54 width: 98px;
55 height: 88px; 55 height: 88px;
56 text-align: center; 56 text-align: center;
57 padding-top: 10px; 57 padding-top: 10px;
58 background: rgba(0, 255, 0, 0.8); 58 background: rgba(0, 255, 0, 0.8);
59 font-weight: bold; 59 font-weight: bold;
60 border: 1px solid green; 60 border: 1px solid green;
61 -webkit-transform-origin: 50% 50%; 61 -webkit-transform-origin: 50% 50%;
62 } 62 }
63 .side-1 { 63 .side-1 {
64 -webkit-transform: translateZ(50px); 64 transform: translateZ(50px);
65 } 65 }
66 .side-2 { 66 .side-2 {
67 -webkit-transform: rotateY(90deg) translateZ(50px); 67 transform: rotateY(90deg) translateZ(50px);
68 } 68 }
69 .side-3 { 69 .side-3 {
70 -webkit-transform: rotateY(180deg) translateZ(50px); 70 transform: rotateY(180deg) translateZ(50px);
71 } 71 }
72 .side-4 { 72 .side-4 {
73 -webkit-transform: rotateY(270deg) translateZ(50px); 73 transform: rotateY(270deg) translateZ(50px);
74 } 74 }
75 .side-5 { 75 .side-5 {
76 -webkit-transform: rotateX(90deg) translateZ(50px); 76 transform: rotateX(90deg) translateZ(50px);
77 } 77 }
78 .side-6 { 78 .side-6 {
79 -webkit-transform: rotateX(-90deg) translateZ(50px); 79 transform: rotateX(-90deg) translateZ(50px);
80 } 80 }
81 </style> 81 </style>
82 <script> 82 <script>
83 if (window.testRunner) 83 if (window.testRunner)
84 testRunner.dumpAsText(); 84 testRunner.dumpAsText();
85 85
86 function runTest() 86 function runTest()
87 { 87 {
88 var layerTrees = ""; 88 var layerTrees = "";
89 89
(...skipping 35 matching lines...) Expand 10 before | Expand all | Expand 10 after
125 </div> 125 </div>
126 </div> 126 </div>
127 <div class="box top left"></div> 127 <div class="box top left"></div>
128 <div class="box top right"></div> 128 <div class="box top right"></div>
129 <div class="box bottom left"></div> 129 <div class="box bottom left"></div>
130 <div class="box bottom right"></div> 130 <div class="box bottom right"></div>
131 </div> 131 </div>
132 <pre id="layers">Layer tree goes here in DRT</pre> 132 <pre id="layers">Layer tree goes here in DRT</pre>
133 </body> 133 </body>
134 </html> 134 </html>
OLDNEW

Powered by Google App Engine
This is Rietveld 408576698