test_transform_limits.html (2032B)
1 <!doctype html> 2 <meta charset=utf-8> 3 <script src="/resources/testharness.js"></script> 4 <script src="/resources/testharnessreport.js"></script> 5 <script src="../testcommon.js"></script> 6 <body> 7 <div id="log"></div> 8 <script> 9 'use strict'; 10 11 // We clamp +infinity or -inifinity value in floating point to 12 // maximum floating point value or -maximum floating point value. 13 const MAX_FLOAT = 3.40282e+38; 14 15 test(function(t) { 16 var div = addDiv(t); 17 div.style = "width: 1px; height: 1px;"; 18 var anim = div.animate([ { transform: 'scale(1)' }, 19 { transform: 'scale(3.5e+38)'}, 20 { transform: 'scale(3)' } ], 100 * MS_PER_SEC); 21 22 anim.pause(); 23 anim.currentTime = 50 * MS_PER_SEC; 24 assert_equals(getComputedStyle(div).transform, 25 'matrix(' + MAX_FLOAT + ', 0, 0, ' + MAX_FLOAT + ', 0, 0)'); 26 }, 'Test that the parameter of transform scale is clamped' ); 27 28 test(function(t) { 29 var div = addDiv(t); 30 div.style = "width: 1px; height: 1px;"; 31 var anim = div.animate([ { transform: 'translate(1px)' }, 32 { transform: 'translate(3.5e+38px)'}, 33 { transform: 'translate(3px)' } ], 100 * MS_PER_SEC); 34 35 anim.pause(); 36 anim.currentTime = 50 * MS_PER_SEC; 37 assert_equals(getComputedStyle(div).transform, 38 'matrix(1, 0, 0, 1, ' + MAX_FLOAT + ', 0)'); 39 }, 'Test that the parameter of transform translate is clamped' ); 40 41 test(function(t) { 42 var div = addDiv(t); 43 div.style = "width: 1px; height: 1px;"; 44 var anim = div.animate([ { transform: 'matrix(0.5, 0, 0, 0.5, 0, 0)' }, 45 { transform: 'matrix(2, 0, 0, 2, 3.5e+38, 0)'}, 46 { transform: 'matrix(0, 2, 0, -2, 0, 0)' } ], 47 100 * MS_PER_SEC); 48 49 anim.pause(); 50 anim.currentTime = 50 * MS_PER_SEC; 51 assert_equals(getComputedStyle(div).transform, 52 'matrix(2, 0, 0, 2, ' + MAX_FLOAT + ', 0)'); 53 }, 'Test that the parameter of transform matrix is clamped' ); 54 55 </script> 56 </body>