Web Animations - responsive interpolation

LayoutTests/web-animations-api/animations-responsive-backgroundSize.html

Index: LayoutTests/web-animations-api/animations-responsive-backgroundSize.html
diff --git a/LayoutTests/web-animations-api/animations-responsive-to-inherited-change.html b/LayoutTests/web-animations-api/animations-responsive-backgroundSize.html
similarity index 54%
copy from LayoutTests/web-animations-api/animations-responsive-to-inherited-change.html
copy to LayoutTests/web-animations-api/animations-responsive-backgroundSize.html
index febd195fbdd7bc9d7177bb22219541e42f9ba5be..59557d7fc5ee2c236f0c0b1b28f972e12cf06236 100644
--- a/LayoutTests/web-animations-api/animations-responsive-to-inherited-change.html
+++ b/LayoutTests/web-animations-api/animations-responsive-backgroundSize.html
@@ -3,26 +3,20 @@
 <script src="../resources/testharnessreport.js"></script>
 
 <div id='container'>
-    <div id='element'></div>
+<div id='element'></div>
 </div>
 
 <script>
-
-var container = document.getElementById('container');
 var element = document.getElementById('element');
-
-var keyframes = [
-    {fontSize: 'inherit', offset: 0},
-    {fontSize: '20px', offset: 1}
-];
+var container = document.getElementById('container');
 
 test(function() {
-    container.style.fontSize = '10px';
-    var player = element.animate(keyframes, 10);
+    container.style.fontSize = '50px';
+    var player = element.animate([{backgroundSize: '300px 30px'}, {backgroundSize: '10em 1em'}], 10);
     player.pause();
     player.currentTime = 5;
-    container.style.fontSize = '30px';
-    assert_equals(getComputedStyle(element).fontSize, '25px');
-}, 'Font size responsive to inherited changes');
+    container.style.fontSize = '10px';
+    assert_equals(getComputedStyle(element).backgroundSize, '200px 20px');
+}, 'Border image width responsive to font size changes');
 
 </script>