Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

improve look of fx.html tests

With 2-column layout, now fits on iPhone screen
  • Loading branch information...
commit e37098c56c709e3597675db81fa4782e8f86b6c8 1 parent 357a761
Mislav Marohnić mislav authored
Showing with 41 additions and 20 deletions.
  1. +38 −20 test/fx.html
  2. +3 −0  test/test.css
58 test/fx.html
View
@@ -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 @@
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,7 +110,7 @@
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,
@@ -100,7 +118,7 @@
}, 200, 'ease-out')
el2.animate({
- translate3d: '100px, 100px, 100px',
+ translate3d: '80px, 20px, 100px',
rotateZ: '-90deg',
backgroundColor: '#BADA55'
}, {
@@ -121,7 +139,7 @@
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 @@
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 @@
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 @@
t.pause()
$('#callbacktest').anim({
- translate3d: '100px, 100px, 100px',
+ translate3d: '80px, 20px, 100px',
rotateZ: '90deg',
opacity: 0.5
}, duration / 1000, 'linear',
3  test/test.css
View
@@ -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; }
}
Please sign in to comment.
Something went wrong with that request. Please try again.