Index: third_party/WebKit/ManualTests/compositor-worker/physics/theme.css |
diff --git a/third_party/WebKit/ManualTests/compositor-worker/physics/theme.css b/third_party/WebKit/ManualTests/compositor-worker/physics/theme.css |
new file mode 100644 |
index 0000000000000000000000000000000000000000..2598d5082116daa7a6f2cd3694b733d7f3088aa6 |
--- /dev/null |
+++ b/third_party/WebKit/ManualTests/compositor-worker/physics/theme.css |
@@ -0,0 +1,119 @@ |
+html, body { |
+ padding: 0; |
+ margin: 0; |
+ width: 100%; |
+ height: 100%; |
+} |
+ |
+body { |
+ overflow: hidden; |
+ background-image: -webkit-linear-gradient(top, #FFFFFF 0%, #DEDEDE 75%, #A6A6A6 100%); |
+} |
+ |
+.actor { |
+ position: absolute; |
+ border-radius: 50px; |
+ height: 100px; |
+ width: 100px; |
+ background-color: blue; |
+} |
+ |
+@-webkit-keyframes foil-motion { |
+ 0% { -webkit-transform: translateY(0); } |
+ 100% { -webkit-transform: translateY(100px); } |
+} |
+ |
+@-webkit-keyframes flip-hide { |
+ 0% { |
+ opacity: 1; |
+ -webkit-transform: scale(.99) rotateX(0deg); |
+ } |
+ 20% { |
+ opacity: 0.4; |
+ -webkit-transform: scale(1.05) rotateX(30deg); |
+ } |
+ 55% { |
+ opacity: 0; |
+ } |
+ 100% { |
+ opacity: 0; |
+ -webkit-transform: scale(1) rotateX(180deg); |
+ z-index: 1; |
+ } |
+} |
+ |
+@-webkit-keyframes flip-show { |
+ 0% { |
+ opacity: 0; |
+ } |
+ 20% { |
+ -webkit-transform: scale(1.05) rotateX(150deg); |
+ } |
+ 40% { |
+ opacity: 0; |
+ } |
+ 100% { |
+ opacity: 1; |
+ -webkit-transform: scale(1) rotateX(0deg); |
+ z-index: 2; |
+ } |
+} |
+ |
+#stopJank { |
+ opacity: 0; |
+ -webkit-transform: rotateX(180deg); |
+} |
+ |
+.button { |
+ position: absolute; |
+ top: -5px; |
+ left: 130px; |
+ display: inline-block; |
+ color: #777777; |
+ font-size: 80px; |
+ font-family: 'Open Sans', serif; |
+ text-decoration: none; |
+ padding-top: -5px; |
+ padding-bottom: 10px; |
+ padding-left: 15px; |
+ padding-right: 15px; |
+} |
+ |
+.container:hover > .button { |
+ color: #555555; |
+} |
+ |
+.container:active > .button { |
+ -webkit-transform: scale(.99); |
+} |
+ |
+.foil { |
+ position: absolute; |
+ width: 300px; |
+ height: 30px; |
+ border-radius: 3px; |
+ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b5bdc8), color-stop(100%,#28343b)); |
+ -webkit-animation: foil-motion 1s infinite alternate; |
+} |
+ |
+.container { |
+ cursor: pointer; |
+ -webkit-user-select: none; |
+ z-index: 1; |
+ -webkit-transform: translateZ(0); |
+ position: absolute; |
+ width: 100%; |
+ bottom: 40px; |
+ left: 40px; |
+} |
+ |
+.logo { |
+ width: 100px; |
+ height: 100px; |
+ color: #777777; |
+ display: inline-block; |
+ font-size: 80px; |
+ font-family: 'Open Sans', serif; |
+ text-decoration: none; |
+ -webkit-transform: translateZ(0) rotate(0deg); |
+} |