├── .gitignore ├── .gitmodules ├── .testr.conf ├── .travis-run.sh ├── .travis-setup.sh ├── .travis.yml ├── COPYING ├── README.md ├── run-lint.sh ├── run-tests-android.sh ├── run-tests.sh ├── test ├── bootstrap.js ├── img │ ├── error.png │ ├── success.png │ └── unknown.png ├── perf │ ├── balls-add-compositing.html │ ├── balls-replace-compositing.html │ ├── perf.js │ └── updating-inline-style-during-animation.html ├── test-generator.html ├── test-results-post.html ├── test-runner.html ├── testcases.js ├── testcases │ ├── auto-test-box-shadow-checks.js │ ├── auto-test-box-shadow.html │ ├── auto-test-calc-checks.js │ ├── auto-test-calc.html │ ├── auto-test-change-playback-rate-checks.js │ ├── auto-test-circular-path-checks.js │ ├── auto-test-circular-path.html │ ├── auto-test-color-checks.js │ ├── auto-test-color-names-checks.js │ ├── auto-test-color-names.html │ ├── auto-test-color.html │ ├── auto-test-composite-transforms-checks.js │ ├── auto-test-composite-transforms.html │ ├── auto-test-compositor-checks.js │ ├── auto-test-compositor.html │ ├── auto-test-delay-checks.js │ ├── auto-test-delay.html │ ├── auto-test-element-animate-checks.js │ ├── auto-test-element-animate.html │ ├── auto-test-fill-values-checks.js │ ├── auto-test-fill-values.html │ ├── auto-test-font-weight-checks.js │ ├── auto-test-font-weight.html │ ├── auto-test-initial-checks.js │ ├── auto-test-initial.html │ ├── auto-test-inline-style-checks.js │ ├── auto-test-inline-style-fallback-checks.js │ ├── auto-test-inline-style-fallback.html │ ├── auto-test-inline-style-methods-checks.js │ ├── auto-test-inline-style-methods.html │ ├── auto-test-inline-style.html │ ├── auto-test-integer-checks.js │ ├── auto-test-integer.html │ ├── auto-test-iteration-start-checks.js │ ├── auto-test-iteration-start.html │ ├── auto-test-iterations-alternate-checks.js │ ├── auto-test-iterations-alternate-holes-checks.js │ ├── auto-test-iterations-alternate-holes.html │ ├── auto-test-iterations-alternate.html │ ├── auto-test-iterations-basic-checks.js │ ├── auto-test-iterations-basic.html │ ├── auto-test-iterations-fill-checks.js │ ├── auto-test-iterations-fill.html │ ├── auto-test-keyframe-creation-checks.js │ ├── auto-test-keyframe-creation.html │ ├── auto-test-keyframe-easing-checks.js │ ├── auto-test-keyframe-easing.html │ ├── auto-test-length-units-checks.js │ ├── auto-test-length-units.html │ ├── auto-test-matrix-transforms-checks.js │ ├── auto-test-matrix-transforms.html │ ├── auto-test-motion-path-checks.js │ ├── auto-test-motion-path.html │ ├── auto-test-non-numeric-checks.js │ ├── auto-test-non-numeric.html │ ├── auto-test-parent-checks.js │ ├── auto-test-parent.html │ ├── auto-test-partial-keyframes-checks.js │ ├── auto-test-partial-keyframes.html │ ├── auto-test-path-checks.js │ ├── auto-test-path.html │ ├── auto-test-pause-checks.js │ ├── auto-test-pause.html │ ├── auto-test-perspective-checks.js │ ├── auto-test-perspective-origin-checks.js │ ├── auto-test-perspective-origin.html │ ├── auto-test-perspective.html │ ├── auto-test-playback-rate-checks.js │ ├── auto-test-playback-rate.html │ ├── auto-test-position-list-type-checks.js │ ├── auto-test-rectangle-checks.js │ ├── auto-test-rectangle.html │ ├── auto-test-reparent-checks.js │ ├── auto-test-reparent.html │ ├── auto-test-seq-speed-checks.js │ ├── auto-test-seq-speed.html │ ├── auto-test-shorthand-checks.js │ ├── auto-test-shorthand.html │ ├── auto-test-start-time-checks.js │ ├── auto-test-start-time-iterations-checks.js │ ├── auto-test-start-time-iterations.html │ ├── auto-test-start-time.html │ ├── auto-test-svg-anim-checks.js │ ├── auto-test-svg-anim.html │ ├── auto-test-svg-circle-checks.js │ ├── auto-test-svg-circle.html │ ├── auto-test-svg-color-checks.js │ ├── auto-test-svg-color.html │ ├── auto-test-text-shadow-checks.js │ ├── auto-test-text-shadow.html │ ├── auto-test-timing-functions-checks.js │ ├── auto-test-timing-functions.html │ ├── auto-test-to-animation-checks.js │ ├── auto-test-to-animation.html │ ├── auto-test-transform-3d-checks.js │ ├── auto-test-transform-3d.html │ ├── auto-test-transform-functions-checks.js │ ├── auto-test-transform-functions.html │ ├── auto-test-transform-origin-checks.js │ ├── auto-test-transform-origin.html │ ├── auto-test-transform-primitives-checks.js │ ├── auto-test-transform-primitives.html │ ├── auto-test-transform-units-checks.js │ ├── auto-test-transform-units.html │ ├── auto-test-visibility-checks.js │ ├── auto-test-visibility.html │ ├── auto-test-wrapping-bug-checks.js │ ├── auto-test-wrapping-bug.html │ ├── background.png │ ├── disabled-auto-test-change-playback-rate.html │ ├── disabled-auto-test-position-list-type.html │ ├── disabled-media.html │ ├── disabled-test-compositing-order.html │ ├── impl-test-deprecation.html │ ├── impl-test-from-css-value.html │ ├── impl-test-paced-timing-function.html │ ├── impl-test-totimelinetime.html │ ├── impl-unit-test-position-type.html │ ├── manual-test-add-player-onend.html │ ├── manual-test-preset-timings.html │ ├── manual-test-step.html │ ├── small.mp4 │ ├── small.webm │ ├── test-bounds.html │ ├── test-document-timeline.html │ ├── test-dynamic-load.html │ ├── test-fill-auto.html │ ├── test-getcurrent.html │ ├── test-keyframe-animation-effect.html │ ├── test-keyframe-composite-operation.html │ ├── test-null-target.html │ ├── test-pause-for-testing.html │ ├── test-player-addeventlistener.html │ ├── test-player-cleanup.html │ ├── test-player-finish-event.html │ ├── test-player-sort.html │ ├── test-player.html │ ├── test-pseudo-element-reference.html │ ├── test-repeated-pause.html │ ├── test-restart.html │ ├── test-reversed-player-active-phase.html │ ├── test-rotation-not-reversed.html │ ├── test-update-state.html │ ├── unit-test-clone.html │ ├── unit-test-delay.html │ ├── unit-test-dom-operations.html │ ├── unit-test-duration.html │ ├── unit-test-get-siblings.html │ ├── unit-test-modify-timing-params.html │ ├── unit-test-null-effect.html │ ├── unit-test-set-parent.html │ ├── unit-test-testharness-failure.html │ ├── unit-test-testharness.html │ └── unit-test-unpause.html ├── testharness_timing.css └── update-testcases.py ├── tools ├── .keepme ├── android │ ├── config.sh │ ├── setup.sh │ └── stop.sh └── python │ ├── requirements.txt │ ├── run-tests.py │ └── setup.sh ├── tutorial ├── basic-animations │ ├── basic-animation-exercise-1.html │ └── basic-animation.html ├── iframe-contents.html ├── jquery.js ├── page-load.js ├── parallel │ ├── parallel-exercise-1.html │ └── parallel.html ├── sample-tutorial.html ├── try-it-yourself.js ├── tutorial-style.css └── tutorial-testing.js └── web-animations.js /.gitignore: -------------------------------------------------------------------------------- 1 | *.pyc 2 | *~ 3 | .nfs* 4 | .*.swp 5 | .*.swo 6 | *.pyc* 7 | *.log* 8 | tools/* 9 | .testrepository 10 | *.png 11 | web-animations-4lint.js 12 | load-list.txt 13 | -------------------------------------------------------------------------------- /.gitmodules: -------------------------------------------------------------------------------- 1 | [submodule "test/testharness"] 2 | path = test/testharness 3 | url = https://github.com/jgraham/testharness.js.git 4 | [submodule "test/coverage/istanbul"] 5 | path = test/coverage/istanbul 6 | url = https://github.com/gotwarlost/istanbul 7 | [submodule "test/coverage/escodegen"] 8 | path = test/coverage/escodegen 9 | url = https://github.com/Constellation/escodegen 10 | [submodule "test/coverage/esprima"] 11 | path = test/coverage/esprima 12 | url = https://github.com/ariya/esprima 13 | [submodule "test/browserdetect"] 14 | path = test/browserdetect 15 | url = https://github.com/web-animations/bowser.git 16 | -------------------------------------------------------------------------------- /.testr.conf: -------------------------------------------------------------------------------- 1 | [DEFAULT] 2 | test_command=python run-tests.py -b Chrome --subunit $LISTOPT $IDOPTION 3 | test_list_option=--list 4 | test_id_option=--load-list $IDFILE 5 | -------------------------------------------------------------------------------- /.travis-run.sh: -------------------------------------------------------------------------------- 1 | #! /bin/bash 2 | 3 | set -x 4 | 5 | if [ x$MODE == x'check' ]; then 6 | SUCCESS=0 7 | 8 | # Check that the testcases json file has been updated 9 | echo "Checking test cases is up to date..." 10 | python ./test/update-testcases.py --dry-run 11 | let "SUCCESS += $?" 12 | 13 | # Check that the web-animations.js file passes lint checks 14 | ./run-lint.sh 15 | let "SUCCESS += $?" 16 | 17 | exit $SUCCESS 18 | else 19 | # For pull requests we don't have access to secure environment variables, so we just return true. 20 | if [ x$BROWSER == "xRemote" -a x$SAUCE_ACCESS_KEY == x"" ]; then 21 | exit 0 22 | fi 23 | 24 | if [ x$BROWSER == "xAndroid-Chrome" ]; then 25 | echo ./run-tests-android.sh $ARGS | bash || exit 1 26 | else 27 | echo ./run-tests.sh $ARGS | bash || exit 1 28 | fi 29 | fi 30 | -------------------------------------------------------------------------------- /.travis-setup.sh: -------------------------------------------------------------------------------- 1 | #! /bin/bash 2 | 3 | set -x 4 | set -e 5 | 6 | # Make sure /dev/shm has correct permissions. 7 | ls -l /dev/shm 8 | sudo chmod 1777 /dev/shm 9 | ls -l /dev/shm 10 | 11 | uname -a 12 | cat /etc/lsb-release 13 | 14 | sudo apt-get update --fix-missing 15 | 16 | # Install python-imaging from the environment rather then build it. 17 | # If the below fails, pip will build it via the requirements.txt 18 | sudo apt-get install python-imaging 19 | VIRTUAL_ENV_site_packages=$(echo $VIRTUAL_ENV/lib/*/site-packages) 20 | VIRTUAL_ENV_python_version=$(echo $VIRTUAL_ENV_site_packages | sed -e's@.*/\(.*\)/site-packages@\1@') 21 | ln -s /usr/lib/$VIRTUAL_ENV_python_version/dist-packages/PIL.pth $VIRTUAL_ENV_site_packages/PIL.pth 22 | ln -s /usr/lib/$VIRTUAL_ENV_python_version/dist-packages/PIL $VIRTUAL_ENV_site_packages/PIL 23 | 24 | export VERSION=$(echo $BROWSER | sed -e's/[^-]*-//') 25 | export BROWSER=$(echo $BROWSER | sed -e's/-.*//') 26 | 27 | echo BROWSER=$BROWSER 28 | echo VERSION=$VERSION 29 | 30 | sudo ln -sf $(which true) $(which xdg-desktop-menu) 31 | 32 | case $BROWSER in 33 | Android) 34 | sudo apt-get install -qq --force-yes \ 35 | libc6:i386 libgcc1:i386 gcc-4.6-base:i386 libstdc++5:i386 \ 36 | libstdc++6:i386 lib32z1 libreadline6-dev:i386 \ 37 | libncurses5-dev:i386 38 | bash tools/android/setup.sh 39 | ;; 40 | 41 | Chrome) 42 | echo "Getting $VERSION of $BROWSER" 43 | export CHROME=google-chrome-${VERSION}_current_amd64.deb 44 | wget https://dl.google.com/linux/direct/$CHROME 45 | sudo dpkg --install $CHROME || sudo apt-get -f install 46 | which google-chrome 47 | ls -l `which google-chrome` 48 | 49 | if [ -f /opt/google/chrome/chrome-sandbox ]; then 50 | export CHROME_SANDBOX=/opt/google/chrome/chrome-sandbox 51 | else 52 | export CHROME_SANDBOX=$(ls /opt/google/chrome*/chrome-sandbox) 53 | fi 54 | 55 | # Download a custom chrome-sandbox which works inside OpenVC containers (used on travis). 56 | sudo rm -f $CHROME_SANDBOX 57 | sudo wget https://googledrive.com/host/0B5VlNZ_Rvdw6NTJoZDBSVy1ZdkE -O $CHROME_SANDBOX 58 | sudo chown root:root $CHROME_SANDBOX; sudo chmod 4755 $CHROME_SANDBOX 59 | sudo md5sum $CHROME_SANDBOX 60 | 61 | google-chrome --version 62 | ;; 63 | 64 | Firefox) 65 | sudo rm -f /usr/local/bin/firefox 66 | case $VERSION in 67 | beta) 68 | yes "\n" | sudo add-apt-repository -y ppa:mozillateam/firefox-next 69 | ;; 70 | aurora) 71 | yes "\n" | sudo add-apt-repository -y ppa:ubuntu-mozilla-daily/firefox-aurora 72 | ;; 73 | esac 74 | sudo apt-get update --fix-missing 75 | sudo apt-get install firefox 76 | which firefox 77 | ls -l `which firefox` 78 | firefox --version 79 | ;; 80 | esac 81 | 82 | R=tools/python/requirements.txt 83 | pip install -r $R --use-mirrors || pip install -r $R 84 | -------------------------------------------------------------------------------- /run-lint.sh: -------------------------------------------------------------------------------- 1 | #! /bin/bash 2 | 3 | # Update git submodules 4 | git submodule init 5 | git submodule update 6 | 7 | # If already in a VIRTUAL_ENV assume the person knows what they are doing, 8 | # otherwise set up a python virtualenv with all the needed requirements. 9 | if [ x$VIRTUAL_ENV == x"" ]; then 10 | cd tools/python 11 | source setup.sh 12 | cd ../.. 13 | fi 14 | 15 | # Comment out the (function() {} ) wrapper 16 | sed -e'17s-^-//-' -e'$s-^-//-' web-animations.js > web-animations-4lint.js 17 | 18 | gjslint --summary --nojsdoc web-animations-4lint.js 19 | exit $? 20 | -------------------------------------------------------------------------------- /run-tests-android.sh: -------------------------------------------------------------------------------- 1 | #! /bin/bash 2 | 3 | # Update git submodules 4 | git submodule init 5 | git submodule update 6 | 7 | # Set up the android environment 8 | source tools/android/setup.sh 9 | 10 | function run_tests() { 11 | ./run-tests.sh \ 12 | -b Remote \ 13 | --remote-executor http://localhost:9515 \ 14 | --remote-caps="chromeOptions=androidPackage=$CHROME_APP" \ 15 | --load-list load-list.txt \ 16 | --verbose || exit 1 17 | } 18 | 19 | # We split the test runs into two groups to avoid running out of memory in Travis. 20 | echo "^[a].*" > load-list.txt 21 | run_tests 22 | echo "^[^a].*" > load-list.txt 23 | run_tests 24 | 25 | echo "Run $ANDROID_DIR/stop.sh if finished." 26 | -------------------------------------------------------------------------------- /run-tests.sh: -------------------------------------------------------------------------------- 1 | #! /bin/bash 2 | 3 | # Update git submodules 4 | git submodule init 5 | git submodule update 6 | 7 | # If already in a VIRTUAL_ENV assume the person knows what they are doing, 8 | # otherwise set up a python virtualenv with all the needed requirements. 9 | if [ x$VIRTUAL_ENV == x"" ]; then 10 | cd tools/python 11 | source setup.sh 12 | cd ../.. 13 | fi 14 | 15 | exec python tools/python/run-tests.py "$@" 16 | -------------------------------------------------------------------------------- /test/img/error.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/web-animations/web-animations-js-legacy/6a1c45473f9ba2db1ccad34f879bca829f77264d/test/img/error.png -------------------------------------------------------------------------------- /test/img/success.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/web-animations/web-animations-js-legacy/6a1c45473f9ba2db1ccad34f879bca829f77264d/test/img/success.png -------------------------------------------------------------------------------- /test/img/unknown.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/web-animations/web-animations-js-legacy/6a1c45473f9ba2db1ccad34f879bca829f77264d/test/img/unknown.png -------------------------------------------------------------------------------- /test/test-results-post.html: -------------------------------------------------------------------------------- 1 | 2 |
3 | 4 | -------------------------------------------------------------------------------- /test/testcases/auto-test-box-shadow-checks.js: -------------------------------------------------------------------------------- 1 | timing_test(function() { 2 | at(0 * 1000, function() { 3 | assert_styles(".anim", [ 4 | {'boxShadow':'rgb(0, 0, 255) -20px -20px 0px 0px'}, 5 | {'boxShadow':'rgb(0, 0, 255) -20px -20px 8px 0px inset'}, 6 | {'boxShadow':'rgb(0, 0, 255) 20px 20px 8px 0px inset'}, 7 | {'boxShadow':'none'}, 8 | ]); 9 | }); 10 | at(1 * 1000, function() { 11 | assert_styles(".anim", [ 12 | {'boxShadow':'rgb(0, 32, 191) -10px -10px 3px 2px'}, 13 | {'boxShadow':'rgb(0, 32, 191) -10px -10px 9px 2px inset'}, 14 | {'boxShadow':'rgb(0, 0, 255) 20px 20px 8px 0px inset'}, 15 | {'boxShadow':'none'}, 16 | ]); 17 | }); 18 | at(2 * 1000, function() { 19 | assert_styles(".anim", [ 20 | {'boxShadow':'rgb(0, 64, 128) 0px 0px 6px 4px'}, 21 | {'boxShadow':'rgb(0, 64, 128) 0px 0px 10px 4px inset'}, 22 | {'boxShadow':'rgb(0, 128, 0) 20px 20px 12px 8px'}, 23 | {'boxShadow':'rgb(0, 128, 0) 20px 20px 12px 8px'}, 24 | ]); 25 | }); 26 | at(3 * 1000, function() { 27 | assert_styles(".anim", [ 28 | {'boxShadow':'rgb(0, 96, 64) 10px 10px 9px 6px'}, 29 | {'boxShadow':'rgb(0, 96, 64) 10px 10px 11px 6px inset'}, 30 | {'boxShadow':'rgb(0, 128, 0) 20px 20px 12px 8px'}, 31 | {'boxShadow':'rgb(0, 128, 0) 20px 20px 12px 8px'}, 32 | ]); 33 | }); 34 | at(4 * 1000, function() { 35 | assert_styles(".anim", [ 36 | {'boxShadow':'rgb(0, 128, 0) 20px 20px 12px 8px'}, 37 | {'boxShadow':'rgb(0, 128, 0) 20px 20px 12px 8px inset'}, 38 | {'boxShadow':'rgb(0, 128, 0) 20px 20px 12px 8px'}, 39 | {'boxShadow':'rgb(0, 128, 0) 20px 20px 12px 8px'}, 40 | ]); 41 | }); 42 | }, "Auto generated tests"); -------------------------------------------------------------------------------- /test/testcases/auto-test-box-shadow.html: -------------------------------------------------------------------------------- 1 | 16 | 17 | 18 | 19 | 28 | 29 |
30 |
31 |
32 |
33 | 34 | 41 | -------------------------------------------------------------------------------- /test/testcases/auto-test-calc-checks.js: -------------------------------------------------------------------------------- 1 | timing_test(function() { 2 | at(0 * 1000, function() { 3 | assert_styles(".anim",{'width':'50px'}); 4 | }); 5 | at(0.5 * 1000, function() { 6 | assert_styles(".anim", [ 7 | {'width':'81.25px'}, 8 | {'width':'81.25px'}, 9 | {'width':'137.5px'}, 10 | {'width':'81.25px'}, 11 | {'width':'95.3125px'}, 12 | {'width':'95.3125px'}, 13 | {'width':'95.3125px'}, 14 | ]); 15 | }); 16 | at(1 * 1000, function() { 17 | assert_styles(".anim", [ 18 | {'width':'150px'}, 19 | {'width':'150px'}, 20 | {'width':'225px'}, 21 | {'width':'150px'}, 22 | {'width':'168.75px'}, 23 | {'width':'168.75px'}, 24 | {'width':'168.75px'}, 25 | ]); 26 | }); 27 | at(1.5 * 1000, function() { 28 | assert_styles(".anim", [ 29 | {'width':'256.25px'}, 30 | {'width':'256.25px'}, 31 | {'width':'312.5px'}, 32 | {'width':'256.25px'}, 33 | {'width':'270.3125px'}, 34 | {'width':'270.3125px'}, 35 | {'width':'270.3125px'}, 36 | ]); 37 | }); 38 | at(2 * 1000, function() { 39 | assert_styles(".anim",{'width':'400px'}); 40 | }); 41 | }, "Auto generated tests"); 42 | -------------------------------------------------------------------------------- /test/testcases/auto-test-change-playback-rate-checks.js: -------------------------------------------------------------------------------- 1 | timing_test(function() { 2 | at( 0.0, function() {assert_styles('#a', {'left':'0px'})}, "Autogenerated test at t= 0.0"); 3 | at( 1.0, function() {assert_styles('#a', {'left':'50px'})}, "Autogenerated test at t= 1.0"); 4 | at( 2.0, function() {assert_styles('#a', {'left':'100px'})}, "Autogenerated test at t= 2.0"); 5 | at( 3.0, function() {assert_styles('#a', {'left':'150px'})}, "Autogenerated test at t= 3.0"); 6 | at( 4.0, function() {assert_styles('#a', {'left':'200px'})}, "Autogenerated test at t= 4.0"); 7 | at( 5.0, function() {assert_styles('#a', {'left':'250px'})}, "Autogenerated test at t= 5.0"); 8 | at( 6.0, function() {assert_styles('#a', {'left':'300px'})}, "Autogenerated test at t= 6.0"); 9 | at( 7.0, function() {assert_styles('#a', {'left':'350px'})}, "Autogenerated test at t= 7.0"); 10 | at( 8.0, function() {assert_styles('#a', {'left':'400px'})}, "Autogenerated test at t= 8.0"); 11 | at( 9.0, function() {assert_styles('#a', {'left':'450px'})}, "Autogenerated test at t= 9.0"); 12 | at(10.0 * 1000, function() {assert_styles('#a', {'left':'500px'})}, "Autogenerated"); 13 | at(11.0 * 1000, function() {assert_styles('#a', {'left':'450px'})}, "Autogenerated"); 14 | at(12.0 * 1000, function() {assert_styles('#a', {'left':'400px'})}, "Autogenerated"); 15 | at(13.0 * 1000, function() {assert_styles('#a', {'left':'350px'})}, "Autogenerated"); 16 | at(14.0 * 1000, function() {assert_styles('#a', {'left':'300px'})}, "Autogenerated"); 17 | at(15.0 * 1000, function() {assert_styles('#a', {'left':'250px'})}, "Autogenerated"); 18 | at(16.0 * 1000, function() {assert_styles('#a', {'left':'200px'})}, "Autogenerated"); 19 | at(17.0 * 1000, function() {assert_styles('#a', {'left':'150px'})}, "Autogenerated"); 20 | at(18.0 * 1000, function() {assert_styles('#a', {'left':'100px'})}, "Autogenerated"); 21 | at(19.0 * 1000, function() {assert_styles('#a', {'left':'50px'})}, "Autogenerated"); 22 | at(20.0 * 1000, function() {assert_styles('#a', {'left':'0px'})}, "Autogenerated"); 23 | }, "Autogenerated checks."); 24 | -------------------------------------------------------------------------------- /test/testcases/auto-test-circular-path-checks.js: -------------------------------------------------------------------------------- 1 | timing_test(function() { 2 | at(0, function() { 3 | assert_styles("#anim",{'transform':'matrix(0.7924, 0.61, -0.61, 0.7924, 117.5, 87.5)'}); 4 | }); 5 | at(1000, function() { 6 | assert_styles("#anim",{'transform':'matrix(0.9836, 0.1802, -0.1802, 0.9836, 145.7, 146.2)'}); 7 | }); 8 | at(2000, function() { 9 | assert_styles("#anim",{'transform':'matrix(0.9755, -0.2198, 0.2198, 0.9755, 209.2, 160.6)'}); 10 | }); 11 | at(3000, function() { 12 | assert_styles("#anim",{'transform':'matrix(0.4368, -0.8996, 0.8996, 0.4368, 260.1, 120)'}); 13 | }); 14 | at(4000, function() { 15 | assert_styles("#anim",{'transform':'matrix(-0.9328, -0.3605, 0.3605, -0.9328, 260.2, 54.85)'}); 16 | }); 17 | at(5000, function() { 18 | assert_styles("#anim",{'transform':'matrix(-0.9995, -0.03009, 0.03009, -0.9995, 209.2, 14.32)'}); 19 | }); 20 | at(6000, function() { 21 | assert_styles("#anim",{'transform':'matrix(-0.7815, 0.6239, -0.6239, -0.7815, 145.7, 28.86)'}); 22 | }); 23 | at(7000, function() { 24 | assert_styles("#anim",{'transform':'matrix(0.7924, 0.61, -0.61, 0.7924, 247.5, 187.5)'}); 25 | }); 26 | at(8000, function() { 27 | assert_styles("#anim",{'transform':'matrix(0.9836, 0.1802, -0.1802, 0.9836, 275.7, 246.2)'}); 28 | }); 29 | at(9000, function() { 30 | assert_styles("#anim",{'transform':'matrix(0.9755, -0.2198, 0.2198, 0.9755, 339.2, 260.6)'}); 31 | }); 32 | at(10000, function() { 33 | assert_styles("#anim",{'transform':'matrix(0.4368, -0.8996, 0.8996, 0.4368, 390.1, 220)'}); 34 | }); 35 | at(11000, function() { 36 | assert_styles("#anim",{'transform':'matrix(-0.9328, -0.3605, 0.3605, -0.9328, 390.2, 154.8)'}); 37 | }); 38 | at(12000, function() { 39 | assert_styles("#anim",{'transform':'matrix(-0.9995, -0.03009, 0.03009, -0.9995, 339.2, 114.3)'}); 40 | }); 41 | at(13000, function() { 42 | assert_styles("#anim",{'transform':'matrix(-0.7815, 0.6239, -0.6239, -0.7815, 275.7, 128.9)'}); 43 | }); 44 | at(14000, function() { 45 | assert_styles("#anim",{'transform':'matrix(0.7924, 0.61, -0.61, 0.7924, 377.5, 287.5)'}); 46 | }); 47 | at(15000, function() { 48 | assert_styles("#anim",{'transform':'matrix(0.9836, 0.1802, -0.1802, 0.9836, 405.7, 346.2)'}); 49 | }); 50 | at(16000, function() { 51 | assert_styles("#anim",{'transform':'matrix(0.9755, -0.2198, 0.2198, 0.9755, 469.2, 360.6)'}); 52 | }); 53 | at(17000, function() { 54 | assert_styles("#anim",{'transform':'matrix(0.4368, -0.8996, 0.8996, 0.4368, 520.1, 320)'}); 55 | }); 56 | at(18000, function() { 57 | assert_styles("#anim",{'transform':'matrix(-0.9328, -0.3605, 0.3605, -0.9328, 520.2, 254.8)'}); 58 | }); 59 | at(19000, function() { 60 | assert_styles("#anim",{'transform':'matrix(-0.9995, -0.03009, 0.03009, -0.9995, 469.2, 214.3)'}); 61 | }); 62 | at(20000, function() { 63 | assert_styles("#anim",{'transform':'matrix(-0.7815, 0.6239, -0.6239, -0.7815, 405.7, 228.9)'}); 64 | }); 65 | }, "Auto generated tests"); 66 | -------------------------------------------------------------------------------- /test/testcases/auto-test-circular-path.html: -------------------------------------------------------------------------------- 1 | 16 | 17 | 18 | 47 | 48 | 49 | 50 | 52 | 54 | 56 | 57 | 58 |
59 |
→
60 | 61 | 73 | 74 | 84 | -------------------------------------------------------------------------------- /test/testcases/auto-test-composite-transforms-checks.js: -------------------------------------------------------------------------------- 1 | timing_test(function() { 2 | at(0 * 1000, function() { 3 | assert_styles(".anim",{'transform':'matrix(1, 0, 0, 1, 0, 0)'}); 4 | }); 5 | at(0.4 * 1000, function() { 6 | assert_styles(".anim", [ 7 | {'transform':'matrix(1, 0, 0, 1, 40, 0)'}, 8 | {'transform':'matrix(0.9511, 0.309, -0.309, 0.9511, 0, 0)'}, 9 | {'transform':'matrix(0.9511, 0.309, -0.309, 0.9511, 40, 0)'}, 10 | {'transform':'matrix(0.9511, 0.309, -0.309, 0.9511, 38.04, 12.36)'}, 11 | ]); 12 | }); 13 | at(0.8 * 1000, function() { 14 | assert_styles(".anim", [ 15 | {'transform':'matrix(1, 0, 0, 1, 80, 0)'}, 16 | {'transform':'matrix(0.809, 0.5878, -0.5878, 0.809, 0, 0)'}, 17 | {'transform':'matrix(0.809, 0.5878, -0.5878, 0.809, 80, 0)'}, 18 | {'transform':'matrix(0.809, 0.5878, -0.5878, 0.809, 64.72, 47.02)'}, 19 | ]); 20 | }); 21 | at(1.2000000000000002 * 1000, function() { 22 | assert_styles(".anim", [ 23 | {'transform':'matrix(1, 0, 0, 1, 120, 0)'}, 24 | {'transform':'matrix(0.5878, 0.809, -0.809, 0.5878, 0, 0)'}, 25 | {'transform':'matrix(0.5878, 0.809, -0.809, 0.5878, 120, 0)'}, 26 | {'transform':'matrix(0.5878, 0.809, -0.809, 0.5878, 70.53, 97.08)'}, 27 | ]); 28 | }); 29 | at(1.6 * 1000, function() { 30 | assert_styles(".anim", [ 31 | {'transform':'matrix(1, 0, 0, 1, 160, 0)'}, 32 | {'transform':'matrix(0.309, 0.9511, -0.9511, 0.309, 0, 0)'}, 33 | {'transform':'matrix(0.309, 0.9511, -0.9511, 0.309, 160, 0)'}, 34 | {'transform':'matrix(0.309, 0.9511, -0.9511, 0.309, 49.44, 152.2)'}, 35 | ]); 36 | }); 37 | at(2 * 1000, function() { 38 | assert_styles(".anim", [ 39 | {'transform':'matrix(1, 0, 0, 1, 200, 0)'}, 40 | {'transform':'matrix(0, 1, -1, 0, 0, 0)'}, 41 | {'transform':'matrix(0, 1, -1, 0, 200, 0)'}, 42 | {'transform':'matrix(0, 1, -1, 0, 0, 200)'}, 43 | ]); 44 | }); 45 | }, "Auto generated tests"); 46 | -------------------------------------------------------------------------------- /test/testcases/auto-test-composite-transforms.html: -------------------------------------------------------------------------------- 1 | 16 | 17 | 18 | 51 | 52 |
Right edge of each box should align with black line at end of test.
53 |
54 |
55 |
56 |
57 |
58 |
59 |
60 |
61 | 62 |
63 | 64 | 73 | 74 | 98 | -------------------------------------------------------------------------------- /test/testcases/auto-test-compositor-checks.js: -------------------------------------------------------------------------------- 1 | timing_test(function() { 2 | at(0 * 1000, function() { 3 | assert_styles(".anim",{'x':'0px'}); 4 | assert_styles(".anim2",{'ctm':'{1, 0, 0, 1, 0, 0}'}); 5 | }); 6 | at(1 * 1000, function() { 7 | assert_styles(".anim",{'x':'133.3px'}); 8 | assert_styles(".anim2",{'ctm':'{1, 0, 0, 1, 66.67, 66.67}'}); 9 | }); 10 | at(2 * 1000, function() { 11 | assert_styles(".anim",{'x':'316.7px'}); 12 | assert_styles(".anim2",{'ctm':'{0.9239, 0.3827, -0.3827, 0.9239, 156.4, 142.9}'}); 13 | }); 14 | at(3 * 1000, function() { 15 | assert_styles(".anim",{'x':'500px'}); 16 | assert_styles(".anim2",{'ctm':'{0.7071, 0.7071, -0.7071, 0.7071, 235.4, 235.4}'}); 17 | }); 18 | at(4 * 1000, function() { 19 | assert_styles(".anim",{'x':'550px'}); 20 | assert_styles(".anim2",{'ctm':'{0.3827, 0.9239, -0.9239, 0.3827, 228.7, 269.3}'}); 21 | }); 22 | at(5 * 1000, function() { 23 | assert_styles(".anim",{'x':'600px'}); 24 | assert_styles(".anim2",{'ctm':'{0, 1, -1, 0, 200, 300}'}); 25 | }); 26 | }, "Auto generated tests"); 27 | -------------------------------------------------------------------------------- /test/testcases/auto-test-compositor.html: -------------------------------------------------------------------------------- 1 | 16 | 17 | 18 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 47 | 48 | 69 | -------------------------------------------------------------------------------- /test/testcases/auto-test-delay.html: -------------------------------------------------------------------------------- 1 | 16 | 17 | 18 | 27 |
28 | 29 | 40 | -------------------------------------------------------------------------------- /test/testcases/auto-test-element-animate-checks.js: -------------------------------------------------------------------------------- 1 | timing_test(function() { 2 | at(0 * 1000, function() { 3 | assert_styles('body', {'display':'none'}); 4 | }, "Autogenerated"); 5 | at(0.5 * 1000, function() { 6 | assert_styles('body', {'display':'block'}); 7 | }, "Autogenerated"); 8 | }, "Autogenerated checks."); 9 | -------------------------------------------------------------------------------- /test/testcases/auto-test-element-animate.html: -------------------------------------------------------------------------------- 1 | 16 | 17 | 18 | 24 | 25 | PASS 26 | 27 | 31 | -------------------------------------------------------------------------------- /test/testcases/auto-test-font-weight-checks.js: -------------------------------------------------------------------------------- 1 | timing_test(function() { 2 | at(0 * 1000, function() { 3 | assert_styles( '#test', {'font-weight':'100'}); 4 | }, "Autogenerated"); 5 | at(0.3 * 1000, function() { 6 | assert_styles( '#test', {'font-weight':'100'}); 7 | }, "Autogenerated"); 8 | at(0.6 * 1000, function() { 9 | assert_styles( '#test', {'font-weight':'100'}); 10 | }, "Autogenerated"); 11 | at(0.8999999999999999 * 1000, function() { 12 | assert_styles( '#test', {'font-weight':'100'}); 13 | }, "Autogenerated"); 14 | at(1.2 * 1000, function() { 15 | assert_styles( '#test', {'font-weight':'300'}); 16 | }, "Autogenerated"); 17 | at(1.5 * 1000, function() { 18 | assert_styles( '#test', {'font-weight':'500'}); 19 | }, "Autogenerated"); 20 | at(1.8 * 1000, function() { 21 | assert_styles( '#test', {'font-weight':'bold'}); 22 | }, "Autogenerated"); 23 | at(2.1 * 1000, function() { 24 | assert_styles( '#test', {'font-weight':'900'}); 25 | }, "Autogenerated"); 26 | }, "Autogenerated checks."); 27 | -------------------------------------------------------------------------------- /test/testcases/auto-test-font-weight.html: -------------------------------------------------------------------------------- 1 | 16 | 17 | 18 | 19 | 22 | 33 | 34 | 35 |
Testing font-weight!
36 |
Testing font-weight!
37 | 38 | 44 | -------------------------------------------------------------------------------- /test/testcases/auto-test-inline-style-checks.js: -------------------------------------------------------------------------------- 1 | timing_test(function() { 2 | at(0 * 1000, function() { 3 | assert_styles("#target",{'left':'0px','backgroundColor':'rgb(176, 196, 222)'}); 4 | }); 5 | at(0.5 * 1000, function() { 6 | assert_styles("#target",{'left':'50px','backgroundColor':'rgb(176, 196, 222)'}); 7 | }); 8 | at(1.5 * 1000, function() { 9 | assert_styles("#target",{'left':'100px','backgroundColor':'rgb(176, 196, 222)'}); 10 | }); 11 | at(2 * 1000, function() { 12 | assert_styles("#target",{'left':'50px','backgroundColor':'rgb(176, 196, 222)'}); 13 | }); 14 | at(3 * 1000, function() { 15 | assert_styles("#target",{'left':'100px','backgroundColor':'rgb(0, 128, 0)'}); 16 | }); 17 | }, "Auto generated tests"); 18 | -------------------------------------------------------------------------------- /test/testcases/auto-test-inline-style-fallback-checks.js: -------------------------------------------------------------------------------- 1 | timing_test(function() { 2 | at(0 * 1000, function() { 3 | assert_styles("#target",{'left':'0px','backgroundColor':'rgb(176, 196, 222)'}); 4 | }); 5 | at(0.5 * 1000, function() { 6 | assert_styles("#target",{'left':'50px','backgroundColor':'rgb(176, 196, 222)'}); 7 | }); 8 | at(1.5 * 1000, function() { 9 | assert_styles("#target",{'left':'100px','backgroundColor':'rgb(176, 196, 222)'}); 10 | }); 11 | at(2 * 1000, function() { 12 | assert_styles("#target",{'left':'50px','backgroundColor':'rgb(176, 196, 222)'}); 13 | }); 14 | at(3 * 1000, function() { 15 | assert_styles("#target",{'left':'100px','backgroundColor':'rgb(0, 128, 0)'}); 16 | }); 17 | }, "Auto generated tests"); 18 | -------------------------------------------------------------------------------- /test/testcases/auto-test-inline-style-fallback.html: -------------------------------------------------------------------------------- 1 | 16 | 17 | 18 | 31 | 32 | 33 |
34 |
35 | 36 | 37 | 79 | -------------------------------------------------------------------------------- /test/testcases/auto-test-inline-style-methods-checks.js: -------------------------------------------------------------------------------- 1 | timing_test(function() { 2 | at(0 * 1000, function() { 3 | assert_styles("#target",{'left':'0px','backgroundColor':'rgb(176, 196, 222)'}); 4 | }); 5 | at(0.5 * 1000, function() { 6 | assert_styles("#target",{'left':'50px','backgroundColor':'rgb(176, 196, 222)'}); 7 | }); 8 | at(1.5 * 1000, function() { 9 | assert_styles("#target",{'left':'100px','backgroundColor':'rgb(176, 196, 222)'}); 10 | }); 11 | at(2 * 1000, function() { 12 | assert_styles("#target",{'left':'50px','backgroundColor':'rgb(176, 196, 222)'}); 13 | }); 14 | at(3 * 1000, function() { 15 | assert_styles("#target",{'left':'100px','backgroundColor':'rgb(0, 128, 0)'}); 16 | }); 17 | }, "Auto generated tests"); 18 | -------------------------------------------------------------------------------- /test/testcases/auto-test-inline-style-methods.html: -------------------------------------------------------------------------------- 1 | 16 | 17 | 18 | 31 | 32 | 33 |
34 |
35 | 36 | 37 | 71 | -------------------------------------------------------------------------------- /test/testcases/auto-test-inline-style.html: -------------------------------------------------------------------------------- 1 | 16 | 17 | 18 | 31 | 32 | 33 |
34 |
35 | 36 | 37 | 70 | -------------------------------------------------------------------------------- /test/testcases/auto-test-integer-checks.js: -------------------------------------------------------------------------------- 1 | timing_test(function() { 2 | at(0 * 1000, function() { 3 | assert_styles('#test', {'z-index':'0'}); 4 | }, "Autogenerated"); 5 | at(0.3 * 1000, function() { 6 | assert_styles('#test', {'z-index':'10'}); 7 | }, "Autogenerated"); 8 | at(0.6 * 1000, function() { 9 | assert_styles('#test', {'z-index':'20'}); 10 | }, "Autogenerated"); 11 | at(0.8999999999999999 * 1000, function() { 12 | assert_styles('#test', {'z-index':'30'}); 13 | }, "Autogenerated"); 14 | at(1.2 * 1000, function() { 15 | assert_styles('#test', {'z-index':'40'}); 16 | }, "Autogenerated"); 17 | at(1.5 * 1000, function() { 18 | assert_styles('#test', {'z-index':'50'}); 19 | }, "Autogenerated"); 20 | at(1.8 * 1000, function() { 21 | assert_styles('#test', {'z-index':'60'}); 22 | }, "Autogenerated"); 23 | at(2.1 * 1000, function() { 24 | assert_styles('#test', {'z-index':'70'}); 25 | }, "Autogenerated"); 26 | at(2.4 * 1000, function() { 27 | assert_styles('#test', {'z-index':'80'}); 28 | }, "Autogenerated"); 29 | at(2.6999999999999997 * 1000, function() { 30 | assert_styles('#test', {'z-index':'89'}); 31 | }, "Autogenerated"); 32 | at(2.9999999999999996 * 1000, function() { 33 | assert_styles('#test', {'z-index':'99'}); 34 | }, "Autogenerated"); 35 | at(3.2999999999999994 * 1000, function() { 36 | assert_styles('#test', {'z-index':'100'}); 37 | }, "Autogenerated"); 38 | }, "Autogenerated checks."); 39 | -------------------------------------------------------------------------------- /test/testcases/auto-test-integer.html: -------------------------------------------------------------------------------- 1 | 16 | 17 | 18 | 28 | 29 |
30 | 31 | 53 | -------------------------------------------------------------------------------- /test/testcases/auto-test-iterations-alternate-checks.js: -------------------------------------------------------------------------------- 1 | timing_test(function() { 2 | at(0 * 1000, function() { 3 | assert_styles('.anim', {'left':'100px'}); 4 | }, "Autogenerated"); 5 | at(0.25 * 1000, function() { 6 | assert_styles('.anim', {'left':'200px'}); 7 | }, "Autogenerated"); 8 | at(0.5 * 1000, function() { 9 | assert_styles('.anim', {'left':'300px'}); 10 | }, "Autogenerated"); 11 | at(0.75 * 1000, function() { 12 | assert_styles('.anim', {'left':'400px'}); 13 | }, "Autogenerated"); 14 | at(1 * 1000, function() { 15 | assert_styles('.anim', {'left':'500px'}); 16 | }, "Autogenerated"); 17 | at(1.25 * 1000, function() { 18 | assert_styles('.anim', {'left':'400px'}); 19 | }, "Autogenerated"); 20 | at(1.5 * 1000, function() { 21 | assert_styles('.anim', {'left':'300px'}); 22 | }, "Autogenerated"); 23 | at(1.75 * 1000, function() { 24 | assert_styles('.anim', {'left':'200px'}); 25 | }, "Autogenerated"); 26 | at(2 * 1000, function() { 27 | assert_styles('.anim', {'left':'100px'}); 28 | }, "Autogenerated"); 29 | at(2.25 * 1000, function() { 30 | assert_styles('.anim', {'left':'200px'}); 31 | }, "Autogenerated"); 32 | at(2.5 * 1000, function() { 33 | assert_styles('.anim', {'left':'300px'}); 34 | }, "Autogenerated"); 35 | at(2.75 * 1000, function() { 36 | assert_styles('.anim', {'left':'400px'}); 37 | }, "Autogenerated"); 38 | at(3.0 * 1000, function() { 39 | assert_styles('.anim', {'left':'500px'}); 40 | }, "Autogenerated"); 41 | at(4.0 * 1000, function() { 42 | assert_styles('.anim', {'left':'500px'}); 43 | }, "Autogenerated"); 44 | }, "Autogenerated checks."); 45 | -------------------------------------------------------------------------------- /test/testcases/auto-test-iterations-alternate-holes-checks.js: -------------------------------------------------------------------------------- 1 | timing_test(function() { 2 | at(0.25 * 1000, function() { 3 | assert_styles('#a', {'left':'200px'}); 4 | }, "Autogenerated test for #a at t=3.25"); 5 | at(0.5 * 1000, function() { 6 | assert_styles('#a', {'left':'300px'}); 7 | }, "Autogenerated test for #a at t=3.5"); 8 | at(0.75 * 1000, function() { 9 | assert_styles('#a', {'left':'400px'}); 10 | }, "Autogenerated test for #a at t=3.75"); 11 | at(1 * 1000, function() { 12 | assert_styles('#a', {'left':'100px'}); 13 | }, "Autogenerated test for #a at t=4"); 14 | at(1.25 * 1000, function() { 15 | assert_styles('#a', {'left':'400px'}); 16 | }, "Autogenerated test for #a at t=4.25"); 17 | at(1.5 * 1000, function() { 18 | assert_styles('#a', {'left':'300px'}); 19 | }, "Autogenerated test for #a at t=4.5"); 20 | at(1.75 * 1000, function() { 21 | assert_styles('#a', {'left':'200px'}); 22 | }, "Autogenerated test for #a at t=4.75"); 23 | at(2 * 1000, function() { 24 | assert_styles('#a', {'left':'100px'}); 25 | }, "Autogenerated test for #a at t=5"); 26 | at(2.25 * 1000, function() { 27 | assert_styles('#a', {'left':'200px'}); 28 | }, "Autogenerated test for #a at t=5.25"); 29 | at(2.5 * 1000, function() { 30 | assert_styles('#a', {'left':'300px'}); 31 | }, "Autogenerated test for #a at t=5.5"); 32 | at(2.75 * 1000, function() { 33 | assert_styles('#a', {'left':'400px'}); 34 | }, "Autogenerated test for #a at t=5.75"); 35 | at(3.0 * 1000, function() { 36 | assert_styles('#a', {'left':'100px'}); 37 | }, "Autogenerated test for #a at t=6.0"); 38 | at(4.0 * 1000, function() { 39 | assert_styles('#a', {'left':'100px'}); 40 | }, "Autogenerated test for #a at t=7.0"); 41 | }, "Autogenerated checks."); 42 | -------------------------------------------------------------------------------- /test/testcases/auto-test-iterations-alternate-holes.html: -------------------------------------------------------------------------------- 1 | 16 | 17 | 18 | 27 | 28 |
29 | 30 | 31 | 49 | -------------------------------------------------------------------------------- /test/testcases/auto-test-iterations-alternate.html: -------------------------------------------------------------------------------- 1 | 16 | 17 | 18 | 27 | 28 |
29 |
30 | 31 | 32 | 51 | -------------------------------------------------------------------------------- /test/testcases/auto-test-keyframe-creation-checks.js: -------------------------------------------------------------------------------- 1 | timing_test(function() { 2 | at(0 * 1000, function() { 3 | assert_styles( 4 | '.anim', 5 | [{'left':'50px'}, 6 | {'left':'50px'}, 7 | {'left':'100px'}, 8 | {'left':'50px'}, 9 | {'left':'100px'}, 10 | {'left':'200px'}, 11 | {'left':'200px'}]); 12 | }, "Autogenerated"); 13 | at(0.4 * 1000, function() { 14 | assert_styles( 15 | '.anim', 16 | [{'left':'50px'}, 17 | {'left':'50px'}, 18 | {'left':'120px'}, 19 | {'left':'80px'}, 20 | {'left':'120px'}, 21 | {'left':'120px'}, 22 | {'left':'360px'}]); 23 | }, "Autogenerated"); 24 | at(0.8 * 1000, function() { 25 | assert_styles( 26 | '.anim', 27 | [{'left':'50px'}, 28 | {'left':'50px'}, 29 | {'left':'140px'}, 30 | {'left':'110px'}, 31 | {'left':'140px'}, 32 | {'left':'120px'}, 33 | {'left':'340px'}]); 34 | }, "Autogenerated"); 35 | at(1.2000000000000002 * 1000, function() { 36 | assert_styles( 37 | '.anim', 38 | [{'left':'120px'}, 39 | {'left':'80px'}, 40 | {'left':'160px'}, 41 | {'left':'140px'}, 42 | {'left':'160px'}, 43 | {'left':'146.6666717529297px'}, 44 | {'left':'340px'}]); 45 | }, "Autogenerated"); 46 | at(1.6 * 1000, function() { 47 | assert_styles( 48 | '.anim', 49 | [{'left':'160px'}, 50 | {'left':'140px'}, 51 | {'left':'180px'}, 52 | {'left':'170px'}, 53 | {'left':'180px'}, 54 | {'left':'173.3333282470703px'}, 55 | {'left':'360px'}]); 56 | }, "Autogenerated"); 57 | at(2 * 1000, function() { 58 | assert_styles( 59 | '.anim', 60 | {'left':'200px'}); 61 | }, "Autogenerated"); 62 | at(2.4 * 1000, function() { 63 | assert_styles( 64 | '.anim', 65 | {'left':'200px'}); 66 | }, "Autogenerated"); 67 | }, "Autogenerated checks."); 68 | -------------------------------------------------------------------------------- /test/testcases/auto-test-keyframe-creation.html: -------------------------------------------------------------------------------- 1 | 16 | 17 | 18 | 65 | 66 |
67 | 68 |
69 |
70 |
71 |
72 |
73 |
74 |
75 |
76 |
77 | 78 |
79 | 80 | 81 | 110 | -------------------------------------------------------------------------------- /test/testcases/auto-test-keyframe-easing-checks.js: -------------------------------------------------------------------------------- 1 | timing_test(function() { 2 | at(0 * 1000, function() { 3 | assert_styles("#target",{'height':'0px'}); 4 | }); 5 | at(0.25 * 1000, function() { 6 | assert_styles("#target",{'height':'12.5px'}); 7 | }); 8 | at(0.5 * 1000, function() { 9 | assert_styles("#target",{'height':'25px'}); 10 | }); 11 | at(0.75 * 1000, function() { 12 | assert_styles("#target",{'height':'37.5px'}); 13 | }); 14 | at(1 * 1000, function() { 15 | assert_styles("#target",{'height':'50px'}); 16 | }); 17 | at(1.25 * 1000, function() { 18 | assert_styles("#target",{'height':'62.5px'}); 19 | }); 20 | at(1.5 * 1000, function() { 21 | assert_styles("#target",{'height':'75px'}); 22 | }); 23 | at(1.75 * 1000, function() { 24 | assert_styles("#target",{'height':'87.5px'}); 25 | }); 26 | at(2 * 1000, function() { 27 | assert_styles("#target",{'height':'100px'}); 28 | }); 29 | at(2.25 * 1000, function() { 30 | assert_styles("#target",{'height':'106.5px'}); 31 | }); 32 | at(2.5 * 1000, function() { 33 | assert_styles("#target",{'height':'125px'}); 34 | }); 35 | at(2.75 * 1000, function() { 36 | assert_styles("#target",{'height':'143.5px'}); 37 | }); 38 | at(3 * 1000, function() { 39 | assert_styles("#target",{'height':'150px'}); 40 | }); 41 | at(3.25 * 1000, function() { 42 | assert_styles("#target",{'height':'150px'}); 43 | }); 44 | at(3.5 * 1000, function() { 45 | assert_styles("#target",{'height':'150px'}); 46 | }); 47 | at(3.75 * 1000, function() { 48 | assert_styles("#target",{'height':'200px'}); 49 | }); 50 | at(4 * 1000, function() { 51 | assert_styles("#target",{'height':'200px'}); 52 | }); 53 | at(4.25 * 1000, function() { 54 | assert_styles("#target",{'height':'200px'}); 55 | }); 56 | at(4.5 * 1000, function() { 57 | assert_styles("#target",{'height':'225px'}); 58 | }); 59 | at(4.75 * 1000, function() { 60 | assert_styles("#target",{'height':'225px'}); 61 | }); 62 | at(5 * 1000, function() { 63 | assert_styles("#target",{'height':'250px'}); 64 | }); 65 | }, "Auto generated tests"); 66 | -------------------------------------------------------------------------------- /test/testcases/auto-test-keyframe-easing.html: -------------------------------------------------------------------------------- 1 | 30 | 31 |
32 |
33 |
34 |
35 | 36 | 65 | -------------------------------------------------------------------------------- /test/testcases/auto-test-length-units.html: -------------------------------------------------------------------------------- 1 | 16 | 17 | 18 | 44 | 45 | Each cell in the table will start at the first value for the column (e.g. 5em, 46 | 5ex, 50px, etc.), then animate to the second value for the column (e.g. 1em, 47 | 1ex, etc.), then animate to the 'to' value for the row. 48 | 49 |
50 | 51 | 63 | 64 | 97 | 104 | -------------------------------------------------------------------------------- /test/testcases/auto-test-matrix-transforms-checks.js: -------------------------------------------------------------------------------- 1 | timing_test(function() { 2 | at(0 * 1000, function() { 3 | assert_styles(".anim", [ 4 | {'transform':'none'}, 5 | {'transform':'matrix(0.5, 0, 0, 0.5, 0, 0)'}, 6 | {'transform':'matrix(0.7071, 0.7071, -0.7071, 0.7071, 0, 0)'}, 7 | {'transform':'matrix(0.7071, 0.7071, -0.7071, 0.7071, 70.7107, 70.7107)'}, 8 | {'transform':'matrix(1.4142, 1.4142, -1.4142, 1.4142, 141.4214, 141.4214)'}, 9 | ]); 10 | }); 11 | at(0.4 * 1000, function() { 12 | assert_styles(".anim", [ 13 | {'transform':'matrix(1, 0, 0, 1, 20, 0)'}, 14 | {'transform':'matrix(0.6, 0, 0, 0.6, 20, 0)'}, 15 | {'transform':'matrix(0.809, 0.5878, -0.5878, 0.809, 20, 0)'}, 16 | {'transform':'matrix(0.7071, 0.7071, -0.7071, 0.7071, 76.5685, 56.5685)'}, 17 | {'transform':'matrix(1.3023, 1.0927, -1.0927, 1.3023, 133.1371, 113.1371)'}, 18 | ]); 19 | }); 20 | at(0.8 * 1000, function() { 21 | assert_styles(".anim", [ 22 | {'transform':'matrix(1, 0, 0, 1, 40, 0)'}, 23 | {'transform':'matrix(0.7, 0, 0, 0.7, 40, 0)'}, 24 | {'transform':'matrix(0.891, 0.454, -0.454, 0.891, 40, 0)'}, 25 | {'transform':'matrix(0.7071, 0.7071, -0.7071, 0.7071, 82.4264, 42.4264)'}, 26 | {'transform':'matrix(1.1468, 0.803, -0.803, 1.1468, 124.8528, 84.8528)'}, 27 | ]); 28 | }); 29 | at(1.2000000000000002 * 1000, function() { 30 | assert_styles(".anim", [ 31 | {'transform':'matrix(1, 0, 0, 1, 60, 0)'}, 32 | {'transform':'matrix(0.8, 0, 0, 0.8, 60, 0)'}, 33 | {'transform':'matrix(0.9511, 0.309, -0.309, 0.9511, 60, 0)'}, 34 | {'transform':'matrix(0.7071, 0.7071, -0.7071, 0.7071, 88.2843, 28.2843)'}, 35 | {'transform':'matrix(0.9526, 0.55, -0.55, 0.9526, 116.5685, 56.5685)'}, 36 | ]); 37 | }); 38 | at(1.6 * 1000, function() { 39 | assert_styles(".anim", [ 40 | {'transform':'matrix(1, 0, 0, 1, 80, 0)'}, 41 | {'transform':'matrix(0.9, 0, 0, 0.9, 80, 0)'}, 42 | {'transform':'matrix(0.9877, 0.1564, -0.1564, 0.9877, 80, 0)'}, 43 | {'transform':'matrix(0.7071, 0.7071, -0.7071, 0.7071, 94.1421, 14.1421)'}, 44 | {'transform':'matrix(0.725, 0.3381, -0.3381, 0.725, 108.2843, 28.2843)'}, 45 | ]); 46 | }); 47 | at(2 * 1000, function() { 48 | assert_styles(".anim", [ 49 | {'transform':'matrix(1, 0, 0, 1, 100, 0)'}, 50 | {'transform':'matrix(1, 0, 0, 1, 100, 0)'}, 51 | {'transform':'matrix(1, 0, 0, 1, 100, 0)'}, 52 | {'transform':'matrix(0.7071067811865476, 0.7071067811865475, -0.7071067811865475, 0.7071067811865476, 100, 0)'}, 53 | {'transform':'matrix(0.4698463103929542, 0.17101007166283436, -0.17101007166283436, 0.4698463103929542, 100, 0)'}, 54 | ]); 55 | }); 56 | }, "Auto generated tests"); 57 | -------------------------------------------------------------------------------- /test/testcases/auto-test-matrix-transforms.html: -------------------------------------------------------------------------------- 1 | 16 | 17 | 18 | 55 |
56 |
57 |
58 |
59 |
60 |
61 | 62 | 71 | 72 | 91 | -------------------------------------------------------------------------------- /test/testcases/auto-test-non-numeric-checks.js: -------------------------------------------------------------------------------- 1 | timing_test(function() { 2 | at(0 * 1000, function() { 3 | assert_styles('#test', {'display':'none'}); 4 | }, "Autogenerated"); 5 | at(0.08 * 1000, function() { 6 | assert_styles('#test', {'display':'block'}); 7 | }, "Autogenerated"); 8 | at(0.16 * 1000, function() { 9 | assert_styles('#test', {'display':'none'}); 10 | }, "Autogenerated"); 11 | at(0.24 * 1000, function() { 12 | assert_styles('#test', {'display':'block'}); 13 | }, "Autogenerated"); 14 | at(0.32 * 1000, function() { 15 | assert_styles('#test', {'display':'none'}); 16 | }, "Autogenerated"); 17 | at(0.4 * 1000, function() { 18 | assert_styles('#test', {'display':'block'}); 19 | }, "Autogenerated"); 20 | at(0.48000000000000004 * 1000, function() { 21 | assert_styles('#test', {'display':'none'}); 22 | }, "Autogenerated"); 23 | at(0.56 * 1000, function() { 24 | assert_styles('#test', {'display':'none'}); 25 | }, "Autogenerated"); 26 | }, "Autogenerated checks."); 27 | -------------------------------------------------------------------------------- /test/testcases/auto-test-non-numeric.html: -------------------------------------------------------------------------------- 1 | 16 | 17 | 18 | 26 | 27 |
28 |
29 |
30 | 31 | 43 | -------------------------------------------------------------------------------- /test/testcases/auto-test-parent-checks.js: -------------------------------------------------------------------------------- 1 | timing_test(function() { 2 | at(0 * 1000, function() { 3 | assert_styles('.anim', {'left':'100px'}); 4 | }, "Autogenerated"); 5 | at(0.5 * 1000, function() { 6 | assert_styles('.anim', {'left':'150px'}); 7 | }, "Autogenerated"); 8 | at(1 * 1000, function() { 9 | assert_styles( 10 | '.anim', 11 | [{'left':'200px'}, 12 | {'left':'100px'}]); 13 | }, "Autogenerated"); 14 | at(1.5 * 1000, function() { 15 | assert_styles( 16 | '.anim', 17 | [{'left':'200px'}, 18 | {'left':'150px'}]); 19 | }, "Autogenerated"); 20 | at(2 * 1000, function() { 21 | assert_styles( 22 | '.anim', 23 | [{'left':'200px'}, 24 | {'left':'100px'}]); 25 | }, "Autogenerated"); 26 | at(2.5 * 1000, function() { 27 | assert_styles( 28 | '.anim', 29 | [{'left':'200px'}, 30 | {'left':'150px'}]); 31 | }, "Autogenerated"); 32 | at(3 * 1000, function() { 33 | assert_styles('.anim', {'left':'200px'}); 34 | }, "Autogenerated"); 35 | at(3.5 * 1000, function() { 36 | assert_styles('.anim', {'left':'200px'}); 37 | }, "Autogenerated"); 38 | }, "Autogenerated checks."); 39 | -------------------------------------------------------------------------------- /test/testcases/auto-test-parent.html: -------------------------------------------------------------------------------- 1 | 16 | 17 | 18 | 31 | 32 |
Right edge of each box should align with black line at end of test.
33 |
34 |
35 | 36 | 37 | 53 | -------------------------------------------------------------------------------- /test/testcases/auto-test-partial-keyframes-checks.js: -------------------------------------------------------------------------------- 1 | timing_test(function() { 2 | at(0 * 1000, function() { 3 | assert_styles( 4 | '.anim', 5 | [{'x':'100px','y':'300px','width':'100px'}]); 6 | }, "Autogenerated"); 7 | at(0.3 * 1000, function() { 8 | assert_styles( 9 | '.anim', 10 | [{'x':'190px','y':'270px','width':'52px'}]); 11 | }, "Autogenerated"); 12 | at(0.6 * 1000, function() { 13 | assert_styles( 14 | '.anim', 15 | [{'x':'280px','y':'240px','width':'26px'}]); 16 | }, "Autogenerated"); 17 | at(0.8999999999999999 * 1000, function() { 18 | assert_styles( 19 | '.anim', 20 | [{'x':'369.99999999999994px','y':'210px','width':'44px'}]); 21 | }, "Autogenerated"); 22 | at(1.2 * 1000, function() { 23 | assert_styles( 24 | '.anim', 25 | [{'x':'400px','y':'200px','width':'50px'}]); 26 | }, "Autogenerated"); 27 | }, "Autogenerated checks."); 28 | -------------------------------------------------------------------------------- /test/testcases/auto-test-partial-keyframes.html: -------------------------------------------------------------------------------- 1 | 16 | 17 | 18 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 44 | -------------------------------------------------------------------------------- /test/testcases/auto-test-path-checks.js: -------------------------------------------------------------------------------- 1 | timing_test(function() { 2 | at(0, function() { 3 | assert_styles(".target",{'d':'M10,10v100l100,-50z'}); 4 | }); 5 | at(200, function() { 6 | assert_styles(".target",{'d':'M48,10L48,94.72L52.72,110L112.2,87.89L148,57.64L125.9,38.94L48,10'}); 7 | }); 8 | at(400, function() { 9 | assert_styles(".target",{'d':'M86,10L86,98.54L95.44,110L159.2,93.42L186,55.28L169.4,31.71L86,10'}); 10 | }); 11 | at(600, function() { 12 | assert_styles(".target",{'d':'M124,10L124,102.4L138.2,110L206.1,98.94L224,52.92L212.9,24.47L124,10'}); 13 | }); 14 | at(800, function() { 15 | assert_styles(".target",{'d':'M162,10L162,106.2L180.9,110L253.1,104.5L262,50.56L256.5,17.24L162,10'}); 16 | }); 17 | at(1000, function() { 18 | assert_styles(".target",{'d':'M10,10v100l100,-50z'}); 19 | }); 20 | }, "Auto generated tests"); 21 | -------------------------------------------------------------------------------- /test/testcases/auto-test-path.html: -------------------------------------------------------------------------------- 1 | 16 | 17 | 18 | 19 | 20 | 21 | 42 | -------------------------------------------------------------------------------- /test/testcases/auto-test-pause-checks.js: -------------------------------------------------------------------------------- 1 | timing_test(function() { 2 | at(0 * 1000, function() { 3 | assert_styles( 4 | '.anim', 5 | [{'left':'100px'}, 6 | {'left':'100px'}, 7 | {'left':'0px'}, 8 | {'left':'0px'}]); 9 | }, "Autogenerated"); 10 | 11 | //pause 12 | at(1 * 1000, function() { 13 | assert_styles( 14 | '.anim', 15 | [{'left':'138.46153259277344px'}, 16 | {'left':'140px'}, 17 | {'left':'0px'}, 18 | {'left':'0px'}]); 19 | }, "Autogenerated"); 20 | at(2 * 1000, function() { 21 | assert_styles( 22 | '.anim', 23 | [{'left':'138.46153259277344px'}, 24 | {'left':'140px'}, 25 | {'left':'0px'}, 26 | {'left':'0px'}]); 27 | }, "Autogenerated"); 28 | //unpause 29 | at(3 * 1000, function() { 30 | assert_styles( 31 | '.anim', 32 | [{'left':'176.92308044433594px'}, 33 | {'left':'180px'}, 34 | {'left':'0px'}, 35 | {'left':'0px'}]); 36 | }, "Autogenerated"); 37 | //pause 38 | at(4 * 1000, function() { 39 | assert_styles( 40 | '.anim', 41 | [{'left':'200px'}, 42 | {'left':'200px'}, 43 | {'left':'116px'}, 44 | {'left':'117.39130401611328px'}]); 45 | }, "Autogenerated"); 46 | at(5 * 1000, function() { 47 | assert_styles( 48 | '.anim', 49 | [{'left':'200px'}, 50 | {'left':'200px'}, 51 | {'left':'116px'}, 52 | {'left':'117.39130401611328px'}]); 53 | }, "Autogenerated"); 54 | //unpause 55 | at(6 * 1000, function() { 56 | assert_styles( 57 | '.anim', 58 | [{'left':'200px'}, 59 | {'left':'200px'}, 60 | {'left':'156px'}, 61 | {'left':'160.86956787109375px'}]); 62 | }, "Autogenerated"); 63 | at(7 * 1000, function() { 64 | assert_styles( 65 | '.anim', 66 | [{'left':'200px'}, 67 | {'left':'200px'}, 68 | {'left':'196px'}, 69 | {'left':'200px'}]); 70 | }, "Autogenerated"); 71 | at(7.1 * 1000, function() { 72 | assert_styles( 73 | '.anim', 74 | [{'left':'200px'}, 75 | {'left':'200px'}, 76 | {'left':'200px'}, 77 | {'left':'200px'}]); 78 | }, "Autogenerated"); 79 | }, "Autogenerated checks."); 80 | -------------------------------------------------------------------------------- /test/testcases/auto-test-pause.html: -------------------------------------------------------------------------------- 1 | 16 | 17 | 18 | 52 | 53 |
54 | 55 |
56 |
57 |
58 |
59 | 60 |
61 | 62 | 63 | 83 | -------------------------------------------------------------------------------- /test/testcases/auto-test-perspective-checks.js: -------------------------------------------------------------------------------- 1 | timing_test(function() { 2 | at(0 * 1000, function() { 3 | assert_styles(".test",{'perspective':'500px'}); 4 | }); 5 | at(0.5 * 1000, function() { 6 | assert_styles(".test", [ 7 | {'perspective':'412.5px'}, 8 | {'perspective':'625px'}, 9 | {'perspective':'500px'}, 10 | {'perspective':'376px'}, 11 | ]); 12 | }); 13 | at(1 * 1000, function() { 14 | assert_styles(".test", [ 15 | {'perspective':'325px'}, 16 | {'perspective':'750px'}, 17 | {'perspective':'none'}, 18 | {'perspective':'252px'}, 19 | ]); 20 | }); 21 | at(1.5 * 1000, function() { 22 | assert_styles(".test", [ 23 | {'perspective':'237.5px'}, 24 | {'perspective':'875px'}, 25 | {'perspective':'none'}, 26 | {'perspective':'128px'}, 27 | ]); 28 | }); 29 | at(2 * 1000, function() { 30 | assert_styles(".test", [ 31 | {'perspective':'150px'}, 32 | {'perspective':'1000px'}, 33 | {'perspective':'none'}, 34 | {'perspective':'4px'}, 35 | ]); 36 | }); 37 | }, "Auto generated tests"); 38 | -------------------------------------------------------------------------------- /test/testcases/auto-test-perspective-origin-checks.js: -------------------------------------------------------------------------------- 1 | timing_test(function() { 2 | at(0 * 1000, function() { 3 | assert_styles(".test",{'perspectiveOrigin':'50px 50px'}); 4 | }); 5 | at(0.5 * 1000, function() { 6 | assert_styles(".test", [ 7 | {'perspectiveOrigin':'37.5px 37.5px'}, 8 | {'perspectiveOrigin':'37.5px 50px'}, 9 | {'perspectiveOrigin':'62.5px 50px'}, 10 | {'perspectiveOrigin':'50px 37.5px'}, 11 | {'perspectiveOrigin':'50px 62.5px'}, 12 | {'perspectiveOrigin':'50px 50px'}, 13 | {'perspectiveOrigin':'37.5px 37.5px'}, 14 | {'perspectiveOrigin':'57.5px 57.5px'}, 15 | {'perspectiveOrigin':'42.5px 52.5px'}, 16 | {'perspectiveOrigin':'37.5px 62.5px'}, 17 | ]); 18 | }); 19 | at(1 * 1000, function() { 20 | assert_styles(".test", [ 21 | {'perspectiveOrigin':'25px 25px'}, 22 | {'perspectiveOrigin':'25px 50px'}, 23 | {'perspectiveOrigin':'75px 50px'}, 24 | {'perspectiveOrigin':'50px 25px'}, 25 | {'perspectiveOrigin':'50px 75px'}, 26 | {'perspectiveOrigin':'50px 50px'}, 27 | {'perspectiveOrigin':'25px 25px'}, 28 | {'perspectiveOrigin':'65px 65px'}, 29 | {'perspectiveOrigin':'35px 55px'}, 30 | {'perspectiveOrigin':'25px 75px'}, 31 | ]); 32 | }); 33 | at(1.5 * 1000, function() { 34 | assert_styles(".test", [ 35 | {'perspectiveOrigin':'12.5px 12.5px'}, 36 | {'perspectiveOrigin':'12.5px 50px'}, 37 | {'perspectiveOrigin':'87.5px 50px'}, 38 | {'perspectiveOrigin':'50px 12.5px'}, 39 | {'perspectiveOrigin':'50px 87.5px'}, 40 | {'perspectiveOrigin':'50px 50px'}, 41 | {'perspectiveOrigin':'12.5px 12.5px'}, 42 | {'perspectiveOrigin':'72.5px 72.5px'}, 43 | {'perspectiveOrigin':'27.5px 57.5px'}, 44 | {'perspectiveOrigin':'12.5px 87.5px'}, 45 | ]); 46 | }); 47 | at(2 * 1000, function() { 48 | assert_styles(".test", [ 49 | {'perspectiveOrigin':'0px 0px'}, 50 | {'perspectiveOrigin':'0px 50px'}, 51 | {'perspectiveOrigin':'100px 50px'}, 52 | {'perspectiveOrigin':'50px 0px'}, 53 | {'perspectiveOrigin':'50px 100px'}, 54 | {'perspectiveOrigin':'50px 50px'}, 55 | {'perspectiveOrigin':'0px 0px'}, 56 | {'perspectiveOrigin':'80px 80px'}, 57 | {'perspectiveOrigin':'20px 60px'}, 58 | {'perspectiveOrigin':'0px 100px'}, 59 | ]); 60 | }); 61 | }, "Auto generated tests"); 62 | -------------------------------------------------------------------------------- /test/testcases/auto-test-perspective-origin.html: -------------------------------------------------------------------------------- 1 | 16 | 17 | 18 | 46 | 47 |
48 |
49 |
50 | 51 | 60 | 61 | 95 | -------------------------------------------------------------------------------- /test/testcases/auto-test-perspective.html: -------------------------------------------------------------------------------- 1 | 16 | 17 | 18 | 46 | 47 |
48 |
49 |
50 | 51 | 52 | 80 | -------------------------------------------------------------------------------- /test/testcases/auto-test-position-list-type-checks.js: -------------------------------------------------------------------------------- 1 | timing_test(function() { 2 | at(0 * 1000, function() { 3 | assert_styles(".anim", [ 4 | {'backgroundPosition':'0% 0%'}, 5 | {'backgroundPosition':'0% 0%'}, 6 | {'backgroundPosition':'0% 0%'}, 7 | {'backgroundPosition':'0% 0%'}, 8 | {'backgroundPosition':'0% 0%'}, 9 | {'backgroundPosition':'0% 0%'}, 10 | {'backgroundPosition':'0% 0%'}, 11 | {'backgroundPosition':'0% 0%'}, 12 | {'backgroundPosition':'0% 0%'}, 13 | {'backgroundPosition':'0% 0%'}, 14 | {'backgroundPosition':'0% 0%'}, 15 | {'backgroundPosition':'0% 0%'}, 16 | {'backgroundPosition':'0% 0%'}, 17 | {'backgroundPosition':'0% 0%'}, 18 | {'backgroundPosition':'0% 0%'}, 19 | {'backgroundPosition':'0% 0%'}, 20 | {'backgroundPosition':'0% 0%'}, 21 | {'backgroundPosition':'0% 0%'}, 22 | {'backgroundPosition':'0% 0%'}, 23 | {'backgroundPosition':'0% 0%'}, 24 | {'backgroundPosition':'0% 0%'}, 25 | {'backgroundPosition':'0% 0%'}, 26 | {'backgroundPosition':'0% 0%'}, 27 | {'backgroundPosition':'0% 0%'}, 28 | {'backgroundPosition':'0% 0%'}, 29 | {'backgroundPosition':'0% 0%'}, 30 | {'backgroundPosition':'0% 0%'}, 31 | {'backgroundPosition':'0% 0%'}, 32 | {'backgroundPosition':'0% 0%'}, 33 | {'backgroundPosition':'0% 0%'}, 34 | {'backgroundPosition':'0% 0%'}, 35 | ]); 36 | }); 37 | // TODO: Generate more inbetween values to compare against. 38 | at(2 * 1000, function() { 39 | assert_styles(".anim", [ 40 | {'backgroundPosition':'0% 50%'}, 41 | {'backgroundPosition':'50% 50%'}, 42 | {'backgroundPosition':'100% 50%'}, 43 | {'backgroundPosition':'50% 0%'}, 44 | {'backgroundPosition':'50% 100%'}, 45 | {'backgroundPosition':'10px 50%'}, 46 | {'backgroundPosition':'20% 50%'}, 47 | {'backgroundPosition':'0% 50%'}, 48 | {'backgroundPosition':'50% 50%'}, 49 | {'backgroundPosition':'100% 100%'}, 50 | {'backgroundPosition':'100% 25%'}, 51 | {'backgroundPosition':'10px 100%'}, 52 | {'backgroundPosition':'10px 40px'}, 53 | {'backgroundPosition':'0% calc(-10px + 100%)'}, 54 | {'backgroundPosition':'50% 20%'}, 55 | {'backgroundPosition':'100% 10px'}, 56 | {'backgroundPosition':'100% 20%'}, 57 | {'backgroundPosition':'20% 100%'}, 58 | {'backgroundPosition':'10px 100%'}, 59 | {'backgroundPosition':'40px calc(-10px + 100%)'}, 60 | {'backgroundPosition':'20% 20%'}, 61 | {'backgroundPosition':'calc(25% - 5px) 50%'}, 62 | {'backgroundPosition':'calc(25% - 5px) 25%'}, 63 | {'backgroundPosition':'50% calc(25% - 5px)'}, 64 | {'backgroundPosition':'10px 10%'}, 65 | {'backgroundPosition':'100% calc(75% + 5px)'}, 66 | {'backgroundPosition':'10px calc(100% - 10px)'}, 67 | {'backgroundPosition':'25% 25%'}, 68 | {'backgroundPosition':'calc(25% - 5px) 10px'}, 69 | {'backgroundPosition':'calc(75% + 5px) 10px'}, 70 | {'backgroundPosition':'10px calc(75% + 5px)'}, 71 | ]); 72 | }); 73 | }, "Auto generated tests"); 74 | -------------------------------------------------------------------------------- /test/testcases/auto-test-rectangle-checks.js: -------------------------------------------------------------------------------- 1 | timing_test(function() { 2 | at(0 * 1000, function() { 3 | assert_styles('#test', {'clip':'rect(300px 400px 300px 400px)'}); 4 | }, "Autogenerated"); 5 | at(0.2 * 1000, function() { 6 | assert_styles('#test', {'clip':'rect(240px 480px 360px 320px)'}); 7 | }, "Autogenerated"); 8 | at(0.4 * 1000, function() { 9 | assert_styles('#test', {'clip':'rect(180px 560px 420px 240px)'}); 10 | }, "Autogenerated"); 11 | at(0.6000000000000001 * 1000, function() { 12 | assert_styles('#test', {'clip':'rect(120px 640px 480px 160px)'}); 13 | }, "Autogenerated"); 14 | at(0.8 * 1000, function() { 15 | assert_styles('#test', {'clip':'rect(60px 720px 540px 80px)'}); 16 | }, "Autogenerated"); 17 | at(1 * 1000, function() { 18 | assert_styles('#test', {'clip':'rect(0px 800px 600px 0px)'}); 19 | }, "Autogenerated"); 20 | at(1.2 * 1000, function() { 21 | assert_styles('#test', {'clip':'rect(0px 800px 600px 0px)'}); 22 | }, "Autogenerated"); 23 | }, "Autogenerated checks."); 24 | -------------------------------------------------------------------------------- /test/testcases/auto-test-rectangle.html: -------------------------------------------------------------------------------- 1 | 16 | 17 | 18 | 19 | 33 |
34 |
35 |
36 | 37 | 46 | 47 | 58 | -------------------------------------------------------------------------------- /test/testcases/auto-test-reparent.html: -------------------------------------------------------------------------------- 1 | 16 | 17 | 18 | 32 | 33 |
Right edge of each box should align with black line at end of test.
34 | 35 |
36 |
37 |
38 | 39 | 40 | 61 | -------------------------------------------------------------------------------- /test/testcases/auto-test-seq-speed-checks.js: -------------------------------------------------------------------------------- 1 | timing_test(function() { 2 | at(0 * 1000, function() { 3 | assert_styles( 4 | '.anim', 5 | [{'left':'100px'}, 6 | {'left':'100px'}, 7 | {'left':'0px'}, 8 | {'left':'0px'}]); 9 | }, "Autogenerated"); 10 | at(0.5 * 1000, function() { 11 | assert_styles( 12 | '.anim', 13 | [{'left':'150px'}, 14 | {'left':'125px'}, 15 | {'left':'0px'}, 16 | {'left':'0px'}]); 17 | }, "Autogenerated"); 18 | at(1.0 * 1000, function() { 19 | assert_styles( 20 | '.anim', 21 | [{'left':'200px'}, 22 | {'left':'150px'}, 23 | {'left':'0px'}, 24 | {'left':'0px'}]); 25 | }, "Autogenerated"); 26 | at(1.5 * 1000, function() { 27 | assert_styles( 28 | '.anim', 29 | [{'left':'200px'}, 30 | {'left':'175px'}, 31 | {'left':'0px'}, 32 | {'left':'0px'}]); 33 | }, "Autogenerated"); 34 | at(2.0 * 1000, function() { 35 | assert_styles( 36 | '.anim', 37 | [{'left':'200px'}, 38 | {'left':'200px'}, 39 | {'left':'100px'}, 40 | {'left':'100px'}]); 41 | }, "Autogenerated"); 42 | at(2.5 * 1000, function() { 43 | assert_styles( 44 | '.anim', 45 | [{'left':'200px'}, 46 | {'left':'200px'}, 47 | {'left':'150px'}, 48 | {'left':'125px'}]); 49 | }, "Autogenerated"); 50 | at(3.0 * 1000, function() { 51 | assert_styles( 52 | '.anim', 53 | [{'left':'200px'}, 54 | {'left':'200px'}, 55 | {'left':'200px'}, 56 | {'left':'150px'}]); 57 | }, "Autogenerated"); 58 | at(3.5 * 1000, function() { 59 | assert_styles( 60 | '.anim', 61 | [{'left':'200px'}, 62 | {'left':'200px'}, 63 | {'left':'200px'}, 64 | {'left':'175px'}]); 65 | }, "Autogenerated"); 66 | at(4.0 * 1000, function() { 67 | assert_styles('.anim', {'left':'200px'}); 68 | }, "Autogenerated"); 69 | }, "Autogenerated checks."); 70 | -------------------------------------------------------------------------------- /test/testcases/auto-test-seq-speed.html: -------------------------------------------------------------------------------- 1 | 16 | 17 | 18 | 52 | 53 |
54 | 55 |
56 |
57 |
58 |
59 | 60 |
61 |
62 |
63 |
64 | 65 |
66 | 67 | 68 | 87 | -------------------------------------------------------------------------------- /test/testcases/auto-test-start-time-checks.js: -------------------------------------------------------------------------------- 1 | timing_test(function() { 2 | at(0 * 1000, function() { 3 | assert_styles( 4 | '.anim', 5 | [{'left':'100px'}, 6 | {'left':'100px'}, 7 | {'left':'300px'}, 8 | {'left':'300px'}]); 9 | }, "Autogenerated"); 10 | at(0.4 * 1000, function() { 11 | assert_styles( 12 | '.anim', 13 | [{'left':'180px'}, 14 | {'left':'180px'}, 15 | {'left':'220px'}, 16 | {'left':'220px'}]); 17 | }, "Autogenerated"); 18 | at(0.8 * 1000, function() { 19 | assert_styles( 20 | '.anim', 21 | [{'left':'260px'}, 22 | {'left':'260px'}, 23 | {'left':'140px'}, 24 | {'left':'140px'}]); 25 | }, "Autogenerated"); 26 | at(1.2000000000000002 * 1000, function() { 27 | assert_styles( 28 | '.anim', 29 | [{'left':'140px'}, 30 | {'left':'140px'}, 31 | {'left':'260px'}, 32 | {'left':'260px'}]); 33 | }, "Autogenerated"); 34 | at(1.6 * 1000, function() { 35 | assert_styles( 36 | '.anim', 37 | [{'left':'220px'}, 38 | {'left':'220px'}, 39 | {'left':'180px'}, 40 | {'left':'180px'}]); 41 | }, "Autogenerated"); 42 | at(2 * 1000, function() { 43 | assert_styles( 44 | '.anim', 45 | [{'left':'300px'}, 46 | {'left':'300px'}, 47 | {'left':'100px'}, 48 | {'left':'100px'}]); 49 | }, "Autogenerated"); 50 | at(2.4 * 1000, function() { 51 | assert_styles( 52 | '.anim', 53 | [{'left':'300px'}, 54 | {'left':'300px'}, 55 | {'left':'100px'}, 56 | {'left':'100px'}]); 57 | }, "Autogenerated"); 58 | }, "Autogenerated checks."); 59 | -------------------------------------------------------------------------------- /test/testcases/auto-test-start-time.html: -------------------------------------------------------------------------------- 1 | 16 | 17 | 18 | 48 | 49 |
Right edge of each box should align with black line at end of test.
50 | 51 |
52 |
53 |
54 |
55 |
56 |
57 | 58 |
59 |
60 |
61 |
62 |
63 |
64 | 65 |
66 | 67 | 68 | 91 | -------------------------------------------------------------------------------- /test/testcases/auto-test-svg-anim-checks.js: -------------------------------------------------------------------------------- 1 | timing_test(function() { 2 | at(0 * 1000, function() { 3 | assert_styles('.anim', {'x':'100px', 'height':'10px'}); 4 | }, "Autogenerated"); 5 | at(0.2 * 1000, function() { 6 | assert_styles('.anim', {'x':'160px', 'height':'16px'}); 7 | }, "Autogenerated"); 8 | at(0.4 * 1000, function() { 9 | assert_styles('.anim', {'x':'220px', 'height':'22px'}); 10 | }, "Autogenerated"); 11 | at(0.6000000000000001 * 1000, function() { 12 | assert_styles('.anim', {'x':'280px', 'height':'28px'}); 13 | }, "Autogenerated"); 14 | at(0.8 * 1000, function() { 15 | assert_styles('.anim', {'x':'340px', 'height':'34px'}); 16 | }, "Autogenerated"); 17 | at(1 * 1000, function() { 18 | assert_styles('.anim', {'x':'400px', 'height':'40px'}); 19 | }, "Autogenerated"); 20 | at(1.2 * 1000, function() { 21 | assert_styles('.anim', {'x':'400px', 'height':'40px'}); 22 | }, "Autogenerated"); 23 | }, "Autogenerated checks."); 24 | -------------------------------------------------------------------------------- /test/testcases/auto-test-svg-anim.html: -------------------------------------------------------------------------------- 1 | 16 | 17 | 18 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 40 | -------------------------------------------------------------------------------- /test/testcases/auto-test-svg-circle-checks.js: -------------------------------------------------------------------------------- 1 | timing_test(function() { 2 | at(0 * 1000, function() { 3 | assert_styles('.anim', {'cx':'60px', 'cy':'60px', 'r':'50px'}); 4 | }, "Autogenerated"); 5 | at(0.2 * 1000, function() { 6 | assert_styles('.anim', {'cx':'128px', 'cy':'65px', 'r':'55px'}); 7 | }, "Autogenerated"); 8 | at(0.4 * 1000, function() { 9 | assert_styles('.anim', {'cx':'196px', 'cy':'70px', 'r':'60px'}); 10 | }, "Autogenerated"); 11 | at(0.6000000000000001 * 1000, function() { 12 | assert_styles('.anim', {'cx':'264px', 'cy':'75px', 'r':'65px'}); 13 | }, "Autogenerated"); 14 | at(0.8 * 1000, function() { 15 | assert_styles('.anim', {'cx':'332px', 'cy':'80px', 'r':'70px'}); 16 | }, "Autogenerated"); 17 | at(1 * 1000, function() { 18 | assert_styles('.anim', {'cx':'400px', 'cy':'85px', 'r':'75px'}); 19 | }, "Autogenerated"); 20 | at(1.2 * 1000, function() { 21 | assert_styles('.anim', {'cx':'400px', 'cy':'85px', 'r':'75px'}); 22 | }, "Autogenerated"); 23 | }, "Autogenerated checks."); 24 | -------------------------------------------------------------------------------- /test/testcases/auto-test-svg-circle.html: -------------------------------------------------------------------------------- 1 | 16 | 17 | 18 | 27 | 28 | 29 | 30 | 31 | 32 | 39 | -------------------------------------------------------------------------------- /test/testcases/auto-test-svg-color-checks.js: -------------------------------------------------------------------------------- 1 | timing_test(function() { 2 | at(0 * 1000, function() { 3 | assert_styles(".anim",{'stroke':'rgba(0, 240, 50, 1)'}); 4 | }); 5 | at(0.2 * 1000, function() { 6 | assert_styles(".anim",{'stroke':'rgba(30, 200, 90, 1)'}); 7 | }); 8 | at(0.4 * 1000, function() { 9 | assert_styles(".anim",{'stroke':'rgba(60, 160, 130, 1)'}); 10 | }); 11 | at(0.6000000000000001 * 1000, function() { 12 | assert_styles(".anim",{'stroke':'rgba(90, 120, 170, 1)'}); 13 | }); 14 | at(0.8 * 1000, function() { 15 | assert_styles(".anim",{'stroke':'rgba(120, 80, 210, 1)'}); 16 | }); 17 | at(1 * 1000, function() { 18 | assert_styles(".anim",{'stroke':'rgba(150, 40, 250, 1)'}); 19 | }); 20 | }, "Auto generated tests"); 21 | -------------------------------------------------------------------------------- /test/testcases/auto-test-svg-color.html: -------------------------------------------------------------------------------- 1 | 16 | 17 | 18 | 27 | 28 | 29 | 30 | 31 | 32 | 37 | -------------------------------------------------------------------------------- /test/testcases/auto-test-text-shadow-checks.js: -------------------------------------------------------------------------------- 1 | timing_test(function() { 2 | at(0 * 1000, function() { 3 | assert_styles('body', {'textShadow':'rgb(255, 0, 0) 100px 100px 0px, rgb(255, 0, 0) 0px 100px 20px'}); 4 | }, "Autogenerated"); 5 | at(0.5 * 1000, function() { 6 | assert_styles('body', {'textShadow':'rgba(255, 0, 0, 0.74902) 75px 75px 0px, rgba(255, 0, 0, 0.74902) 0px 75px 15px'}); 7 | }, "Autogenerated"); 8 | at(1 * 1000, function() { 9 | assert_styles('body', {'textShadow':'rgba(255, 0, 0, 0.498039) 50px 50px 0px, rgba(255, 0, 0, 0.498039) 0px 50px 10px'}); 10 | }, "Autogenerated"); 11 | at(1.5 * 1000, function() { 12 | assert_styles('body', {'textShadow':'rgba(255, 0, 0, 0.247059) 25px 25px 0px, rgba(255, 0, 0, 0.247059) 0px 25px 5px'}); 13 | }, "Autogenerated"); 14 | at(2 * 1000, function() { 15 | assert_styles('body', {'textShadow':'rgb(0, 0, 0) 0px 0px 0px'}); 16 | }, "Autogenerated"); 17 | at(2.5 * 1000, function() { 18 | assert_styles('body', {'textShadow':'rgb(0, 0, 0) 0px 0px 0px'}); 19 | }, "Autogenerated"); 20 | }, "Autogenerated checks."); 21 | -------------------------------------------------------------------------------- /test/testcases/auto-test-text-shadow.html: -------------------------------------------------------------------------------- 1 | 16 | 17 | 18 | The shadows should slide back under the text. 19 | 32 | 33 | 38 | -------------------------------------------------------------------------------- /test/testcases/auto-test-timing-functions-checks.js: -------------------------------------------------------------------------------- 1 | timing_test(function() { 2 | at(0 * 1000, function() { 3 | assert_styles('.anim', {'left':'0px'}); 4 | }, "Autogenerated"); 5 | at(0.4 * 1000, function() { 6 | assert_styles('.anim', {'left':'0px'}); 7 | }, "Autogenerated"); 8 | at(0.8 * 1000, function() { 9 | assert_styles('.anim', {'left':'0px'}); 10 | }, "Autogenerated"); 11 | at(1.2000000000000002 * 1000, function() { 12 | assert_styles( 13 | '.anim', 14 | [{'left':'20px'}, 15 | {'left':'3.41483736038208px'}, 16 | {'left':'32.11287307739258px'}, 17 | {'left':'40.48971939086914px'}, 18 | {'left':'66.66666412353516px'}, 19 | {'left':'0px'}, 20 | {'left':'0px'}, 21 | {'left':'-48.27153778076172px'}, 22 | {'left':'200px'}, 23 | {'left':'0px'}, 24 | {'left':'0px'}]); 25 | }, "Autogenerated"); 26 | at(1.6 * 1000, function() { 27 | assert_styles( 28 | '.anim', 29 | [{'left':'60px'}, 30 | {'left':'25.923603057861328px'}, 31 | {'left':'89.03398132324219px'}, 32 | {'left':'88.9017333984375px'}, 33 | {'left':'66.66666412353516px'}, 34 | {'left':'66.66666412353516px'}, 35 | {'left':'0px'}, 36 | {'left':'-51.93635177612305px'}, 37 | {'left':'200px'}, 38 | {'left':'0px'}, 39 | {'left':'0px'}]); 40 | }, "Autogenerated"); 41 | at(2 * 1000, function() { 42 | assert_styles( 43 | '.anim', 44 | [{'left':'100px'}, 45 | {'left':'63.07688522338867px'}, 46 | {'left':'136.92311096191406px'}, 47 | {'left':'129.63328552246094px'}, 48 | {'left':'133.3333282470703px'}, 49 | {'left':'133.3333282470703px'}, 50 | {'left':'66.66666412353516px'}, 51 | {'left':'100px'}, 52 | {'left':'200px'}, 53 | {'left':'200px'}, 54 | {'left':'0px'}]); 55 | }, "Autogenerated"); 56 | at(2.4 * 1000, function() { 57 | assert_styles( 58 | '.anim', 59 | [{'left':'140px'}, 60 | {'left':'110.96601867675781px'}, 61 | {'left':'174.07640075683594px'}, 62 | {'left':'165.04061889648438px'}, 63 | {'left':'200px'}, 64 | {'left':'133.3333282470703px'}, 65 | {'left':'133.3333282470703px'}, 66 | {'left':'251.9363555908203px'}, 67 | {'left':'200px'}, 68 | {'left':'200px'}, 69 | {'left':'0px'}]); 70 | }, "Autogenerated"); 71 | at(2.8 * 1000, function() { 72 | assert_styles( 73 | '.anim', 74 | [{'left':'180px'}, 75 | {'left':'167.8871307373047px'}, 76 | {'left':'196.5851593017578px'}, 77 | {'left':'193.0833740234375px'}, 78 | {'left':'200px'}, 79 | {'left':'200px'}, 80 | {'left':'133.3333282470703px'}, 81 | {'left':'248.27154541015625px'}, 82 | {'left':'200px'}, 83 | {'left':'200px'}, 84 | {'left':'0px'}]); 85 | }, "Autogenerated"); 86 | at(3.1999999999999997 * 1000, function() { 87 | assert_styles('.anim', {'left':'200px'}); 88 | }, "Autogenerated"); 89 | }, "Autogenerated checks."); 90 | -------------------------------------------------------------------------------- /test/testcases/auto-test-timing-functions.html: -------------------------------------------------------------------------------- 1 | 16 | 17 | 18 | 37 | 38 |
39 | 40 |
41 |
(default)
42 |
ease-in
43 |
ease-out
44 |
cubic-bezier(0, 0.2, 0.8, 1)
45 |
steps(3, start)
46 |
steps(3, middle)
47 |
steps(3, end)
48 |
cubic-bezier(0.5, -1.5, 0.5, 2.5)
49 |
step-start
50 |
step-middle
51 |
step-end
52 |
53 | 54 |
55 | 56 | 65 | 66 | 78 | -------------------------------------------------------------------------------- /test/testcases/auto-test-to-animation-checks.js: -------------------------------------------------------------------------------- 1 | timing_test(function() { 2 | at(0 * 1000, function() { 3 | assert_styles( 4 | '.anim', 5 | [{'left':'200px'}, 6 | {'left':'100px'}, 7 | {'left':'0px'}, 8 | {'left':'200px'}]); 9 | }, "Autogenerated"); 10 | at(0.4 * 1000, function() { 11 | assert_styles( 12 | '.anim', 13 | [{'left':'180px'}, 14 | {'left':'120px'}, 15 | {'left':'60px'}, 16 | {'left':'240px'}]); 17 | }, "Autogenerated"); 18 | at(0.8 * 1000, function() { 19 | assert_styles( 20 | '.anim', 21 | [{'left':'160px'}, 22 | {'left':'140px'}, 23 | {'left':'120px'}, 24 | {'left':'280px'}]); 25 | }, "Autogenerated"); 26 | at(1.2000000000000002 * 1000, function() { 27 | assert_styles( 28 | '.anim', 29 | [{'left':'140px'}, 30 | {'left':'160px'}, 31 | {'left':'180px'}, 32 | {'left':'320px'}]); 33 | }, "Autogenerated"); 34 | at(1.6 * 1000, function() { 35 | assert_styles( 36 | '.anim', 37 | [{'left':'120px'}, 38 | {'left':'180px'}, 39 | {'left':'240px'}, 40 | {'left':'360px'}]); 41 | }, "Autogenerated"); 42 | at(2 * 1000, function() { 43 | assert_styles( 44 | '.anim', 45 | [{'left':'100px'}, 46 | {'left':'200px'}, 47 | {'left':'300px'}, 48 | {'left':'400px'}]); 49 | }, "Autogenerated"); 50 | at(2.4 * 1000, function() { 51 | assert_styles( 52 | '.anim', 53 | [{'left':'100px'}, 54 | {'left':'200px'}, 55 | {'left':'300px'}, 56 | {'left':'400px'}]); 57 | }, "Autogenerated"); 58 | }, "Autogenerated checks."); 59 | -------------------------------------------------------------------------------- /test/testcases/auto-test-to-animation.html: -------------------------------------------------------------------------------- 1 | 16 | 17 | 18 | 55 | 56 |
57 |
58 |
59 |
60 | 61 |
62 |
63 |
64 |
65 |
66 |
67 | 68 |
69 | 70 | 71 | 84 | -------------------------------------------------------------------------------- /test/testcases/auto-test-transform-origin-checks.js: -------------------------------------------------------------------------------- 1 | timing_test(function() { 2 | at(0 * 1000, function() { 3 | assert_styles(".test",{'webkitTransformOrigin':'50px 50px'}); 4 | }); 5 | at(1 * 1000, function() { 6 | assert_styles(".test", [ 7 | {'webkitTransformOrigin':'50px 50px'}, 8 | {'webkitTransformOrigin':'25px 50px'}, 9 | {'webkitTransformOrigin':'75px 50px'}, 10 | {'webkitTransformOrigin':'50px 25px'}, 11 | {'webkitTransformOrigin':'50px 75px'}, 12 | {'webkitTransformOrigin':'37.5px 50px'}, 13 | {'webkitTransformOrigin':'25px 25px'}, 14 | {'webkitTransformOrigin':'30px 50px'}, 15 | {'webkitTransformOrigin':'30px 50px 50px'}, 16 | {'webkitTransformOrigin':'75px 75px 50px'}, 17 | {'webkitTransformOrigin':'75px 35px'}, 18 | {'webkitTransformOrigin':'75px 35px -100px'}, 19 | ]); 20 | }); 21 | at(2 * 1000, function() { 22 | assert_styles(".test", [ 23 | {'webkitTransformOrigin':'50px 50px'}, 24 | {'webkitTransformOrigin':'0px 50px'}, 25 | {'webkitTransformOrigin':'100px 50px'}, 26 | {'webkitTransformOrigin':'50px 0px'}, 27 | {'webkitTransformOrigin':'50px 100px'}, 28 | {'webkitTransformOrigin':'25px 50px'}, 29 | {'webkitTransformOrigin':'0px 0px'}, 30 | {'webkitTransformOrigin':'10px 50px'}, 31 | {'webkitTransformOrigin':'10px 50px 100px'}, 32 | {'webkitTransformOrigin':'100px 100px 100px'}, 33 | {'webkitTransformOrigin':'100px 20px'}, 34 | {'webkitTransformOrigin':'100px 20px -200px'}, 35 | ]); 36 | }); 37 | }, "Auto generated tests"); 38 | -------------------------------------------------------------------------------- /test/testcases/auto-test-transform-origin.html: -------------------------------------------------------------------------------- 1 | 16 | 17 | 18 | 40 |
41 |
42 |
43 | 44 | 45 | 81 | -------------------------------------------------------------------------------- /test/testcases/auto-test-transform-primitives.html: -------------------------------------------------------------------------------- 1 | 16 | 17 | 18 | 34 |
35 |
36 | 37 | 94 | 98 | -------------------------------------------------------------------------------- /test/testcases/auto-test-transform-units.html: -------------------------------------------------------------------------------- 1 | 16 | 17 | 18 | 34 |
35 | 36 | 45 | 46 | 99 | -------------------------------------------------------------------------------- /test/testcases/auto-test-visibility-checks.js: -------------------------------------------------------------------------------- 1 | timing_test(function() { 2 | at(0 * 1000, function() { 3 | assert_styles( 4 | '.test', 5 | [{'visibility':'visible'}, 6 | {'visibility':'visible'}, 7 | {'visibility':'visible'}, 8 | {'visibility':'hidden'}, 9 | {'visibility':'hidden'}, 10 | {'visibility':'hidden'}, 11 | {'visibility':'collapse'}, 12 | {'visibility':'collapse'}, 13 | {'visibility':'collapse'}]); 14 | }, "Autogenerated"); 15 | at(0.2 * 1000, function() { 16 | assert_styles( 17 | '.test', 18 | [{'visibility':'visible'}, 19 | {'visibility':'visible'}, 20 | {'visibility':'visible'}, 21 | {'visibility':'hidden'}, 22 | {'visibility':'hidden'}, 23 | {'visibility':'hidden'}, 24 | {'visibility':'collapse'}, 25 | {'visibility':'collapse'}, 26 | {'visibility':'collapse'}]); 27 | }, "Autogenerated"); 28 | at(0.4 * 1000, function() { 29 | assert_styles( 30 | '.test', 31 | [{'visibility':'visible'}, 32 | {'visibility':'visible'}, 33 | {'visibility':'visible'}, 34 | {'visibility':'visible'}, 35 | {'visibility':'hidden'}, 36 | {'visibility':'collapse'}, 37 | {'visibility':'visible'}, 38 | {'visibility':'hidden'}, 39 | {'visibility':'collapse'}]); 40 | }, "Autogenerated"); 41 | at(0.6000000000000001 * 1000, function() { 42 | assert_styles( 43 | '.test', 44 | [{'visibility':'visible'}, 45 | {'visibility':'hidden'}, 46 | {'visibility':'collapse'}, 47 | {'visibility':'visible'}, 48 | {'visibility':'hidden'}, 49 | {'visibility':'collapse'}, 50 | {'visibility':'visible'}, 51 | {'visibility':'hidden'}, 52 | {'visibility':'collapse'}]); 53 | }, "Autogenerated"); 54 | }, "Autogenerated checks."); 55 | -------------------------------------------------------------------------------- /test/testcases/auto-test-visibility.html: -------------------------------------------------------------------------------- 1 | 16 | 17 | 18 | 19 | 35 | 61 | 62 | 77 | 81 | -------------------------------------------------------------------------------- /test/testcases/auto-test-wrapping-bug-checks.js: -------------------------------------------------------------------------------- 1 | timing_test(function() { 2 | at(0 * 1000, function() { 3 | assert_styles( 4 | '.anim', 5 | [{'transform':'matrix(1, 0, 0, 1, -800, 0)'}, 6 | {'transform':'matrix(1, 0, 0, 1, -800, 0)'}, 7 | {'transform':'matrix(1, 0, 0, 1, -800, 0)'}, 8 | {'transform':'matrix(1, 0, 0, 1, -800, 0)'}]); 9 | }, "Autogenerated"); 10 | at(0.1 * 1000, function() { 11 | assert_styles( 12 | '.anim', 13 | [{'transform':'matrix(1, 0, 0, 1, -800, 0)'}, 14 | {'transform':'matrix(1, 0, 0, 1, -800, 0)'}, 15 | {'transform':'matrix(1, 0, 0, 1, -800, 0)'}, 16 | {'transform':'matrix(1, 0, 0, 1, -800, 0)'}]); 17 | }, "Autogenerated"); 18 | at(0.2 * 1000, function() { 19 | assert_styles( 20 | '.anim', 21 | [{'transform':'matrix(1, 0, 0, 1, -800, 0)'}, 22 | {'transform':'matrix(1, 0, 0, 1, -800, 0)'}, 23 | {'transform':'matrix(1, 0, 0, 1, -800, 0)'}, 24 | {'transform':'matrix(1, 0, 0, 1, -800, 0)'}]); 25 | }, "Autogenerated"); 26 | at(0.30000000000000004 * 1000, function() { 27 | assert_styles( 28 | '.anim', 29 | [{'transform':'matrix(1, 0, 0, 1, -666.6666870117188, 0)'}, 30 | {'transform':'matrix(1, 0, 0, 1, -533.3333129882813, 0)'}, 31 | {'transform':'matrix(1, 0, 0, 1, -533.3599853515625, 0)'}, 32 | {'transform':'matrix(1, 0, 0, 1, -533.3333129882813, 0)'}]); 33 | }, "Autogenerated"); 34 | at(0.4 * 1000, function() { 35 | assert_styles( 36 | '.anim', 37 | [{'transform':'matrix(1, 0, 0, 1, -400, 0)'}, 38 | {'transform':'matrix(1, 0, 0, 1, -266.6666564941406, 0)'}, 39 | {'transform':'matrix(1, 0, 0, 1, -266.6933288574219, 0)'}, 40 | {'transform':'matrix(1, 0, 0, 1, -266.6666564941406, 0)'}]); 41 | }, "Autogenerated"); 42 | at(0.5 * 1000, function() { 43 | assert_styles( 44 | '.anim', 45 | [{'transform':'matrix(1, 0, 0, 1, -133.3333282470703, 0)'}, 46 | {'transform':'matrix(1, 0, 0, 1, 0, 0)'}, 47 | {'transform':'matrix(1, 0, 0, 1, -0.02666666731238365, 0)'}, 48 | {'transform':'matrix(1, 0, 0, 1, -800, 0)'}]); 49 | }, "Autogenerated"); 50 | at(0.6 * 1000, function() { 51 | assert_styles( 52 | '.anim', 53 | [{'transform':'matrix(1, 0, 0, 1, 0, 0)'}, 54 | {'transform':'matrix(1, 0, 0, 1, 0, 0)'}, 55 | {'transform':'matrix(1, 0, 0, 1, -800, 0)'}, 56 | {'transform':'matrix(1, 0, 0, 1, -800, 0)'}]); 57 | }, "Autogenerated"); 58 | }, "Autogenerated checks."); 59 | -------------------------------------------------------------------------------- /test/testcases/auto-test-wrapping-bug.html: -------------------------------------------------------------------------------- 1 | 16 | 17 | 18 | 27 |
28 |
29 |
30 |
31 | 32 | 59 | 60 | 61 | -------------------------------------------------------------------------------- /test/testcases/background.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/web-animations/web-animations-js-legacy/6a1c45473f9ba2db1ccad34f879bca829f77264d/test/testcases/background.png -------------------------------------------------------------------------------- /test/testcases/disabled-auto-test-change-playback-rate.html: -------------------------------------------------------------------------------- 1 | 16 | 17 | 18 | 26 | 27 | 28 | 29 | 42 | 43 |
44 | 45 | 46 | 47 | 66 | -------------------------------------------------------------------------------- /test/testcases/impl-test-deprecation.html: -------------------------------------------------------------------------------- 1 | 16 | 17 | 18 | 19 | 86 | -------------------------------------------------------------------------------- /test/testcases/impl-test-paced-timing-function.html: -------------------------------------------------------------------------------- 1 | 16 | 17 | 18 | 19 | 20 | 22 | 23 | 24 | 25 | 84 | -------------------------------------------------------------------------------- /test/testcases/impl-test-totimelinetime.html: -------------------------------------------------------------------------------- 1 | 14 | 15 | 16 | 17 | 18 | 37 | 38 | -------------------------------------------------------------------------------- /test/testcases/manual-test-add-player-onend.html: -------------------------------------------------------------------------------- 1 | 16 | 17 | 18 | 19 | 35 | 36 |
37 |
38 | 39 | 40 | 58 | -------------------------------------------------------------------------------- /test/testcases/manual-test-preset-timings.html: -------------------------------------------------------------------------------- 1 | 16 | 17 | 18 | 28 | 29 | 30 | 31 | 72 | -------------------------------------------------------------------------------- /test/testcases/manual-test-step.html: -------------------------------------------------------------------------------- 1 | 16 | 17 | 18 | 28 | 29 | 30 | 31 | 89 | -------------------------------------------------------------------------------- /test/testcases/small.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/web-animations/web-animations-js-legacy/6a1c45473f9ba2db1ccad34f879bca829f77264d/test/testcases/small.mp4 -------------------------------------------------------------------------------- /test/testcases/small.webm: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/web-animations/web-animations-js-legacy/6a1c45473f9ba2db1ccad34f879bca829f77264d/test/testcases/small.webm -------------------------------------------------------------------------------- /test/testcases/test-bounds.html: -------------------------------------------------------------------------------- 1 | 16 | 17 | 18 | 24 | 25 |
26 |
27 | 28 | 29 | 70 | -------------------------------------------------------------------------------- /test/testcases/test-document-timeline.html: -------------------------------------------------------------------------------- 1 | 16 | 17 | 18 |
19 | 20 | 21 | 54 | -------------------------------------------------------------------------------- /test/testcases/test-dynamic-load.html: -------------------------------------------------------------------------------- 1 | 16 | 17 | 18 | 38 | 39 |
Right edge of box should align with black line at end of test.
40 |
41 |
42 | 43 | 44 | 66 | -------------------------------------------------------------------------------- /test/testcases/test-fill-auto.html: -------------------------------------------------------------------------------- 1 | 16 | 17 | 18 | 19 | 79 | -------------------------------------------------------------------------------- /test/testcases/test-null-target.html: -------------------------------------------------------------------------------- 1 | 16 | 17 | 18 | 19 | 30 |
31 | 40 | 41 | 67 | -------------------------------------------------------------------------------- /test/testcases/test-pause-for-testing.html: -------------------------------------------------------------------------------- 1 | 16 | 17 | 18 | 19 | 28 |
29 |
30 | 31 | 53 | -------------------------------------------------------------------------------- /test/testcases/test-player-cleanup.html: -------------------------------------------------------------------------------- 1 | 16 | 17 |
18 | 27 | 28 | 80 | -------------------------------------------------------------------------------- /test/testcases/test-player-sort.html: -------------------------------------------------------------------------------- 1 | 16 | 17 | 18 | 19 | 20 | 49 | -------------------------------------------------------------------------------- /test/testcases/test-pseudo-element-reference.html: -------------------------------------------------------------------------------- 1 | 16 | 17 | 24 |
25 | 26 | 39 | -------------------------------------------------------------------------------- /test/testcases/test-repeated-pause.html: -------------------------------------------------------------------------------- 1 | 16 | 17 | 18 | 24 | 25 |
26 | 27 | 28 | 55 | -------------------------------------------------------------------------------- /test/testcases/test-reversed-player-active-phase.html: -------------------------------------------------------------------------------- 1 | 9 | 10 |
11 | 29 | -------------------------------------------------------------------------------- /test/testcases/test-rotation-not-reversed.html: -------------------------------------------------------------------------------- 1 | 16 | 17 | 18 | 28 | 29 |
Text
30 | 31 | 32 | 56 | -------------------------------------------------------------------------------- /test/testcases/unit-test-delay.html: -------------------------------------------------------------------------------- 1 | 16 | 17 | 18 |
19 | 20 | 21 | 67 | -------------------------------------------------------------------------------- /test/testcases/unit-test-duration.html: -------------------------------------------------------------------------------- 1 | 16 | 17 | 18 |
19 | 20 | 21 | 67 | -------------------------------------------------------------------------------- /test/testcases/unit-test-null-effect.html: -------------------------------------------------------------------------------- 1 | 16 | 17 | 18 | 20 | 21 |
22 | 23 | 24 | 44 | -------------------------------------------------------------------------------- /test/testcases/unit-test-testharness-failure.html: -------------------------------------------------------------------------------- 1 | 16 | 17 | 34 | 35 | 55 | -------------------------------------------------------------------------------- /test/testcases/unit-test-unpause.html: -------------------------------------------------------------------------------- 1 | 16 | 17 | 18 | 24 | 25 |
26 | 27 | 28 | 69 | -------------------------------------------------------------------------------- /test/testharness_timing.css: -------------------------------------------------------------------------------- 1 | html, body { 2 | height: 100%; 3 | padding: 0; 4 | margin: 0; 5 | } 6 | 7 | #timeline { 8 | position: fixed; 9 | height: 35px; 10 | bottom: 2px; 11 | left: 0; 12 | width: calc(100% - 50px); 13 | 14 | padding-left: 25px; 15 | padding-right: 25px; 16 | } 17 | 18 | #timeline div.bar { 19 | position: absolute; 20 | border: 1px solid black; 21 | top: 25px; 22 | height: 10px; 23 | width: calc(100% - 135px); 24 | } 25 | 26 | #timeline button { 27 | float: right; 28 | margin: 1px; 29 | margin-top: 17px; 30 | height: 20px; 31 | width: 20px; 32 | } 33 | 34 | #timeline #control { 35 | width: 30px; 36 | font-size: 6pt; 37 | padding: 0; 38 | } 39 | 40 | #timeline div.progress { 41 | background-color: black; 42 | height: 100%; 43 | } 44 | 45 | img.marker { 46 | position: absolute; 47 | top: -25px; 48 | width: 20px; 49 | height: 30px; 50 | } 51 | 52 | div.info { 53 | border: 1px solid black; 54 | border-radius: 10px; 55 | padding: 5px; 56 | position: absolute; 57 | bottom: 40px; 58 | background: white; 59 | } 60 | 61 | div.info pre { 62 | display: block; 63 | } 64 | 65 | #results tr td:last-child { 66 | white-space: pre; 67 | font-family: monospace; 68 | } 69 | 70 | #debug { 71 | width: 100%; 72 | height: 400px; 73 | overflow-y: scroll; 74 | border: 1px solid black; 75 | } 76 | -------------------------------------------------------------------------------- /test/update-testcases.py: -------------------------------------------------------------------------------- 1 | #!/usr/bin/python 2 | 3 | import cStringIO as StringIO 4 | from fnmatch import fnmatch 5 | import difflib 6 | import os 7 | import sys 8 | 9 | 10 | def get_name(filename): 11 | return os.path.splitext(filename)[0] 12 | 13 | 14 | def list_dir(dir_path, filter_func): 15 | return sorted(filter(filter_func, os.listdir(dir_path)), key=get_name) 16 | 17 | 18 | def main(): 19 | test_dir = os.path.dirname(os.path.realpath(__file__)) 20 | testcase_dir = os.path.join(test_dir, 'testcases') 21 | testcase_file = os.path.join(test_dir, 'testcases.js') 22 | 23 | def is_testcase_file(filename): 24 | return ( 25 | fnmatch(filename, "*.html") and 26 | not fnmatch(filename, "manual-test*") and 27 | not fnmatch(filename, "disabled-*")) 28 | 29 | new_testcases = StringIO.StringIO() 30 | new_testcases.write("""\ 31 | // This file is automatically generated by test/update-testcases.py. 32 | // Disable tests by adding them to test/disabled-testcases 33 | """) 34 | new_testcases.write('var tests = [\n \'') 35 | new_testcases.write( 36 | '\',\n \''.join(list_dir(testcase_dir, is_testcase_file))) 37 | new_testcases.write('\',\n];\n') 38 | new_testcases.seek(0) 39 | new_testcases_lines = new_testcases.readlines() 40 | 41 | current_testcases_lines = file(testcase_file).readlines() 42 | 43 | lines = list(difflib.unified_diff( 44 | current_testcases_lines, new_testcases_lines, 45 | fromfile=testcase_file, tofile=testcase_file)) 46 | 47 | if len(lines) == 0: 48 | sys.stdout.write('Nothing to do\n') 49 | sys.exit(0) 50 | 51 | if not "--dry-run" in sys.argv: 52 | file(testcase_file, "w").write("".join(new_testcases_lines)) 53 | sys.stdout.write( 54 | 'Updating %s with the following diff.\n' % testcase_file) 55 | 56 | for line in lines: 57 | sys.stdout.write(line) 58 | 59 | sys.exit(1) 60 | 61 | 62 | if __name__ == '__main__': 63 | main() 64 | -------------------------------------------------------------------------------- /tools/.keepme: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/web-animations/web-animations-js-legacy/6a1c45473f9ba2db1ccad34f879bca829f77264d/tools/.keepme -------------------------------------------------------------------------------- /tools/android/config.sh: -------------------------------------------------------------------------------- 1 | #! /bin/bash 2 | 3 | OLD_PWD=$PWD 4 | EMULATOR_PIDFILE=$ANDROID_DIR/emulator.pid 5 | CHROMEDRIVER_PIDFILE=$ANDROID_DIR/chromedriver.pid 6 | XVFB_PIDFILE=$ANDROID_DIR/xvfb.pid 7 | 8 | SERVERS="EMULATOR CHROMEDRIVER XVFB" 9 | -------------------------------------------------------------------------------- /tools/android/stop.sh: -------------------------------------------------------------------------------- 1 | #! /bin/bash 2 | 3 | # Stop all the stuff started by setup.sh 4 | set -x 5 | set -e 6 | ANDROID_DIR="$( cd "$( dirname "${BASH_SOURCE[0]}" )" && pwd )" 7 | . $ANDROID_DIR/config.sh 8 | cd $ANDROID_DIR 9 | 10 | for SERVER in $SERVERS; do 11 | PIDFILE_VAR=${SERVER}_PIDFILE 12 | PIDFILE=${!PIDFILE_VAR} 13 | echo "$SERVER $PIDFILE" 14 | if [ -e $PIDFILE ]; then 15 | echo "Stopping $SERVER at $(cat $PIDFILE)" 16 | /sbin/start-stop-daemon --stop --pidfile $PIDFILE --retry TERM/30/KILL/5 || rm $PIDFILE 17 | fi 18 | done 19 | 20 | cd $OLD_PWD 21 | -------------------------------------------------------------------------------- /tools/python/requirements.txt: -------------------------------------------------------------------------------- 1 | testtools>=0.9.30 2 | python-subunit # subunit 3 | selenium 4 | 5 | -e svn+http://closure-linter.googlecode.com/svn/trunk/#egg=closure-linter 6 | 7 | # Requirements for using -x 8 | pyvirtualdisplay 9 | pyscreenshot 10 | --allow-external=PIL 11 | --allow-unverified=PIL 12 | PIL 13 | -------------------------------------------------------------------------------- /tools/python/setup.sh: -------------------------------------------------------------------------------- 1 | #! /bin/bash 2 | 3 | # Create the python environment needed by run-tests.py and closure-linter and 4 | # other Python tools. 5 | 6 | OLD_PWD=$PWD 7 | 8 | DIR="$( cd "$( dirname "${BASH_SOURCE[0]}" )" && pwd )" 9 | 10 | cd $DIR 11 | if [ ! -f bin/activate ]; then 12 | echo "Setting up Python environment in $DIR" 13 | 14 | if [ x$(which pip) == x -o x$(which virtualenv) == x ]; then 15 | cat < /dev/null 2>&1 45 | if [ $? -ne 0 ]; then 46 | # Install dependencies 47 | pip install --upgrade $@ 48 | if [ $? -ne 0 ]; then 49 | cat <=1.5' 58 | ensureRequirementsMet -r requirements.txt 59 | 60 | cd $OLD_PWD 61 | -------------------------------------------------------------------------------- /tutorial/basic-animations/basic-animation-exercise-1.html: -------------------------------------------------------------------------------- 1 | 15 | 16 | 17 | 18 |
19 | 20 |
1
21 | 22 |
Create a new basic animation
23 | 24 |
Exercise 1 - Moving Right
25 | 26 |

Now let's code some animation out! In the 'Try It 27 | Yourself' block, you should see a default div block with class named 'test' 28 | and ID named 'a' coloured in red. If you don't like the colour, you can 29 | always change it around. Click on 'Update' when you have finished typing in 30 | your code.

31 |

Now we want to make the red rounded 32 | rectangle move to 300px from left for 2 seconds. We should do the 33 | following:

34 | 35 | new Animation(document.querySelector("#a"), {left: 36 | "300px"}, 2); 37 | 38 |
Show Solution
39 |
40 | new Animation(document.querySelector("#a"), {left: "300px"}, 2); 41 |
42 | 43 |
44 | 45 |
    46 |
  1. 'new Animation()' creates a new animation object.
    2. 47 |
  2. 48 | 'document.querySelector("#a")' is a DOM method which 49 | gets the element with id equals to 'a' from the HTML file. You 50 | can always use 'document.getElementById("a")' which 51 | would result the same thing. Since we have defined its class 52 | name as well, we can also select it using 53 | 'document.querySelector(".test")'. 54 |
    3. 55 |
  3. '{left: "300px"}' is the effects of the animation. 56 | In this case we are letting it move to 300px from left.
    4. 57 |
  4. '2' will set the duration of the animation to 58 | 2 seconds. The bigger the number, the slower the animation 59 | speed and vice versa.
    5. 60 |
61 | 62 |
-------------------------------------------------------------------------------- /tutorial/iframe-contents.html: -------------------------------------------------------------------------------- 1 | 16 | 17 | 18 | 19 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /tutorial/parallel/parallel-exercise-1.html: -------------------------------------------------------------------------------- 1 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 |
3
25 | 26 |
Parallel Animation Group
27 | 28 |
Exercise 1 - Make a Parallel Group
29 | 30 |

Groupings are important so let's 31 | get started on the exercise

32 | 33 |

In this exercise, create a parallel group 34 | of animation that has 3 different animations. Each children should run 300px, 35 | 500px, 700px from top respectively for 5 seconds.

36 | 37 |

Hint: you should first create the children then 38 | include the children into the group. You might also need to create 39 | more animation divs in the html section and change their colour 40 | depends on your preferences.

41 | 42 |
Show Solution
43 |
44 | var A = new Animation(document.querySelector("#a"), 45 | {top: "300px"}, 5);
46 | var B = new Animation(document.querySelector("#b"), 47 | {top: "500px"}, 5);
48 | var C = new Animation(document.querySelector("#c"), 49 | {top: "700px"}, 5);
50 | new AnimationGroup([A, B, C]); 51 | 52 |
53 | 54 |
55 | 56 |
57 | 58 |
-------------------------------------------------------------------------------- /tutorial/sample-tutorial.html: -------------------------------------------------------------------------------- 1 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 | 44 | 45 | -------------------------------------------------------------------------------- /tutorial/tutorial-testing.js: -------------------------------------------------------------------------------- 1 | /* 2 | * Copyright 2013 Google Inc. All Rights Reserved. 3 | * 4 | * Licensed under the Apache License, Version 2.0 (the "License"); 5 | * you may not use this file except in compliance with the License. 6 | * You may obtain a copy of the License at 7 | * 8 | * http://www.apache.org/licenses/LICENSE-2.0 9 | * 10 | * Unless required by applicable law or agreed to in writing, software 11 | * distributed under the License is distributed on an "AS IS" BASIS, 12 | * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 13 | * See the License for the specific language governing permissions and 14 | * limitations under the License. 15 | */ 16 | "use strict"; 17 | 18 | (function() { 19 | var pass; 20 | var completedTests; 21 | var allDone; 22 | var numTests; 23 | 24 | // Call to initialize the testing environment. 25 | function setupTutorialTests() { 26 | setState("Manual"); 27 | var timeOfAnimation = document.createElement('div'); 28 | timeOfAnimation.id = "animViewerText"; 29 | timeOfAnimation.innerHTML = "Current animation time: 0.00"; 30 | document.body.appendChild(timeOfAnimation); 31 | numTests = 0; 32 | completedTests = 0; 33 | allDone = false; 34 | pass = true; 35 | } 36 | 37 | // This function mimics the async_test function in testharness.js so that 38 | // extra-asserts.js will run as intended for a tutorial. 39 | function async_test(func, name, properties) { 40 | numTests++; 41 | step = function(func) { 42 | func(); 43 | if (!pass) { 44 | parent.TryItDisplay.fail(); 45 | allDone = true; 46 | }; 47 | }; 48 | 49 | done = function() { 50 | completedTests++; 51 | if (completedTests == numTests && !allDone) { 52 | allDone = true; 53 | parent.TryItDisplay.pass(); 54 | }; 55 | }; 56 | return this; 57 | } 58 | 59 | function assert_equals(actual, expected, description) { 60 | pass = (actual == expected); 61 | } 62 | 63 | function assert_approx_equals(actual, expected, epsilon, description) { 64 | var lowerBound = expected - (epsilon / 2) < actual; 65 | var upperBound = expected + (epsilon / 2) > actual; 66 | pass = (lowerBound && upperBound); 67 | } 68 | 69 | // This function is required to do nothing for tutorial testing, 70 | // but extra-asserts calls it and thus without this function, 71 | // extra-asserts.js will cause the page to crash. 72 | function add_completion_callback(anything) { 73 | } 74 | 75 | /////////////////////////////////////////////////////////////////////////////// 76 | // Exposing functions to be accessed externally // 77 | /////////////////////////////////////////////////////////////////////////////// 78 | 79 | window.setupTutorialTests = setupTutorialTests; 80 | window.async_test = async_test; 81 | window.assert_approx_equals = assert_approx_equals; 82 | window.assert_equals = assert_equals; 83 | window.add_completion_callback = add_completion_callback; 84 | })(); 85 | --------------------------------------------------------------------------------