forked from mirrors/gecko-dev
c23be2ef0f
--HG-- rename : dom/animation/test/css-transitions/test_animation-computed-timing.html => testing/web-platform/tests/css/css-transitions/AnimationEffect-getComputedTiming.tentative.html rename : dom/animation/test/css-transitions/test_pseudoElement-get-animations.html => testing/web-platform/tests/css/css-transitions/CSSPseudoElement-getAnimations.tentative.html rename : dom/animation/test/css-transitions/test_animation-cancel.html => testing/web-platform/tests/css/css-transitions/CSSTransition-canceling.tentative.html rename : dom/animation/test/css-transitions/test_animation-currenttime.html => testing/web-platform/tests/css/css-transitions/CSSTransition-currentTime.tentative.html rename : dom/animation/test/css-transitions/test_setting-effect.html => testing/web-platform/tests/css/css-transitions/CSSTransition-effect.tentative.html rename : dom/animation/test/css-transitions/test_animation-finished.html => testing/web-platform/tests/css/css-transitions/CSSTransition-finished.tentative.html rename : dom/animation/test/css-transitions/test_animation-ready.html => testing/web-platform/tests/css/css-transitions/CSSTransition-ready.tentative.html rename : dom/animation/test/css-transitions/test_animation-starttime.html => testing/web-platform/tests/css/css-transitions/CSSTransition-startTime.tentative.html rename : dom/animation/test/css-transitions/test_csstransition-transitionproperty.html => testing/web-platform/tests/css/css-transitions/CSSTransition-transitionProperty.tentative.html rename : dom/animation/test/css-transitions/test_document-get-animations.html => testing/web-platform/tests/css/css-transitions/Document-getAnimations.tentative.html rename : dom/animation/test/css-transitions/test_element-get-animations.html => testing/web-platform/tests/css/css-transitions/Element-getAnimations.tentative.html rename : dom/animation/test/css-transitions/test_keyframeeffect-getkeyframes.html => testing/web-platform/tests/css/css-transitions/KeyframeEffect-getKeyframes.tentative.html rename : dom/animation/test/css-transitions/test_effect-target.html => testing/web-platform/tests/css/css-transitions/KeyframeEffect-target.tentative.html rename : dom/animation/test/css-transitions/test_event-dispatch.html => testing/web-platform/tests/css/css-transitions/event-dispatch.tentative.html extra : rebase_source : f09d4ff00f5be59ec5f90b211eebb074bdc17781
278 lines
8.1 KiB
JavaScript
278 lines
8.1 KiB
JavaScript
//
|
|
// Simple Helper Functions For Testing CSS
|
|
//
|
|
|
|
(function(root) {
|
|
'use strict';
|
|
|
|
// serialize styles object and dump to dom
|
|
// appends <style id="dynamic-style"> to <head>
|
|
// setStyle("#some-selector", {"some-style" : "value"})
|
|
// setStyle({"#some-selector": {"some-style" : "value"}})
|
|
root.setStyle = function(selector, styles) {
|
|
var target = document.getElementById('dynamic-style');
|
|
if (!target) {
|
|
target = document.createElement('style');
|
|
target.id = 'dynamic-style';
|
|
target.type = "text/css";
|
|
document.getElementsByTagName('head')[0].appendChild(target);
|
|
}
|
|
|
|
var data = [];
|
|
// single selector/styles
|
|
if (typeof selector === 'string' && styles !== undefined) {
|
|
data = [selector, '{', serializeStyles(styles), '}'];
|
|
target.textContent = data.join("\n");
|
|
return;
|
|
}
|
|
// map of selector/styles
|
|
for (var key in selector) {
|
|
if (Object.prototype.hasOwnProperty.call(selector, key)) {
|
|
var _data = [key, '{', serializeStyles(selector[key]), '}'];
|
|
data.push(_data.join('\n'));
|
|
}
|
|
}
|
|
|
|
target.textContent = data.join("\n");
|
|
};
|
|
|
|
function serializeStyles(styles) {
|
|
var data = [];
|
|
for (var property in styles) {
|
|
if (Object.prototype.hasOwnProperty.call(styles, property)) {
|
|
var prefixedProperty = addVendorPrefix(property);
|
|
data.push(prefixedProperty + ":" + styles[property] + ";");
|
|
}
|
|
}
|
|
|
|
return data.join('\n');
|
|
}
|
|
|
|
|
|
// shorthand for computed style
|
|
root.computedStyle = function(element, property, pseudo) {
|
|
var prefixedProperty = addVendorPrefix(property);
|
|
return window
|
|
.getComputedStyle(element, pseudo || null)
|
|
.getPropertyValue(prefixedProperty);
|
|
};
|
|
|
|
// flush rendering buffer
|
|
root.reflow = function() {
|
|
document.body.offsetWidth;
|
|
};
|
|
|
|
// merge objects
|
|
root.extend = function(target /*, ..rest */) {
|
|
Array.prototype.slice.call(arguments, 1).forEach(function(obj) {
|
|
Object.keys(obj).forEach(function(key) {
|
|
target[key] = obj[key];
|
|
});
|
|
});
|
|
|
|
return target;
|
|
};
|
|
|
|
// dom fixture helper ("resetting dom test elements")
|
|
var _domFixture;
|
|
var _domFixtureSelector;
|
|
root.domFixture = function(selector) {
|
|
var fixture = document.querySelector(selector || _domFixtureSelector);
|
|
if (!fixture) {
|
|
throw new Error('fixture ' + (selector || _domFixtureSelector) + ' not found!');
|
|
}
|
|
if (!_domFixture && selector) {
|
|
// save a copy
|
|
_domFixture = fixture.cloneNode(true);
|
|
_domFixtureSelector = selector;
|
|
} else if (_domFixture) {
|
|
// restore the copy
|
|
var tmp = _domFixture.cloneNode(true);
|
|
fixture.parentNode.replaceChild(tmp, fixture);
|
|
} else {
|
|
throw new Error('domFixture must be initialized first!');
|
|
}
|
|
};
|
|
|
|
root.MS_PER_SEC = 1000;
|
|
|
|
/*
|
|
* The recommended minimum precision to use for time values.
|
|
*
|
|
* Based on Web Animations:
|
|
* https://w3c.github.io/web-animations/#precision-of-time-values
|
|
*/
|
|
const TIME_PRECISION = 0.0005; // ms
|
|
|
|
/*
|
|
* Allow implementations to substitute an alternative method for comparing
|
|
* times based on their precision requirements.
|
|
*/
|
|
root.assert_times_equal = function(actual, expected, description) {
|
|
assert_approx_equals(actual, expected, TIME_PRECISION, description);
|
|
};
|
|
|
|
/*
|
|
* Compare a time value based on its precision requirements with a fixed value.
|
|
*/
|
|
root.assert_time_equals_literal = (actual, expected, description) => {
|
|
assert_approx_equals(actual, expected, TIME_PRECISION, description);
|
|
};
|
|
|
|
/**
|
|
* Assert that CSSTransition event, |evt|, has the expected property values
|
|
* defined by |propertyName|, |elapsedTime|, and |pseudoElement|.
|
|
*/
|
|
root.assert_end_events_equal = function(evt, propertyName, elapsedTime,
|
|
pseudoElement = '') {
|
|
assert_equals(evt.propertyName, propertyName);
|
|
assert_times_equal(evt.elapsedTime, elapsedTime);
|
|
assert_equals(evt.pseudoElement, pseudoElement);
|
|
};
|
|
|
|
/**
|
|
* Assert that array of simultaneous CSSTransition events, |evts|, have the
|
|
* corresponding property names listed in |propertyNames|, and the expected
|
|
* |elapsedTimes| and |pseudoElement| members.
|
|
*
|
|
* |elapsedTimes| may be a single value if all events are expected to have the
|
|
* same elapsedTime, or an array parallel to |propertyNames|.
|
|
*/
|
|
root.assert_end_event_batch_equal = function(evts, propertyNames, elapsedTimes,
|
|
pseudoElement = '') {
|
|
assert_equals(
|
|
evts.length,
|
|
propertyNames.length,
|
|
'Test harness error: should have waited for the correct number of events'
|
|
);
|
|
assert_true(
|
|
typeof elapsedTimes === 'number' ||
|
|
(Array.isArray(elapsedTimes) &&
|
|
elapsedTimes.length === propertyNames.length),
|
|
'Test harness error: elapsedTimes must either be a number or an array of' +
|
|
' numbers with the same length as propertyNames'
|
|
);
|
|
|
|
if (typeof elapsedTimes === 'number') {
|
|
elapsedTimes = Array(propertyNames.length).fill(elapsedTimes);
|
|
}
|
|
const testPairs = propertyNames.map((propertyName, index) => ({
|
|
propertyName,
|
|
elapsedTime: elapsedTimes[index]
|
|
}));
|
|
|
|
const sortByPropertyName = (a, b) =>
|
|
a.propertyName.localeCompare(b.propertyName);
|
|
evts.sort(sortByPropertyName);
|
|
testPairs.sort(sortByPropertyName);
|
|
|
|
for (let evt of evts) {
|
|
const expected = testPairs.shift();
|
|
assert_end_events_equal(
|
|
evt,
|
|
expected.propertyName,
|
|
expected.elapsedTime,
|
|
pseudoElement
|
|
);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Appends a div to the document body.
|
|
*
|
|
* @param t The testharness.js Test object. If provided, this will be used
|
|
* to register a cleanup callback to remove the div when the test
|
|
* finishes.
|
|
*
|
|
* @param attrs A dictionary object with attribute names and values to set on
|
|
* the div.
|
|
*/
|
|
root.addDiv = function(t, attrs) {
|
|
var div = document.createElement('div');
|
|
if (attrs) {
|
|
for (var attrName in attrs) {
|
|
div.setAttribute(attrName, attrs[attrName]);
|
|
}
|
|
}
|
|
document.body.appendChild(div);
|
|
if (t && typeof t.add_cleanup === 'function') {
|
|
t.add_cleanup(function() {
|
|
if (div.parentNode) {
|
|
div.remove();
|
|
}
|
|
});
|
|
}
|
|
return div;
|
|
};
|
|
|
|
/**
|
|
* Appends a style div to the document head.
|
|
*
|
|
* @param t The testharness.js Test object. If provided, this will be used
|
|
* to register a cleanup callback to remove the style element
|
|
* when the test finishes.
|
|
*
|
|
* @param rules A dictionary object with selector names and rules to set on
|
|
* the style sheet.
|
|
*/
|
|
root.addStyle = (t, rules) => {
|
|
const extraStyle = document.createElement('style');
|
|
document.head.appendChild(extraStyle);
|
|
if (rules) {
|
|
const sheet = extraStyle.sheet;
|
|
for (const selector in rules) {
|
|
sheet.insertRule(selector + '{' + rules[selector] + '}',
|
|
sheet.cssRules.length);
|
|
}
|
|
}
|
|
|
|
if (t && typeof t.add_cleanup === 'function') {
|
|
t.add_cleanup(() => {
|
|
extraStyle.remove();
|
|
});
|
|
}
|
|
};
|
|
|
|
/**
|
|
* Promise wrapper for requestAnimationFrame.
|
|
*/
|
|
root.waitForFrame = () => {
|
|
return new Promise(resolve => {
|
|
window.requestAnimationFrame(resolve);
|
|
});
|
|
};
|
|
|
|
/**
|
|
* Returns a Promise that is resolved after the given number of consecutive
|
|
* animation frames have occured (using requestAnimationFrame callbacks).
|
|
*
|
|
* @param frameCount The number of animation frames.
|
|
* @param onFrame An optional function to be processed in each animation frame.
|
|
*/
|
|
root.waitForAnimationFrames = (frameCount, onFrame) => {
|
|
const timeAtStart = document.timeline.currentTime;
|
|
return new Promise(resolve => {
|
|
function handleFrame() {
|
|
if (onFrame && typeof onFrame === 'function') {
|
|
onFrame();
|
|
}
|
|
if (timeAtStart != document.timeline.currentTime &&
|
|
--frameCount <= 0) {
|
|
resolve();
|
|
} else {
|
|
window.requestAnimationFrame(handleFrame); // wait another frame
|
|
}
|
|
}
|
|
window.requestAnimationFrame(handleFrame);
|
|
});
|
|
};
|
|
|
|
/**
|
|
* Wrapper that takes a sequence of N animations and returns:
|
|
*
|
|
* Promise.all([animations[0].ready, animations[1].ready, ... animations[N-1].ready]);
|
|
*/
|
|
root.waitForAllAnimations = animations =>
|
|
Promise.all(animations.map(animation => animation.ready));
|
|
|
|
})(window);
|