зеркало из https://github.com/mozilla/gecko-dev.git
Bug 1356779 - Add tests for interaction between prefixed and non-prefixed @keyframes rules with the same name. r=dholbert
MozReview-Commit-ID: KxP53Ha5eEX --HG-- extra : rebase_source : d6ca4f3b6da8a0b25e2bb18bdc081feff9309513
This commit is contained in:
Hiroyuki Ikezoe
Родитель
3cf4134597
Коммит
6f8d99bd34
|
|
@ -224,6 +224,7 @@ skip-if = toolkit == 'android'
|
||||||
skip-if = toolkit == 'android'
|
skip-if = toolkit == 'android'
|
||||||
[test_initial_storage.html]
|
[test_initial_storage.html]
|
||||||
[test_keyframes_rules.html]
|
[test_keyframes_rules.html]
|
||||||
|
[test_keyframes_vendor_prefix.html]
|
||||||
[test_load_events_on_stylesheets.html]
|
[test_load_events_on_stylesheets.html]
|
||||||
[test_logical_properties.html]
|
[test_logical_properties.html]
|
||||||
[test_media_queries.html]
|
[test_media_queries.html]
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,193 @@
|
||||||
|
<!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;
|
||||||
|
}
|
||||||
|
|
||||||
|
var isStylo = false;
|
||||||
|
// 'layout.css.servo.enabled' is not yet defined on gecko, so we need a try
|
||||||
|
// block.
|
||||||
|
try {
|
||||||
|
isStylo = SpecialPowers.getBoolPref('layout.css.servo.enabled');
|
||||||
|
} catch(e) {
|
||||||
|
}
|
||||||
|
|
||||||
|
test(function(t) {
|
||||||
|
addStyle(t,
|
||||||
|
{ 'dummy': '', // XXX bug 1336863 hackaround: a single insertRule is broken
|
||||||
|
// on stylo.
|
||||||
|
'@-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,
|
||||||
|
{ 'dummy': '', // XXX bug 1336863 hackaround, as above.
|
||||||
|
'@-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,
|
||||||
|
{ 'dummy': '', // XXX bug 1336863 hackaround, as above.
|
||||||
|
'@-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,
|
||||||
|
{ 'dummy': '', // XXX bug 1336863 hackaround, as above.
|
||||||
|
'@-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,
|
||||||
|
{ 'dummy': '', // XXX bug 1336863 hackaround, as above.
|
||||||
|
'@-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) {
|
||||||
|
if (!isStylo) {
|
||||||
|
// FIXME: Bug 1312918: later prefixed rule incorrectly overrides earlier
|
||||||
|
// non-prefixed on gecko.
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
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) {
|
||||||
|
if (!isStylo) {
|
||||||
|
// FIXME: Bug 1312918: later prefixed rule incorrectly overrides earlier
|
||||||
|
// non-prefixed on gecko.
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
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>
|
||||||
Загрузка…
Ссылка в новой задаче