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