layout/style/test/test_keyframes_vendor_prefix.html
author J. Ryan Stinnett <jryans@gmail.com>
Wed, 12 Jul 2017 13:03:15 -0500
changeset 368953 8b7a40e98c28abb637af78daf0a85de7d7461a81
parent 366195 e6dfe16f777b4363fd4c4f76e5a9022dfe357ab5
child 420464 9791b3b0efc940d1ec5fa07d3e1dd82222135b42
permissions -rw-r--r--
Bug 1380082 - Don't Stylo check pref directly in tests. r=xidorn Stylo might be enabled by either env var or pref. Use the existing DOMWindowUtils method to test for Stylo instead of the pref to get an accurate value. MozReview-Commit-ID: 8p22xCBjHjo

<!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;
}

const isStylo = SpecialPowers.DOMWindowUtils.isStyledByServo;

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) {
  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>