Skip to content

Commit

Permalink
improve look of fx.html tests
Browse files Browse the repository at this point in the history 
With 2-column layout, now fits on iPhone screen
  • Loading branch information
@mislav
mislav committed Sep 11, 2012
1 parent 357a761 commit e37098c
Show file tree
Hide file tree
Showing 2 changed files with 41 additions and 20 deletions.
58 changes: 38 additions & 20 deletions test/fx.html
View file
Expand Up @@ -13,24 +13,38 @@
<style> <style>
@-webkit-keyframes animName { @-webkit-keyframes animName {
0% { 0% {
-webkit-transform: rotateY(180deg) scale(.8) translate3d(0, 0, 0); -webkit-transform: rotate(180deg) scale(.8);
opacity: 1; opacity: 1;
} }
100% { 100% {
-webkit-transform: rotateY(0deg) scale(1) translate3d(100px, 100px, 100px); -webkit-transform: rotate(0deg) scale(1) translate3d(80px, 20px, 0);
opacity: 0; opacity: 0.5;
} }
} }
@-moz-keyframes animName { @-moz-keyframes animName {
from { from {
-moz-transform: rotateY(180deg) scale(.8) translate(0, 0); -moz-transform: rotate(180deg) scale(.8) translate(0, 0);
opacity: 1; opacity: 1;
} }
to { to {
-moz-transform: rotateY(0deg) scale(1) translate(100px, 100px); -moz-transform: rotate(0deg) scale(1) translate(80px, 20px);
opacity: 0; 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> </style>
</head> </head>
<body> <body>
Expand All @@ -39,13 +53,17 @@ <h1>Zepto effects tests</h1>
Running… see browser console for results Running… see browser console for results
</p> </p>


<div id="animtest_1" style="width:40px;height:40px;background:red"></div> <div class=fixtures-left>
<div id="animtest_2" style="width:40px;height:40px;background:red"></div> <div id="animtest_1" style="width:40px;height:40px;background:red"></div>
<div id="durationtest_1" style="width:40px;height:40px;background:red"></div> <div id="animtest_2" style="width:40px;height:40px;background:red"></div>
<div id="durationtest_2" style="width:40px;height:40px;background:red"></div> <div id="durationtest_1" style="width:40px;height:40px;background:red"></div>
<div id="durationtest_3" style="width:40px;height:40px;background:red"></div> <div id="durationtest_2" 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>
<div id="keyframetest" style="width:40px;height:40px;background:red;opacity: 0;"></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> <div id="anim_zero_duration_callback_test"></div>


Expand Down Expand Up @@ -92,15 +110,15 @@ <h1>Zepto effects tests</h1>
var el = $('#animtest_1'), el2 = $('#animtest_2') var el = $('#animtest_1'), el2 = $('#animtest_2')
t.pause() t.pause()
el.animate({ el.animate({
translate3d: '100px, 100px, 100px', translate3d: '80px, 20px, 100px',
rotateZ: '90deg', rotateZ: '90deg',
scale: '0.8', scale: '0.8',
opacity: 0.5, opacity: 0.5,
backgroundColor: '#BADA55' backgroundColor: '#BADA55'
}, 200, 'ease-out') }, 200, 'ease-out')


el2.animate({ el2.animate({
translate3d: '100px, 100px, 100px', translate3d: '80px, 20px, 100px',
rotateZ: '-90deg', rotateZ: '-90deg',
backgroundColor: '#BADA55' backgroundColor: '#BADA55'
}, { }, {
Expand All @@ -121,7 +139,7 @@ <h1>Zepto effects tests</h1>
t.pause() t.pause()
defer(function(){ defer(function(){
t.resume(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.assertStyle('0.5', el, 'opacity')
t.assertEqual('#BADA55', colorToHex(el.get(0).style.backgroundColor).toUpperCase()) t.assertEqual('#BADA55', colorToHex(el.get(0).style.backgroundColor).toUpperCase())
}) })
Expand All @@ -132,13 +150,13 @@ <h1>Zepto effects tests</h1>


testDuration: function(t){ testDuration: function(t){
var el1 = $('#durationtest_1').anim({ var el1 = $('#durationtest_1').anim({
translate3d: '100px, 100px, 100px', translate3d: '80px, 20px, 100px',
rotateZ: '90deg', rotateZ: '90deg',
opacity: 0.5 opacity: 0.5
}) })


var el2 = $('#durationtest_2').anim({ var el2 = $('#durationtest_2').anim({
translate3d: '100px, 100px, 100px', translate3d: '80px, 20px, 100px',
rotateZ: '90deg', rotateZ: '90deg',
opacity: 0.5 opacity: 0.5
}, 0) }, 0)
Expand All @@ -154,7 +172,7 @@ <h1>Zepto effects tests</h1>


testDurationString: function(t){ testDurationString: function(t){
var el = $('#durationtest_3').animate({ var el = $('#durationtest_3').animate({
translate3d: '100px, 100px, 100px', translate3d: '80px, 20px, 100px',
rotateZ: '90deg', rotateZ: '90deg',
opacity: 0.5 opacity: 0.5
}, 'fast') }, 'fast')
Expand All @@ -172,7 +190,7 @@ <h1>Zepto effects tests</h1>
t.pause() t.pause()


$('#callbacktest').anim({ $('#callbacktest').anim({
translate3d: '100px, 100px, 100px', translate3d: '80px, 20px, 100px',
rotateZ: '90deg', rotateZ: '90deg',
opacity: 0.5 opacity: 0.5
}, duration / 1000, 'linear', }, duration / 1000, 'linear',
Expand Down
3 changes: 3 additions & 0 deletions test/test.css
View file
Expand Up @@ -29,8 +29,11 @@ a:link, a:visited { color: darkblue; }
} }
#nav .current a { background: #ccc; color: black; } #nav .current a { background: #ccc; color: black; }
#nav a:active { background: #555; color: white; } #nav a:active { background: #555; color: white; }

@media only screen and (max-device-width:480px) { @media only screen and (max-device-width:480px) {
body { margin: 7px; font-size: small; } body { margin: 7px; font-size: small; }
h1 { margin: 0; }
h1, #results { text-align: center; } h1, #results { text-align: center; }
#results { min-height: 3em; }
#nav { font-size: 14px; max-width: auto; } #nav { font-size: 14px; max-width: auto; }
} }

0 comments on commit e37098c

Please sign in to comment.