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
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
|
(function(root) {
'use strict';
//
var index = 0;
var suite = root.generalParallelTest = {
// prepare individual test
setup: function(data, options) {
suite._setupDom(data, options);
suite._setupEvents(data, options);
},
// clone fixture and prepare data containers
_setupDom: function(data, options) {
// clone fixture into off-viewport test-canvas
data.fixture = document.getElementById('fixture').cloneNode(true);
data.fixture.id = 'test-' + (index++);
(document.getElementById('offscreen') || document.body).appendChild(data.fixture);
// data container for #fixture > .container > .transition
data.transition = {
node: data.fixture.querySelector('.transition'),
values: [],
events: [],
computedStyle: function(property) {
return computedStyle(data.transition.node, property);
}
};
// data container for #fixture > .container
data.container = {
node: data.transition.node.parentNode,
values: [],
events: [],
computedStyle: function(property) {
return computedStyle(data.container.node, property);
}
};
// data container for #fixture > .container > .transition[:before | :after]
if (data.pseudo) {
data.pseudo = {
name: data.pseudo,
values: [],
computedStyle: function(property) {
return computedStyle(data.transition.node, property, ':' + data.pseudo.name);
}
};
}
},
// bind TransitionEnd event listeners
_setupEvents: function(data, options) {
['transition', 'container'].forEach(function(elem) {
var handler = function(event) {
event.stopPropagation();
var name = event.propertyName;
var time = Math.round(event.elapsedTime * 1000) / 1000;
var pseudo = event.pseudoElement ? (':' + event.pseudoElement) : '';
data[elem].events.push(name + pseudo + ":" + time + "s");
};
data[elem].node.addEventListener('transitionend', handler, false);
data[elem]._events = {'transitionend': handler};
});
},
// cleanup after individual test
teardown: function(data, options) {
// data.fixture.remove();
if (data.fixture.parentNode) {
data.fixture.parentNode.removeChild(data.fixture);
}
},
// invoked prior to running a slice of tests
sliceStart: function(options, tests) {
// inject styles into document
setStyle(options.styles);
// kick off value collection loop
generalParallelTest.startValueCollection(options);
},
// invoked after running a slice of tests
sliceDone: function(options, tests) {
// stop value collection loop
generalParallelTest.stopValueCollection(options);
// reset styles cache
options.styles = {};
},
// called once all tests are done
done: function(options) {
// reset document styles
setStyle();
reflow();
},
// add styles of individual test to slice cache
addStyles: function(data, options, styles) {
if (!options.styles) {
options.styles = {};
}
Object.keys(styles).forEach(function(key) {
var selector = '#' + data.fixture.id
// fixture must become #fixture.fixture rather than a child selector
+ (key.substring(0, 8) === '.fixture' ? '' : ' ')
+ key;
options.styles[selector] = styles[key];
});
},
// set style and compute values for container and transition
getStyle: function(data) {
reflow();
// grab current styles: "initial state"
suite._getStyleFor(data, 'from');
// apply target state
suite._addClass(data, 'to', true);
// grab current styles: "target state"
suite._getStyleFor(data, 'to');
// remove target state
suite._removeClass(data, 'to', true);
// clean up the mess created for value collection
data.container._values = [];
data.transition._values = [];
if (data.pseudo) {
data.pseudo._values = [];
}
},
// grab current styles and store in respective element's data container
_getStyleFor: function(data, key) {
data.container[key] = data.container.computedStyle(data.property);
data.transition[key] = data.transition.computedStyle(data.property);
if (data.pseudo) {
data.pseudo[key] = data.pseudo.computedStyle(data.property);
}
},
// add class to test's elements and possibly reflow
_addClass: function(data, className, forceReflow) {
data.container.node.classList.add(className);
data.transition.node.classList.add(className);
if (forceReflow) {
reflow();
}
},
// remove class from test's elements and possibly reflow
_removeClass: function(data, className, forceReflow) {
data.container.node.classList.remove(className);
data.transition.node.classList.remove(className);
if (forceReflow) {
reflow();
}
},
// add transition and to classes to container and transition
startTransition: function(data) {
// add transition-defining class
suite._addClass(data, 'how', true);
// add target state (without reflowing)
suite._addClass(data, 'to', false);
},
// requestAnimationFrame runLoop to collect computed values
startValueCollection: function(options) {
var raf = window.requestAnimationFrame || function(callback){
setTimeout(callback, 20);
};
// flag denoting if the runLoop should continue (true) or exit (false)
options._collectValues = true;
function runLoop() {
if (!options._collectValues) {
// test's are done, stop annoying the CPU
return;
}
// collect current style for test's elements
options.tests.forEach(function(data) {
if (!data.property) {
return;
}
['transition', 'container', 'pseudo'].forEach(function(elem) {
var pseudo = null;
if (!data[elem] || (elem === 'pseudo' && !data.pseudo)) {
return;
}
var current = data[elem].computedStyle(data.property);
var values = data[elem].values;
var length = values.length;
if (!length || values[length - 1] !== current) {
values.push(current);
}
});
});
// rinse and repeat
raf(runLoop);
}
runLoop();
},
// stop requestAnimationFrame runLoop collecting computed values
stopValueCollection: function(options) {
options._collectValues = false;
},
// generate test.step function asserting collected events match expected
assertExpectedEventsFunc: function(data, elem, expected) {
return function() {
var _result = data[elem].events.sort().join(" ");
var _expected = typeof expected === 'string' ? expected : expected.sort().join(" ");
assert_equals(_result, _expected, "Expected TransitionEnd events triggered on ." + elem);
};
},
// generate test.step function asserting collected values are neither initial nor target
assertIntermediateValuesFunc: function(data, elem) {
return function() {
// the first value (index: 0) is always going to be the initial value
// the last value is always going to be the target value
var values = data[elem].values;
if (data.flags.discrete) {
// a discrete value will just switch from one state to another without having passed intermediate states.
assert_equals(values[0], data[elem].from, "must be initial value while transitioning on ." + elem);
assert_equals(values[1], data[elem].to, "must be target value after transitioning on ." + elem);
assert_equals(values.length, 2, "discrete property only has 2 values ." + elem);
} else {
assert_not_equals(values[1], data[elem].from, "may not be initial value while transitioning on ." + elem);
assert_not_equals(values[1], data[elem].to, "may not be target value while transitioning on ." + elem);
}
// TODO: first value must be initial, last value must be target
};
}
};
})(window);
|
