Bug 1260983 - Add tests for changes to effect value context; r=heycam
authorBrian Birtles <birtles@gmail.com>
Fri, 01 Apr 2016 11:07:12 +0900
changeset 316360 b5e79510a9b0878d167de5dd725d49937bbca9ed
parent 316359 357d4ede29718ebe1933892920640c7015355c18
child 316361 eeec06429b37d3f174d73f57a0dd8cf36f94d787
push id9480
push userjlund@mozilla.com
push dateMon, 25 Apr 2016 17:12:58 +0000
treeherdermozilla-aurora@0d6a91c76a9e [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersheycam
bugs1260983
milestone48.0a1
Bug 1260983 - Add tests for changes to effect value context; r=heycam MozReview-Commit-ID: JuTRERHU4xl
testing/web-platform/meta/MANIFEST.json
testing/web-platform/meta/web-animations/animation-model/keyframes/effect-value-context.html.ini
testing/web-platform/tests/web-animations/animation-model/keyframes/effect-value-context.html
--- a/testing/web-platform/meta/MANIFEST.json
+++ b/testing/web-platform/meta/MANIFEST.json
@@ -28393,16 +28393,20 @@
         "path": "web-animations/animation-effect-timing/delay.html",
         "url": "/web-animations/animation-effect-timing/delay.html"
       },
       {
         "path": "web-animations/animation-effect-timing/direction.html",
         "url": "/web-animations/animation-effect-timing/direction.html"
       },
       {
+        "path": "web-animations/animation-model/keyframes/effect-value-context.html",
+        "url": "/web-animations/animation-model/keyframes/effect-value-context.html"
+      },
+      {
         "path": "web-animations/animation-effect-timing/duration.html",
         "url": "/web-animations/animation-effect-timing/duration.html"
       },
       {
         "path": "web-animations/animation-effect-timing/endDelay.html",
         "url": "/web-animations/animation-effect-timing/endDelay.html"
       },
       {
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/meta/web-animations/animation-model/keyframes/effect-value-context.html.ini
@@ -0,0 +1,6 @@
+[effect-value-context.html]
+  type: testharness
+  [Effect values reflect changes to font-size when computed style is not immediately flushed]
+    expected: FAIL
+    bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1254424
+
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/web-animations/animation-model/keyframes/effect-value-context.html
@@ -0,0 +1,86 @@
+<!DOCTYPE html>
+<meta charset=utf-8>
+<title>Tests that property values respond to changes to their context</title>
+<link rel="help" href="https://w3c.github.io/web-animations/#keyframes-section">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="../../testcommon.js"></script>
+<link rel="stylesheet" href="/resources/testharness.css">
+<body>
+<div id="log"></div>
+<script>
+
+test(function(t) {
+  var div = createDiv(t);
+  div.style.fontSize = '10px';
+  var animation = div.animate([ { marginLeft: '10em' },
+                                { marginLeft: '20em' } ], 1000);
+  animation.currentTime = 500;
+  assert_equals(getComputedStyle(div).marginLeft, '150px',
+                'Effect value before updating font-size');
+  div.style.fontSize = '20px';
+  assert_equals(getComputedStyle(div).marginLeft, '300px',
+                'Effect value after updating font-size');
+}, 'Effect values reflect changes to font-size on element');
+
+test(function(t) {
+  var parentDiv = createDiv(t);
+  var div = createDiv(t);
+  parentDiv.appendChild(div);
+  parentDiv.style.fontSize = '10px';
+
+  var animation = div.animate([ { marginLeft: '10em' },
+                                { marginLeft: '20em' } ], 1000);
+  animation.currentTime = 500;
+  assert_equals(getComputedStyle(div).marginLeft, '150px',
+                'Effect value before updating font-size on parent element');
+  parentDiv.style.fontSize = '20px';
+  assert_equals(getComputedStyle(div).marginLeft, '300px',
+                'Effect value after updating font-size on parent element');
+}, 'Effect values reflect changes to font-size on parent element');
+
+promise_test(function(t) {
+  var parentDiv = createDiv(t);
+  var div = createDiv(t);
+  parentDiv.appendChild(div);
+  parentDiv.style.fontSize = '10px';
+  var animation = div.animate([ { marginLeft: '10em' },
+                                { marginLeft: '20em' } ], 1000);
+
+  animation.pause();
+  animation.currentTime = 500;
+  parentDiv.style.fontSize = '20px';
+
+  return animation.ready.then(function() {
+    assert_equals(getComputedStyle(div).marginLeft, '300px',
+                  'Effect value after updating font-size on parent element');
+  });
+}, 'Effect values reflect changes to font-size when computed style is not'
+   + ' immediately flushed');
+
+promise_test(function(t) {
+  var divWith10pxFontSize = createDiv(t);
+  divWith10pxFontSize.style.fontSize = '10px';
+  var divWith20pxFontSize = createDiv(t);
+  divWith20pxFontSize.style.fontSize = '20px';
+
+  var div = createDiv(t);
+  div.remove(); // Detach
+  var animation = div.animate([ { marginLeft: '10em' },
+                                { marginLeft: '20em' } ], 1000);
+  animation.pause();
+
+  return animation.ready.then(function() {
+    animation.currentTime = 500;
+
+    divWith10pxFontSize.appendChild(div);
+    assert_equals(getComputedStyle(div).marginLeft, '150px',
+                  'Effect value after attaching to font-size:10px parent');
+    divWith20pxFontSize.appendChild(div);
+    assert_equals(getComputedStyle(div).marginLeft, '300px',
+                  'Effect value after attaching to font-size:20px parent');
+  });
+}, 'Effect values reflect changes to font-size from reparenting');
+
+</script>
+</body>