Bug 1264396 - Don't allow animation of 'display' property; r=heycam
authorBrian Birtles <birtles@gmail.com>
Fri, 15 Apr 2016 13:18:12 +0900
changeset 331211 940293404626c9f142d4b87668840da803725e48
parent 331210 ee21e163344b3bc82d060e790ab97a9318b8c4b3
child 331212 c29e1bedf682439dc63eef18a4e63ca00d7a34e1
push id6048
push userkmoir@mozilla.com
push dateMon, 06 Jun 2016 19:02:08 +0000
treeherdermozilla-beta@46d72a56c57d [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersheycam
bugs1264396
milestone48.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1264396 - Don't allow animation of 'display' property; r=heycam MozReview-Commit-ID: HOVHXfoFv5l
layout/style/crashtests/1264396-1.html
layout/style/crashtests/crashtests.list
layout/style/nsCSSPropList.h
testing/web-platform/meta/MANIFEST.json
testing/web-platform/meta/web-animations/animation-model/animation-types/not-animatable.html.ini
testing/web-platform/tests/web-animations/animation-model/animation-types/not-animatable.html
new file mode 100644
--- /dev/null
+++ b/layout/style/crashtests/1264396-1.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+<meta charset="utf-8" />
+<style>
+@keyframes bug {
+  from {display:none}
+  to {display:inline-block}
+}
+body {
+  animation-name: bug;
+  animation-duration: 1s;
+}
+</style>
+</html>
--- a/layout/style/crashtests/crashtests.list
+++ b/layout/style/crashtests/crashtests.list
@@ -133,12 +133,13 @@ load 1223694-1.html
 load 1226400-1.html
 load 1227501-1.html
 load 1230408-1.html
 load 1233135-1.html
 load 1233135-2.html
 load 1238660-1.html
 load 1245260-1.html
 load 1247865-1.html
+load 1264396-1.html
 load border-image-visited-link.html
 load font-face-truncated-src.html 
 load large_border_image_width.html
 load long-url-list-stack-overflow.html
--- a/layout/style/nsCSSPropList.h
+++ b/layout/style/nsCSSPropList.h
@@ -1655,17 +1655,17 @@ CSS_PROP_DISPLAY(
         // This is allowed because we need to make the placeholder
         // pseudo-element an inline-block in the UA stylesheet. It is a block
         // by default.
         CSS_PROPERTY_APPLIES_TO_PLACEHOLDER,
     "",
     VARIANT_HK,
     kDisplayKTable,
     offsetof(nsStyleDisplay, mDisplay),
-    eStyleAnimType_EnumU8)
+    eStyleAnimType_None)
 CSS_PROP_SVGRESET(
     dominant-baseline,
     dominant_baseline,
     DominantBaseline,
     CSS_PROPERTY_PARSE_VALUE,
     "",
     VARIANT_HK,
     kDominantBaselineKTable,
--- a/testing/web-platform/meta/MANIFEST.json
+++ b/testing/web-platform/meta/MANIFEST.json
@@ -28765,16 +28765,20 @@
         "path": "web-animations/animation-effect-timing/iterations.html",
         "url": "/web-animations/animation-effect-timing/iterations.html"
       },
       {
         "path": "web-animations/animation-model/animation-types/discrete-animation.html",
         "url": "/web-animations/animation-model/animation-types/discrete-animation.html"
       },
       {
+        "path": "web-animations/animation-model/animation-types/not-animatable.html",
+        "url": "/web-animations/animation-model/animation-types/not-animatable.html"
+      },
+      {
         "path": "web-animations/animation-timeline/document-timeline.html",
         "url": "/web-animations/animation-timeline/document-timeline.html"
       },
       {
         "path": "web-animations/animation-timeline/idlharness.html",
         "url": "/web-animations/animation-timeline/idlharness.html"
       },
       {
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/meta/web-animations/animation-model/animation-types/not-animatable.html.ini
@@ -0,0 +1,10 @@
+[not-animatable.html]
+  type: testharness
+  [CSS animations and CSS transitions properties cannot be animated using property-indexed notation]
+    expected: FAIL
+    bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1264822
+
+  [CSS animations and CSS transitions properties cannot be animated using a sequence of keyframes]
+    expected: FAIL
+    bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1264822
+
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/web-animations/animation-model/animation-types/not-animatable.html
@@ -0,0 +1,120 @@
+<!DOCTYPE html>
+<meta charset=utf-8>
+<title>Tests for not animatable properties</title>
+<link rel="help" href="https://w3c.github.io/web-animations/#not-animatable-section">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="../../testcommon.js"></script>
+<body>
+<div id="log"></div>
+<script>
+'use strict';
+
+test(function(t) {
+  var div = createDiv(t);
+  var anim = div.animate({ display: [ 'inline', 'inline-block' ] }, 1000);
+
+  assert_equals(anim.effect.getFrames().length, 0,
+                'Animation specified using property-indexed notation but'
+                + ' consisting of only non-animatable properties should not'
+                + ' contain any keyframes');
+}, '\'display\' property cannot be animated using property-indexed notation');
+
+test(function(t) {
+  var div = createDiv(t);
+  var anim = div.animate([ { display: 'inline' }, { display: 'inline-block' } ],
+                         1000);
+
+  assert_equals(anim.effect.getFrames().length, 2,
+                'Animation specified using a keyframe sequence where each'
+                + ' keyframe contains only non-animatable properties should'
+                + ' return an equal number of (empty) keyframes');
+  assert_false(anim.effect.getFrames()[0].hasOwnProperty('display'),
+               'Initial keyframe should not have the \'display\' property');
+  assert_false(anim.effect.getFrames()[1].hasOwnProperty('display'),
+               'Final keyframe should not have the \'display\' property');
+}, '\'display\' property cannot be animated using a keyframe sequence');
+
+test(function(t) {
+  var properties = {
+    // CSS Animations properties
+    animation:                [ 'anim 1s', 'anim 2s' ],
+    animationName:            [ 'abc', 'xyz' ],
+    animationTimingFunction:  [ 'ease', 'steps(2)' ],
+    animationDelay:           [ '1s', '2s' ],
+    animationIterationCount:  [ 1, 2 ],
+    animationDirection:       [ 'normal', 'reverse' ],
+    animationFillMode:        [ 'forwards', 'backwards' ],
+    animationPlayState:       [ 'paused', 'running' ],
+
+    // CSS Transitions properties
+    transition:               [ 'all 1s', 'all 2s' ],
+    transitionDelay:          [ '1s', '2s' ],
+    transitionDuration:       [ '1s', '2s' ],
+    transitionProperty:       [ 'all', 'opacity' ],
+    transitionTimingFunction: [ 'ease', 'ease-out' ]
+  };
+
+  var div = createDiv(t);
+  var anim = div.animate(properties, 1000);
+
+  assert_equals(anim.effect.getFrames().length, 0,
+                'Animation specified using property-indexed notation but'
+                + ' consisting of only non-animatable properties should not'
+                + ' contain any keyframes');
+}, 'CSS animations and CSS transitions properties cannot be animated using'
+   + ' property-indexed notation');
+
+test(function(t) {
+  var frames = [
+    {
+      animation:                'anim 1s',
+      animationName:            'abc',
+      animationTimingFunction:  'ease',
+      animationDelay:           '1s',
+      animationIterationCount:  1,
+      animationDirection:       'normal',
+      animationFillMode:        'forwards',
+      animationPlayState:       'paused',
+      transition:               'all 1s',
+      transitionDelay:          '1s',
+      transitionDuration:       '1s',
+      transitionProperty:       'opacity',
+      transitionTimingFunction: 'ease'
+    },
+    {
+      animation:                'anim 2s',
+      animationName:            'xyz',
+      animationTimingFunction:  'steps(2)',
+      animationDelay:           '2s',
+      animationIterationCount:  2,
+      animationDirection:       'reverse',
+      animationFillMode:        'backwards',
+      animationPlayState:       'running',
+      transition:               'all 2s',
+      transitionDelay:          '2s',
+      transitionDuration:       '2s',
+      transitionProperty:       'all',
+      transitionTimingFunction: 'ease-out'
+    }
+  ];
+  var defaultKeyframeProperties = [ 'computedOffset', 'easing', 'offset' ];
+
+  var div = createDiv(t);
+  var anim = div.animate(frames, 1000);
+
+  assert_equals(anim.effect.getFrames().length, 2,
+                'Animation specified using a keyframe sequence where each'
+                + ' keyframe contains only non-animatable properties should'
+                + ' return an equal number of (empty) keyframes');
+  assert_array_equals(Object.keys(anim.effect.getFrames()[0]),
+                      defaultKeyframeProperties,
+                      'Initial keyframe should not contain any properties other'
+                      + ' than the default keyframe properties');
+  assert_array_equals(Object.keys(anim.effect.getFrames()[1]),
+                      defaultKeyframeProperties,
+                      'Final keyframe should not contain any properties other'
+                      + ' than the default keyframe properties');
+}, 'CSS animations and CSS transitions properties cannot be animated using'
+   + ' a sequence of keyframes');
+</script>