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 330457 b5e79510a9b0878d167de5dd725d49937bbca9ed
parent 330456 357d4ede29718ebe1933892920640c7015355c18
child 330458 eeec06429b37d3f174d73f57a0dd8cf36f94d787
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
bugs1260983
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 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>