improve look of fx.html tests

With 2-column layout, now fits on iPhone screen
jasondscott · Sep 11, 2012 · e37098c · e37098c
1 parent 357a761
commit e37098c
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 20 deletions.
diff --git a/test/fx.html b/test/fx.html
@@ -13,24 +13,38 @@
   <style>
     @-webkit-keyframes animName {
       0% {
-        -webkit-transform: rotateY(180deg) scale(.8) translate3d(0, 0, 0);
+        -webkit-transform: rotate(180deg) scale(.8);
         opacity: 1;
       }
       100% {
-        -webkit-transform: rotateY(0deg) scale(1) translate3d(100px, 100px, 100px);
-        opacity: 0;
+        -webkit-transform: rotate(0deg) scale(1) translate3d(80px, 20px, 0);
+        opacity: 0.5;
       }
     }
     @-moz-keyframes animName {
       from {
-        -moz-transform: rotateY(180deg) scale(.8) translate(0, 0);
+        -moz-transform: rotate(180deg) scale(.8) translate(0, 0);
         opacity: 1;
       }
       to {
-        -moz-transform: rotateY(0deg) scale(1) translate(100px, 100px);
-        opacity: 0;
+        -moz-transform: rotate(0deg) scale(1) translate(80px, 20px);
+        opacity: 0.5;
       }
     }
+
+    #keyframetest {
+      opacity: 0.5;
+      -webkit-transform: translate3d(80px, 20px, 0);
+      -moz-transform: translate3d(80px, 20px, 0);
+    }
+
+    .fixtures-left {
+      width: 120px;
+      float: left;
+    }
+    .fixtures-right {
+      margin-left: 120px;
+    }
   </style>
 </head>
 <body>
@@ -39,13 +53,17 @@ <h1>Zepto effects tests</h1>
     Running… see browser console for results
   </p>
 
-  <div id="animtest_1" style="width:40px;height:40px;background:red"></div>
-  <div id="animtest_2" style="width:40px;height:40px;background:red"></div>
-  <div id="durationtest_1" style="width:40px;height:40px;background:red"></div>
-  <div id="durationtest_2" style="width:40px;height:40px;background:red"></div>
-  <div id="durationtest_3" style="width:40px;height:40px;background:red"></div>
-  <div id="callbacktest" style="width:40px;height:40px;background:red"><div style="width:40px;height:40px;background:blue"></div></div>
-  <div id="keyframetest" style="width:40px;height:40px;background:red;opacity: 0;"></div>
+  <div class=fixtures-left>
+    <div id="animtest_1" style="width:40px;height:40px;background:red"></div>
+    <div id="animtest_2" style="width:40px;height:40px;background:red"></div>
+    <div id="durationtest_1" style="width:40px;height:40px;background:red"></div>
+    <div id="durationtest_2" style="width:40px;height:40px;background:red"></div>
+  </div>
+  <div class=fixtures-right>
+    <div id="durationtest_3" style="width:40px;height:40px;background:red"></div>
+    <div id="callbacktest" style="width:40px;height:40px;background:red"><div style="width:40px;height:40px;background:blue"></div></div>
+    <div id="keyframetest" style="width:40px;height:40px;background:red;"></div>
+  </div>
 
   <div id="anim_zero_duration_callback_test"></div>
 
@@ -92,15 +110,15 @@ <h1>Zepto effects tests</h1>
         var el = $('#animtest_1'), el2 = $('#animtest_2')
         t.pause()
         el.animate({
-          translate3d: '100px, 100px, 100px',
+          translate3d: '80px, 20px, 100px',
           rotateZ: '90deg',
           scale: '0.8',
           opacity: 0.5,
           backgroundColor: '#BADA55'
         }, 200, 'ease-out')
 
         el2.animate({
-          translate3d: '100px, 100px, 100px',
+          translate3d: '80px, 20px, 100px',
           rotateZ: '-90deg',
           backgroundColor: '#BADA55'
         }, {
@@ -121,7 +139,7 @@ <h1>Zepto effects tests</h1>
             t.pause()
             defer(function(){
               t.resume(function(){
-                t.assertStyle('translate3d(100px, 100px, 100px) rotateZ(90deg) scale(0.8)', el, 'transform')
+                t.assertStyle('translate3d(80px, 20px, 100px) rotateZ(90deg) scale(0.8)', el, 'transform')
                 t.assertStyle('0.5', el, 'opacity')
                 t.assertEqual('#BADA55', colorToHex(el.get(0).style.backgroundColor).toUpperCase())
               })
@@ -132,13 +150,13 @@ <h1>Zepto effects tests</h1>
 
       testDuration: function(t){
         var el1 = $('#durationtest_1').anim({
-          translate3d: '100px, 100px, 100px',
+          translate3d: '80px, 20px, 100px',
           rotateZ: '90deg',
           opacity: 0.5
         })
 
         var el2 = $('#durationtest_2').anim({
-          translate3d: '100px, 100px, 100px',
+          translate3d: '80px, 20px, 100px',
           rotateZ: '90deg',
           opacity: 0.5
         }, 0)
@@ -154,7 +172,7 @@ <h1>Zepto effects tests</h1>
 
       testDurationString: function(t){
         var el = $('#durationtest_3').animate({
-          translate3d: '100px, 100px, 100px',
+          translate3d: '80px, 20px, 100px',
           rotateZ: '90deg',
           opacity: 0.5
         }, 'fast')
@@ -172,7 +190,7 @@ <h1>Zepto effects tests</h1>
         t.pause()
 
         $('#callbacktest').anim({
-          translate3d: '100px, 100px, 100px',
+          translate3d: '80px, 20px, 100px',
           rotateZ: '90deg',
           opacity: 0.5
         }, duration / 1000, 'linear',

diff --git a/test/test.css b/test/test.css
@@ -29,8 +29,11 @@ a:link, a:visited { color: darkblue; }
 }
 #nav .current a { background: #ccc; color: black; }
 #nav a:active { background: #555; color: white; }
+
 @media only screen and (max-device-width:480px) {
   body { margin: 7px; font-size: small; }
+  h1 { margin: 0; }
   h1, #results { text-align: center; }
+  #results { min-height: 3em; }
   #nav { font-size: 14px; max-width: auto; }
 }