diff options
| author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-07 19:33:14 +0000 |
|---|---|---|
| committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-07 19:33:14 +0000 |
| commit | 36d22d82aa202bb199967e9512281e9a53db42c9 (patch) | |
| tree | 105e8c98ddea1c1e4784a60a5a6410fa416be2de /layout/style/test/test_keyframes_vendor_prefix.html | |
| parent | Initial commit. (diff) | |
| download | firefox-esr-upstream.tar.xz firefox-esr-upstream.zip | |
Adding upstream version 115.7.0esr.upstream/115.7.0esrupstream
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'layout/style/test/test_keyframes_vendor_prefix.html')
| -rw-r--r-- | layout/style/test/test_keyframes_vendor_prefix.html | 167 |
1 files changed, 167 insertions, 0 deletions
diff --git a/layout/style/test/test_keyframes_vendor_prefix.html b/layout/style/test/test_keyframes_vendor_prefix.html new file mode 100644 index 0000000000..4463bd259a --- /dev/null +++ b/layout/style/test/test_keyframes_vendor_prefix.html @@ -0,0 +1,167 @@ +<!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> |