responsive-test.js (1910B)
1 class ResponsiveTest { 2 constructor(target, property, keyframes) { 3 this.property = property; 4 this.target = target; 5 this.duration = 1000; 6 this.anim = target.animate(keyframes, this.duration); 7 this.anim.pause(); 8 } 9 10 get ready() { 11 return new Promise(resolve => { 12 this.anim.ready.then(resolve); 13 }); 14 } 15 16 set underlyingValue(value) { 17 this.target.style[this.property] = value; 18 } 19 20 set inheritedValue(value) { 21 this.target.parentElement.style[this.property] = value; 22 } 23 24 // The testCases are of the form: 25 // [{at: <fractional_progress>, is: <computed style> }, ...] 26 assertResponsive(testCases) { 27 for (let i = 0; i < testCases.length; i++) { 28 const testCase = testCases[i]; 29 this.anim.currentTime = this.duration * testCase.at; 30 assert_equals(getComputedStyle(this.target)[this.property], testCase.is, 31 `${this.property} at ${testCase.at}`); 32 } 33 } 34 } 35 36 // Creates a test that allows setting the underlying style of the target 37 // element or its parent. 38 // Options are of the form: 39 // property: required property in camelcase form as used in the 40 // web animation API. 41 // from: optional starting keyframe as a string. 42 // to: optional ending keyframe as a string. 43 function createResponsiveTest(test, options) { 44 const parent = document.createElement('div'); 45 const target = document.createElement('div'); 46 document.body.appendChild(parent); 47 parent.appendChild(target); 48 const property = options.property; 49 const keyframes = []; 50 const createKeyframe = (value) => { 51 const keyframe = {}; 52 keyframe[property] = value; 53 return keyframe; 54 } 55 if (options.from) { 56 keyframes.push(createKeyframe(options.from)); 57 } 58 if (options.to) { 59 keyframes.push(createKeyframe(options.to)); 60 } 61 test.add_cleanup(() => { 62 parent.remove(); 63 }); 64 return new ResponsiveTest(target, property, keyframes); 65 }