interpolation-test-common.js (3167B)
1 'use strict'; 2 function test_interpolation(settings, expectations) { 3 4 test(function(){ 5 assert_true(CSS.supports(settings.property, settings.from), 'Value "' + settings.from + '" is supported by ' + settings.property); 6 assert_true(CSS.supports(settings.property, settings.to), 'Value "' + settings.to + '" is supported by ' + settings.property); 7 }, '"' + settings.from + '" and "' + settings.to + '" are valid ' + settings.property + ' values'); 8 9 const container = document.getElementById('container'); 10 for (let i = 0; i < expectations.length; ++i) { 11 const progress = expectations[i].at; 12 const expectation = expectations[i].expect; 13 const animationId = 'anim' + i; 14 const targetId = 'target' + i; 15 const referenceId = 'reference' + i; 16 17 test(function(){ 18 assert_true(CSS.supports(settings.property, expectation), 'Value "' + expectation + '" is supported by ' + settings.property); 19 20 const target = document.createElementNS('http://www.w3.org/2000/svg', 'g'); 21 target.id = targetId; 22 container.appendChild(target); 23 24 const reference = document.createElementNS('http://www.w3.org/2000/svg', 'g'); 25 reference.id = referenceId; 26 container.appendChild(reference); 27 28 assert_equals(getComputedStyle(target)[settings.property], getComputedStyle(reference)[settings.property]); 29 30 // Create an animation of length 2s that starts at -1s so the current time of 0s is 31 // exactly halfway through the animation. A cubic bezier timing function is used that 32 // evaluates to |progress| at the current time (halfway through the animation). 33 34 // Cubic bezier evaluates to |progress| at 50%. 35 const y = (8 * progress - 1) / 6; 36 const timing_function = 'cubic-bezier(0, ' + y + ', 1, ' + y + ')'; 37 38 const stylesheet = document.createElementNS('http://www.w3.org/2000/svg', 'style'); 39 stylesheet.textContent = 40 '#' + targetId + ' {\n' + 41 ' animation: 2s ' + timing_function + ' -1s paused ' + animationId + ';\n' + 42 '}\n' + 43 '@keyframes ' + animationId + ' {\n' + 44 ' 0% { ' + settings.property + ': ' + settings.from + '; }\n' + 45 ' 100% { ' + settings.property + ': ' + settings.to + '; }\n' + 46 '}\n' + 47 '#' + referenceId + ' {\n' + 48 ' ' + settings.property + ': ' + expectation + ';\n' + 49 '}\n'; 50 container.appendChild(stylesheet); 51 52 assert_equals(getComputedStyle(target)[settings.property], getComputedStyle(reference)[settings.property]); 53 assert_equals(getComputedStyle(target)[settings.property], expectation); 54 55 container.removeChild(target); 56 container.removeChild(reference); 57 container.removeChild(stylesheet); 58 }, 'Animation between "' + settings.from + '" and "' + settings.to + '" at progress ' + progress); 59 } 60 } 61 62 function test_no_interpolation(settings) { 63 const expectFrom = [-1, 0, 0.125].map(function (progress) { 64 return {at: progress, expect: settings.from}; 65 }); 66 const expectTo = [0.875, 1, 2].map(function (progress) { 67 return {at: progress, expect: settings.to}; 68 }); 69 70 test_interpolation(settings, expectFrom.concat(expectTo)); 71 }