1 suite('box-handler', function() { 2 test('parse rectangle values', function() { 3 assert.deepEqual(webAnimations1.parseBox(' rect(0px, 20px, 20px, 0px) '), [{px: 0}, {px: 20}, {px: 20}, {px: 0}]); 4 assert.deepEqual(webAnimations1.parseBox('rect(0px, 20px, 20px, 0px)'), [{px: 0}, {px: 20}, {px: 20}, {px: 0}]); 5 assert.deepEqual(webAnimations1.parseBox('rect(0px, 20px, 20px, 0)'), [{px: 0}, {px: 20}, {px: 20}, {px: 0}]); 6 assert.deepEqual(webAnimations1.parseBox('rect(10px, 100%, 500px, 10%)'), [{px: 10}, {'%': 100}, {px: 500}, {'%': 10}]); 7 assert.deepEqual(webAnimations1.parseBox('rect(10%, 100%, 500%, 10%)'), [{'%': 10}, {'%': 100}, {'%': 500}, {'%': 10}]); 8 assert.deepEqual(webAnimations1.parseBox('rect(0px, calc(10px*3), 20px, 0%)'), [{px: 0}, {px: 30}, {px: 20}, {'%': 0}]); 9 assert.deepEqual(webAnimations1.parseBox('rect(0px, 0%, 20px, calc(10px*3))'), [{px: 0}, {'%': 0}, {px: 20}, {px: 30}]); 10 assert.deepEqual(webAnimations1.parseBox('rect(0px, 0%, 20px, calc((10px) + (3px)))'), [{px: 0}, {'%': 0}, {px: 20}, {px: 13}]); 11 assert.deepEqual(webAnimations1.parseBox('rect(calc(10px + 5em), calc(10px + 5em), calc(10px + 5em), calc(10px + 5em))'), 12 [{px: 10, em: 5}, {px: 10, em: 5}, {px: 10, em: 5}, {px: 10, em: 5}]); 13 }); 14 test('invalid rectangles fail to parse', function() { 15 assert.isUndefined(webAnimations1.parseBox('rect(0, 20, 20, 0)')); 16 assert.isUndefined(webAnimations1.parseBox('rect(0px, 0px, 0px)')); 17 assert.isUndefined(webAnimations1.parseBox('rect(0px, 0px, 0px, 0px, 0px)')); 18 assert.isUndefined(webAnimations1.parseBox('rect()')); 19 assert.isUndefined(webAnimations1.parseBox('rect(calc(10px + 5), 0px, 0px, 0px)')); 20 assert.isUndefined(webAnimations1.parseBox('Rect(0px, 0px, 0px, 0px)')); 21 }); 22 test('interpolate lengths, percents and calcs in rectangles', function() { 23 assert.equal( 24 webAnimations1.propertyInterpolation('clip', 'rect(10px, 10px, 10px, 10px)', 'rect(50px, 50px, 50px, 50px)')(0.25), 25 'rect(20px, 20px, 20px, 20px)', 26 'Interpolate lengths in a rect'); 27 assert.equal( 28 webAnimations1.propertyInterpolation('clip', 'rect(-10px, -10px, -10px, -10px)', 'rect(50px, 50px, 50px, 50px)')(0.25), 29 'rect(5px, 5px, 5px, 5px)', 30 'Interpolate negative lengths in a rect'); 31 assert.equal( 32 webAnimations1.propertyInterpolation('clip', 'rect(10%, 10%, 10%, 10%)', 'rect(50%, 50%, 50%, 50%)')(0.25), 33 'rect(20%, 20%, 20%, 20%)', 34 'Interpolate percents in a rect'); 35 assert.equal( 36 webAnimations1.propertyInterpolation('clip', 'rect(10px, 10%, 10px, 10%)', 'rect(50px, 50%, 50px, 50%)')(0.25), 37 'rect(20px, 20%, 20px, 20%)', 38 'Interpolate mixed lengths and percents in a rect, where units are aligned'); 39 assert.equal( 40 webAnimations1.propertyInterpolation('clip', 'rect(0px, 0px, 0px, 0px)', 'rect(0.001px, 0.001px, 0.001px, 0.001px)')(0.05), 41 'rect(0px, 0px, 0px, 0px)', 42 'Round interpolation result'); 43 assert.equal( 44 webAnimations1.propertyInterpolation('clip', 'rect(0px, 0px, 0px, 0px)', 'rect(0.001px, 0.001px, 0.001px, 0.001px)')(0.5), 45 'rect(0.001px, 0.001px, 0.001px, 0.001px)', 46 'Round interpolation result'); 47 assert.equal( 48 webAnimations1.propertyInterpolation('clip', 'rect(10px, 10px, 10px, 10px)', 'rect(20px, 20px, 20px, 20px)')(0.25), 49 'rect(12.500px, 12.500px, 12.500px, 12.500px)', 50 'Round interpolation result'); 51 assert.equal( 52 webAnimations1.propertyInterpolation('clip', 'rect(10px, 10%, 10px, 10%)', 'rect(10em, 10px, 10em, 10px)')(0.4), 53 'rect(calc(6px + 4em), calc(6% + 4px), calc(6px + 4em), calc(6% + 4px))', 54 'Interpolate from pixels to ems and from percents to pixels'); 55 assert.equal( 56 webAnimations1.propertyInterpolation( 57 'clip', 58 'rect(calc(10px + 5em), calc(10px + 5em), calc(10px + 5em), calc(10px + 5em))', 59 'rect(calc(20px + 35em), calc(20px + 35em), calc(20px + 35em), calc(20px + 35em))')(0.4), 60 'rect(calc(14px + 17em), calc(14px + 17em), calc(14px + 17em), calc(14px + 17em))', 61 'Interpolate calcs in a rect'); 62 assert.equal( 63 webAnimations1.propertyInterpolation( 64 'clip', 65 'rect(calc(10px + (5em)), calc(10px + (5em)), calc(10px + (5em)), calc(10px + (5em)))', 66 'rect(calc(20px + 35em), calc(20px + 35em), calc(20% + 35em), calc(20% + 35em))')(0.5), 67 'rect(calc(15px + 20em), calc(15px + 20em), calc(5px + 20em + 10%), calc(5px + 20em + 10%))', 68 'Interpolate calcs in a rect'); 69 }); 70 }); 71
