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

Unified Diff: third_party/WebKit/ManualTests/compositor-worker/physics/theme.css

Issue 1547893003: WIP - compositor worker mega patch. Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: . Created 4 years, 11 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 side-by-side diff with in-line comments
Download patch
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);
+}

Powered by Google App Engine
This is Rietveld 408576698