зеркало из https://github.com/mozilla/gecko-dev.git
168 строки
5.1 KiB
HTML
168 строки
5.1 KiB
HTML
<!DOCTYPE html>
|
|
<meta charset=utf-8>
|
|
<title>
|
|
Test for interaction between prefixed and non-prefixed @keyframes rules with
|
|
the same name
|
|
</title>
|
|
<script src='/resources/testharness.js'></script>
|
|
<script src='/resources/testharnessreport.js'></script>
|
|
<div id='log'></div>
|
|
<script>
|
|
/**
|
|
* Appends a style element 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.
|
|
*/
|
|
function addStyle(t, rules) {
|
|
var extraStyle = document.createElement('style');
|
|
document.head.appendChild(extraStyle);
|
|
if (rules) {
|
|
var sheet = extraStyle.sheet;
|
|
for (var selector in rules) {
|
|
sheet.insertRule(selector + '{' + rules[selector] + '}',
|
|
sheet.cssRules.length);
|
|
}
|
|
}
|
|
|
|
if (t && typeof t.add_cleanup === 'function') {
|
|
t.add_cleanup(function() {
|
|
extraStyle.remove();
|
|
});
|
|
}
|
|
}
|
|
|
|
/**
|
|
* 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.
|
|
*/
|
|
function addDiv(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() {
|
|
div.remove();
|
|
});
|
|
}
|
|
return div;
|
|
}
|
|
|
|
test(function(t) {
|
|
addStyle(t,
|
|
{ '@-webkit-keyframes anim': 'from,to { color: rgb(0, 255, 0); }' });
|
|
|
|
var div = addDiv(t, { style: 'animation: anim 100s' });
|
|
|
|
assert_equals(getComputedStyle(div).color, 'rgb(0, 255, 0)');
|
|
}, '-webkit- prefix keyframes');
|
|
|
|
test(function(t) {
|
|
addStyle(t,
|
|
{ '@-moz-keyframes anim': 'from,to { color: rgb(0, 255, 0); }' });
|
|
|
|
var div = addDiv(t, { style: 'animation: anim 100s' });
|
|
|
|
assert_equals(getComputedStyle(div).color, 'rgb(0, 255, 0)');
|
|
}, '-moz- prefix keyframes');
|
|
|
|
test(function(t) {
|
|
addStyle(t,
|
|
{ '@-WEBKIT-keyframes anim': 'from,to { color: rgb(0, 255, 0); }' });
|
|
|
|
var div = addDiv(t, { style: 'animation: anim 100s' });
|
|
|
|
assert_equals(getComputedStyle(div).color, 'rgb(0, 255, 0)');
|
|
}, '-WEBKIT- prefix keyframes');
|
|
|
|
test(function(t) {
|
|
addStyle(t,
|
|
{ '@-MOZ-keyframes anim': 'from,to { color: rgb(0, 255, 0); }' });
|
|
|
|
var div = addDiv(t, { style: 'animation: anim 100s' });
|
|
|
|
assert_equals(getComputedStyle(div).color, 'rgb(0, 255, 0)');
|
|
}, '-MOZ- prefix keyframes');
|
|
|
|
test(function(t) {
|
|
addStyle(t,
|
|
{ '@-webkit-KEYFRAMES anim': 'from,to { color: rgb(0, 255, 0); }' });
|
|
|
|
var div = addDiv(t, { style: 'animation: anim 100s' });
|
|
|
|
assert_equals(getComputedStyle(div).color, 'rgb(0, 255, 0)');
|
|
}, '-webkit- prefix KEYFRAMES');
|
|
|
|
test(function(t) {
|
|
addStyle(t,
|
|
{ '@keyframes anim': 'from,to { color: rgb(0, 255, 0); }',
|
|
'@-webkit-keyframes anim': 'from,to { color: rgb(255, 0, 0); }' });
|
|
|
|
var div = addDiv(t, { style: 'animation: anim 100s' });
|
|
|
|
assert_equals(getComputedStyle(div).color, 'rgb(0, 255, 0)');
|
|
}, '-webkit-keyframes should not override earlier non-prefix keyframes');
|
|
|
|
test(function(t) {
|
|
addStyle(t,
|
|
{ '@keyframes anim': 'from,to { color: rgb(0, 255, 0); }',
|
|
'@-moz-keyframes anim': 'from,to { color: rgb(255, 0, 0); }' });
|
|
|
|
var div = addDiv(t, { style: 'animation: anim 100s' });
|
|
|
|
assert_equals(getComputedStyle(div).color, 'rgb(0, 255, 0)');
|
|
}, '-moz-keyframes should not override earlier non-prefix keyframes');
|
|
|
|
test(function(t) {
|
|
addStyle(t,
|
|
{ '@-moz-keyframes anim': 'from,to { color: rgb(255, 0, 0); }',
|
|
'@keyframes anim': 'from,to { color: rgb(0, 255, 0); }' });
|
|
|
|
var div = addDiv(t, { style: 'animation: anim 100s' });
|
|
|
|
assert_equals(getComputedStyle(div).color, 'rgb(0, 255, 0)');
|
|
}, 'non-prefix keyframes should override earlier -moz-keyframes');
|
|
|
|
test(function(t) {
|
|
addStyle(t,
|
|
{ '@-webkit-keyframes anim': 'from,to { color: rgb(255, 0, 0); }',
|
|
'@keyframes anim': 'from,to { color: rgb(0, 255, 0); }' });
|
|
|
|
var div = addDiv(t, { style: 'animation: anim 100s' });
|
|
|
|
assert_equals(getComputedStyle(div).color, 'rgb(0, 255, 0)');
|
|
}, 'non-prefix keyframes should override earlier -webkit-keyframes');
|
|
|
|
test(function(t) {
|
|
addStyle(t,
|
|
{ '@-webkit-keyframes anim': 'from,to { color: rgb(255, 0, 0); }',
|
|
'@-moz-keyframes anim': 'from,to { color: rgb(0, 255, 0); }' });
|
|
|
|
var div = addDiv(t, { style: 'animation: anim 100s' });
|
|
|
|
assert_equals(getComputedStyle(div).color, 'rgb(0, 255, 0)');
|
|
|
|
addStyle(t,
|
|
{ '@-moz-keyframes anim2': 'from,to { color: rgb(255, 0, 0); }',
|
|
'@-webkit-keyframes anim2': 'from,to { color: rgb(0, 255, 0); }' });
|
|
|
|
var div = addDiv(t, { style: 'animation: anim2 100s' });
|
|
|
|
assert_equals(getComputedStyle(div).color, 'rgb(0, 255, 0)');
|
|
}, 'last prefixed keyframes should override earlier prefixed keyframes');
|
|
</script>
|