From 43a97878ce14b72f0981164f87f2e35e14151312 Mon Sep 17 00:00:00 2001
From: Daniel Baumann <daniel.baumann@progress-linux.org>
Date: Sun, 7 Apr 2024 11:22:09 +0200
Subject: Adding upstream version 110.0.1.

Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
---
 .../responsive/assorted-lengths.html               | 102 +++++++++
 .../responsive/backgroundPosition.html             |  25 ++
 .../web-animations/responsive/backgroundSize.html  |  22 ++
 .../web-animations/responsive/baselineShift.html   |  43 ++++
 .../responsive/borderImageWidth.html               |  22 ++
 .../web-animations/responsive/borderRadius.html    |  39 ++++
 .../web-animations/responsive/borderWidth.html     |  33 +++
 .../tests/web-animations/responsive/boxShadow.html |  30 +++
 .../tests/web-animations/responsive/clip.html      |  45 ++++
 .../web-animations/responsive/columnCount.html     |  32 +++
 .../tests/web-animations/responsive/columnGap.html |  49 ++++
 .../tests/web-animations/responsive/d.html         |  27 +++
 .../responsive/font-size-adjust.html               |  32 +++
 .../tests/web-animations/responsive/fontSize.html  |  72 ++++++
 .../web-animations/responsive/fontWeight.html      |  42 ++++
 .../web-animations/responsive/lineHeight.html      |  80 +++++++
 .../tests/web-animations/responsive/minHeight.html |  35 +++
 .../web-animations/responsive/offset-path.html     |  27 +++
 .../web-animations/responsive/offsetDistance.html  |  57 +++++
 .../web-animations/responsive/offsetRotate.html    |  43 ++++
 .../tests/web-animations/responsive/opacity.html   |  48 ++++
 .../web-animations/responsive/perspective.html     |  49 ++++
 .../web-animations/responsive/resources/block.html |  10 +
 .../tests/web-animations/responsive/rotate.html    |  22 ++
 .../tests/web-animations/responsive/rowGap.html    |  49 ++++
 .../web-animations/responsive/shapeMargin.html     |  24 ++
 .../web-animations/responsive/shapeOutside.html    |  59 +++++
 .../web-animations/responsive/strokeDasharray.html |  28 +++
 .../responsive/text-size-adjust.html               |  29 +++
 .../web-animations/responsive/textIndent.html      |  59 +++++
 .../web-animations/responsive/to-color-change.html | 253 +++++++++++++++++++++
 .../responsive/to-inherited-change.html            |  56 +++++
 .../web-animations/responsive/to-style-change.html |  44 ++++
 .../toggle-animated-iframe-visibility-ref.html     |  10 +
 .../toggle-animated-iframe-visibility.html         |  55 +++++
 .../tests/web-animations/responsive/transform.html |  22 ++
 .../tests/web-animations/responsive/translate.html |  22 ++
 .../web-animations/responsive/verticalAlign.html   |  22 ++
 38 files changed, 1718 insertions(+)
 create mode 100644 testing/web-platform/tests/web-animations/responsive/assorted-lengths.html
 create mode 100644 testing/web-platform/tests/web-animations/responsive/backgroundPosition.html
 create mode 100644 testing/web-platform/tests/web-animations/responsive/backgroundSize.html
 create mode 100644 testing/web-platform/tests/web-animations/responsive/baselineShift.html
 create mode 100644 testing/web-platform/tests/web-animations/responsive/borderImageWidth.html
 create mode 100644 testing/web-platform/tests/web-animations/responsive/borderRadius.html
 create mode 100644 testing/web-platform/tests/web-animations/responsive/borderWidth.html
 create mode 100644 testing/web-platform/tests/web-animations/responsive/boxShadow.html
 create mode 100644 testing/web-platform/tests/web-animations/responsive/clip.html
 create mode 100644 testing/web-platform/tests/web-animations/responsive/columnCount.html
 create mode 100644 testing/web-platform/tests/web-animations/responsive/columnGap.html
 create mode 100644 testing/web-platform/tests/web-animations/responsive/d.html
 create mode 100644 testing/web-platform/tests/web-animations/responsive/font-size-adjust.html
 create mode 100644 testing/web-platform/tests/web-animations/responsive/fontSize.html
 create mode 100644 testing/web-platform/tests/web-animations/responsive/fontWeight.html
 create mode 100644 testing/web-platform/tests/web-animations/responsive/lineHeight.html
 create mode 100644 testing/web-platform/tests/web-animations/responsive/minHeight.html
 create mode 100644 testing/web-platform/tests/web-animations/responsive/offset-path.html
 create mode 100644 testing/web-platform/tests/web-animations/responsive/offsetDistance.html
 create mode 100644 testing/web-platform/tests/web-animations/responsive/offsetRotate.html
 create mode 100644 testing/web-platform/tests/web-animations/responsive/opacity.html
 create mode 100644 testing/web-platform/tests/web-animations/responsive/perspective.html
 create mode 100644 testing/web-platform/tests/web-animations/responsive/resources/block.html
 create mode 100644 testing/web-platform/tests/web-animations/responsive/rotate.html
 create mode 100644 testing/web-platform/tests/web-animations/responsive/rowGap.html
 create mode 100644 testing/web-platform/tests/web-animations/responsive/shapeMargin.html
 create mode 100644 testing/web-platform/tests/web-animations/responsive/shapeOutside.html
 create mode 100644 testing/web-platform/tests/web-animations/responsive/strokeDasharray.html
 create mode 100644 testing/web-platform/tests/web-animations/responsive/text-size-adjust.html
 create mode 100644 testing/web-platform/tests/web-animations/responsive/textIndent.html
 create mode 100644 testing/web-platform/tests/web-animations/responsive/to-color-change.html
 create mode 100644 testing/web-platform/tests/web-animations/responsive/to-inherited-change.html
 create mode 100644 testing/web-platform/tests/web-animations/responsive/to-style-change.html
 create mode 100644 testing/web-platform/tests/web-animations/responsive/toggle-animated-iframe-visibility-ref.html
 create mode 100644 testing/web-platform/tests/web-animations/responsive/toggle-animated-iframe-visibility.html
 create mode 100644 testing/web-platform/tests/web-animations/responsive/transform.html
 create mode 100644 testing/web-platform/tests/web-animations/responsive/translate.html
 create mode 100644 testing/web-platform/tests/web-animations/responsive/verticalAlign.html

(limited to 'testing/web-platform/tests/web-animations/responsive')

diff --git a/testing/web-platform/tests/web-animations/responsive/assorted-lengths.html b/testing/web-platform/tests/web-animations/responsive/assorted-lengths.html
new file mode 100644
index 0000000000..50e01f766c
--- /dev/null
+++ b/testing/web-platform/tests/web-animations/responsive/assorted-lengths.html
@@ -0,0 +1,102 @@
+<!DOCTYPE html>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<div id='container'>
+<div id='element'></div>
+</div>
+
+<script>
+var element = document.getElementById('element');
+var container = document.getElementById('container');
+
+test(function() {
+    element.style.fontSize = '10px';
+    var player = element.animate([{bottom: '3em'}, {bottom: '5em'}], 10);
+    player.pause();
+    player.currentTime = 5;
+    element.style.fontSize = '20px';
+    assert_equals(getComputedStyle(element).bottom, '80px');
+}, 'bottom responsive to style changes');
+
+test(function() {
+    element.style.fontSize = '10px';
+    var player = element.animate([{height: '3em'}, {height: '5em'}], 10);
+    player.pause();
+    player.currentTime = 5;
+    element.style.fontSize = '20px';
+    assert_equals(getComputedStyle(element).height, '80px');
+}, 'height responsive to style changes');
+
+test(function() {
+    element.style.fontSize = '10px';
+    var player = element.animate([{letterSpacing: '3em'}, {letterSpacing: '5em'}], 10);
+    player.pause();
+    player.currentTime = 5;
+    element.style.fontSize = '20px';
+    assert_equals(getComputedStyle(element).letterSpacing, '80px');
+}, 'letterSpacing responsive to style changes');
+
+test(function() {
+    var player = element.animate([{letterSpacing: 'normal'}, {letterSpacing: 'normal'}], 10);
+    player.pause();
+    player.currentTime = 5;
+    assert_equals(getComputedStyle(element).letterSpacing, 'normal');
+}, 'letterSpacing can be normal');
+
+test(function() {
+    element.style.fontSize = '10px';
+    var player = element.animate([{marginRight: '3em'}, {marginRight: '5em'}], 10);
+    player.pause();
+    player.currentTime = 5;
+    element.style.fontSize = '20px';
+    assert_equals(getComputedStyle(element).marginRight, '80px');
+}, 'marginRight responsive to style changes');
+
+test(function() {
+    element.style.fontSize = '10px';
+    container.style.width = '300px';
+    var player = element.animate([{marginRight: '3em'}, {marginRight: '50%'}], 10);
+    player.pause();
+    player.currentTime = 5;
+    element.style.fontSize = '20px';
+    container.style.width = '600px';
+    assert_equals(getComputedStyle(element).marginRight, '180px');
+}, 'marginRight allows percentages');
+
+test(function() {
+    element.style.fontSize = '10px';
+    var player = element.animate([{outlineOffset: '3em'}, {outlineOffset: '5em'}], 10);
+    player.pause();
+    player.currentTime = 5;
+    element.style.outline = 'dashed thin';
+    element.style.fontSize = '20px';
+    assert_equals(getComputedStyle(element).outlineOffset, '80px');
+}, 'outlineOffset responsive to style changes');
+
+test(function() {
+    container.style.fontSize = '10px';
+    var player = container.animate([{perspective: '3em'}, {perspective: '5em'}], 10);
+    player.pause();
+    player.currentTime = 5;
+    container.style.fontSize = '20px';
+    assert_equals(getComputedStyle(container).perspective, '80px');
+}, 'perspective responsive to style changes');
+
+test(function() {
+    var player = element.animate([{perspective: 'none'}, {perspective: 'none'}], 10);
+    player.pause();
+    player.currentTime = 10;
+    assert_equals(getComputedStyle(element).perspective, 'none');
+}, 'perspective can be none');
+
+test(function() {
+    element.style.fontSize = '10px';
+    var player = element.animate([{wordSpacing: '3em'}, {wordSpacing: '5em'}], 10);
+    player.pause();
+    player.currentTime = 5;
+    element.style.fontSize = '20px';
+    assert_equals(getComputedStyle(element).wordSpacing, '80px');
+}, 'wordSpacing responsive to style changes');
+
+</script>
diff --git a/testing/web-platform/tests/web-animations/responsive/backgroundPosition.html b/testing/web-platform/tests/web-animations/responsive/backgroundPosition.html
new file mode 100644
index 0000000000..cd6c6991a3
--- /dev/null
+++ b/testing/web-platform/tests/web-animations/responsive/backgroundPosition.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<div id='container'>
+<div id='element'></div>
+</div>
+
+<script>
+var element = document.getElementById('element');
+var container = document.getElementById('container');
+
+test(function() {
+    element.style.fontSize = '10px';
+    var player = element.animate([
+        {backgroundPosition: '10% 1em'},
+        {backgroundPosition: '20% 5em'}],
+        10);
+    player.pause();
+    player.currentTime = 5;
+    element.style.fontSize = '20px';
+    assert_equals(getComputedStyle(element).backgroundPosition, '15% 60px');
+}, 'Background position responsive to style changes');
+
+</script>
diff --git a/testing/web-platform/tests/web-animations/responsive/backgroundSize.html b/testing/web-platform/tests/web-animations/responsive/backgroundSize.html
new file mode 100644
index 0000000000..1e9ccf96a1
--- /dev/null
+++ b/testing/web-platform/tests/web-animations/responsive/backgroundSize.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<div id='container'>
+<div id='element'></div>
+</div>
+
+<script>
+var element = document.getElementById('element');
+var container = document.getElementById('container');
+
+test(function() {
+    container.style.fontSize = '50px';
+    var player = element.animate([{backgroundSize: '300px 30px'}, {backgroundSize: '10em 1em'}], 10);
+    player.pause();
+    player.currentTime = 5;
+    container.style.fontSize = '10px';
+    assert_equals(getComputedStyle(element).backgroundSize, '200px 20px');
+}, 'Border image width responsive to font size changes');
+
+</script>
diff --git a/testing/web-platform/tests/web-animations/responsive/baselineShift.html b/testing/web-platform/tests/web-animations/responsive/baselineShift.html
new file mode 100644
index 0000000000..4ccaaf33ac
--- /dev/null
+++ b/testing/web-platform/tests/web-animations/responsive/baselineShift.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<svg>
+  <text>
+    <tspan id='container'>
+      <tspan id='element'></tspan>
+    </tspan>
+  </text>
+</svg>
+
+<script>
+var element = document.getElementById('element');
+var container = document.getElementById('container');
+
+test(function() {
+    element.style.fontSize = '10px';
+    var player = element.animate([{baselineShift: '3em'}, {baselineShift: '5em'}], 10);
+    player.pause();
+    player.currentTime = 5;
+    element.style.fontSize = '20px';
+    assert_equals(getComputedStyle(element).baselineShift, '80px');
+}, 'baselineShift responsive to style changes');
+
+test(function() {
+    container.style.baselineShift = 'sub';
+    var player = element.animate([{baselineShift: 'inherit'}, {baselineShift: '20px'}], 4000);
+    player.pause();
+
+    player.currentTime = 1000;
+    assert_equals(getComputedStyle(element).baselineShift, 'sub');
+
+    container.style.baselineShift = 'super';
+    assert_equals(getComputedStyle(element).baselineShift, 'super');
+
+    container.style.baselineShift = '100px';
+    assert_equals(getComputedStyle(element).baselineShift, '80px');
+
+    container.style.baselineShift = 'sub';
+    assert_equals(getComputedStyle(element).baselineShift, 'sub');
+}, 'baselineShift responsive to inherited changes');
+</script>
diff --git a/testing/web-platform/tests/web-animations/responsive/borderImageWidth.html b/testing/web-platform/tests/web-animations/responsive/borderImageWidth.html
new file mode 100644
index 0000000000..4b832889bd
--- /dev/null
+++ b/testing/web-platform/tests/web-animations/responsive/borderImageWidth.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<div id='container'>
+<div id='element'></div>
+</div>
+
+<script>
+var element = document.getElementById('element');
+var container = document.getElementById('container');
+
+test(function() {
+    container.style.fontSize = '50px';
+    var player = element.animate([{borderImageWidth: '300px 30px'}, {borderImageWidth: '10em 1em'}], 10);
+    player.pause();
+    player.currentTime = 5;
+    container.style.fontSize = '10px';
+    assert_equals(getComputedStyle(element).borderImageWidth, '200px 20px');
+}, 'Border image width responsive to font size changes');
+
+</script>
diff --git a/testing/web-platform/tests/web-animations/responsive/borderRadius.html b/testing/web-platform/tests/web-animations/responsive/borderRadius.html
new file mode 100644
index 0000000000..c59696ec90
--- /dev/null
+++ b/testing/web-platform/tests/web-animations/responsive/borderRadius.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<div id='element'></div>
+<script>
+
+var element = document.getElementById('element');
+
+test(function() {
+    var keyframes = [
+        {borderTopLeftRadius: '8% 16%'},
+        {borderTopLeftRadius: '12% 24%'}
+    ];
+
+    element.style.width = '100';
+    element.style.height = '200';
+    var player = element.animate(keyframes, 10);
+    player.pause();
+    player.currentTime = 5;
+    element.style.width = '300';
+    element.style.height = '600';
+    assert_equals(getComputedStyle(element).borderTopLeftRadius, '10% 20%');
+}, 'Border radius percentages are supported');
+
+test(function() {
+    var keyframes = [
+        {borderTopLeftRadius: '8em 16em'},
+        {borderTopLeftRadius: '12em 24em'}
+    ];
+
+    element.style.fontSize = '10px';
+    var player = element.animate(keyframes, 10);
+    player.pause();
+    player.currentTime = 5;
+    element.style.fontSize = '20px';
+    assert_equals(getComputedStyle(element).borderTopLeftRadius, '200px 400px');
+}, 'Border radius lengths respond to style changes');
+
+</script>
diff --git a/testing/web-platform/tests/web-animations/responsive/borderWidth.html b/testing/web-platform/tests/web-animations/responsive/borderWidth.html
new file mode 100644
index 0000000000..090d9a185a
--- /dev/null
+++ b/testing/web-platform/tests/web-animations/responsive/borderWidth.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<div id='container'>
+<div id='element'></div>
+</div>
+
+<script>
+var element = document.getElementById('element');
+var container = document.getElementById('container');
+
+test(function() {
+    element.style.fontSize = '10px';
+    element.style.border = 'none';
+    var player = element.animate([{borderBottomWidth: '300px'}, {borderBottomWidth: '10em'}], 10);
+    player.pause();
+    player.currentTime = 5;
+    element.style.border = 'solid';
+    assert_equals(getComputedStyle(element).borderBottomWidth, '200px');
+}, 'Border width responsive to border style changes');
+
+test(function() {
+    element.style.fontSize = '50px';
+    element.style.border = 'solid';
+    var player = element.animate([{borderBottomWidth: '300px'}, {borderBottomWidth: '10em'}], 10);
+    player.pause();
+    player.currentTime = 5;
+    element.style.fontSize = '10px';
+    assert_equals(getComputedStyle(element).borderBottomWidth, '200px');
+}, 'Border width responsive to font size changes');
+
+</script>
diff --git a/testing/web-platform/tests/web-animations/responsive/boxShadow.html b/testing/web-platform/tests/web-animations/responsive/boxShadow.html
new file mode 100644
index 0000000000..bd1911132d
--- /dev/null
+++ b/testing/web-platform/tests/web-animations/responsive/boxShadow.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<div id='container'>
+    <div id='element'></div>
+</div>
+<script>
+
+var container = document.getElementById('container');
+var element = document.getElementById('element');
+
+test(function() {
+    container.style.fontSize = '10px';
+    container.style.color = 'red';
+
+    var keyframes = [
+        {boxShadow: '10em 10em currentColor'},
+        {boxShadow: '10em 10em currentColor'}
+    ];
+    var player = element.animate(keyframes, 10);
+    player.pause();
+    player.currentTime = 5;
+
+    var boxShadow = getComputedStyle(element).boxShadow;
+    container.style.fontSize = '20px';
+    container.style.color = 'green';
+    assert_not_equals(getComputedStyle(element).boxShadow, boxShadow);
+}, 'boxShadow responsive to style changes');
+
+</script>
diff --git a/testing/web-platform/tests/web-animations/responsive/clip.html b/testing/web-platform/tests/web-animations/responsive/clip.html
new file mode 100644
index 0000000000..316e977576
--- /dev/null
+++ b/testing/web-platform/tests/web-animations/responsive/clip.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<div id='container'>
+    <div id='element'></div>
+</div>
+<script>
+
+var container = document.getElementById('container');
+var element = document.getElementById('element');
+
+test(function() {
+    var keyframes = [
+        {clip: 'inherit'},
+        {clip: 'rect(10px, 20px, 30px, 40px)'}
+    ];
+
+    container.style.clip = 'rect(10px, 20px, 30px, 40px)';
+    var player = element.animate(keyframes, 20);
+
+    player.pause();
+    player.currentTime = 5;
+    assert_equals(getComputedStyle(element).clip, 'rect(10px, 20px, 30px, 40px)');
+
+    container.style.clip = 'rect(10px, 20px, 430px, 440px)';
+    assert_equals(getComputedStyle(element).clip, 'rect(10px, 20px, 330px, 340px)');
+}, 'clip responsive to inherited clip changes');
+
+test(function() {
+    var keyframes = [
+        {clip: 'inherit'},
+        {clip: 'rect(10px, 20px, 30px, auto)'}
+    ];
+
+    container.style.clip = 'auto';
+    var player = element.animate(keyframes, 20);
+
+    player.pause();
+    player.currentTime = 5;
+    assert_equals(getComputedStyle(element).clip, 'auto');
+
+    container.style.clip = 'rect(410px, 420px, 30px, auto)';
+    assert_equals(getComputedStyle(element).clip, 'rect(310px, 320px, 30px, auto)');
+}, 'clip responsive to inherited clip changes from auto');
+</script>
diff --git a/testing/web-platform/tests/web-animations/responsive/columnCount.html b/testing/web-platform/tests/web-animations/responsive/columnCount.html
new file mode 100644
index 0000000000..c92d5cbf8f
--- /dev/null
+++ b/testing/web-platform/tests/web-animations/responsive/columnCount.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<div id='container'>
+    <div id='element'></div>
+</div>
+<script>
+
+var container = document.getElementById('container');
+var element = document.getElementById('element');
+
+test(function() {
+    var keyframes = [
+        {columnCount: 'inherit'},
+        {columnCount: '6'}
+    ];
+
+    container.style.columnCount = 'auto';
+    var player = element.animate(keyframes, 20);
+
+    player.pause();
+    player.currentTime = 5;
+    assert_equals(getComputedStyle(element).columnCount, 'auto');
+
+    container.style.columnCount = '2';
+    assert_equals(getComputedStyle(element).columnCount, '3');
+
+    player.currentTime = 10;
+    container.style.columnCount = '8';
+    assert_equals(getComputedStyle(element).columnCount, '7');
+}, 'column-count responsive to inherited column-count changes');
+</script>
diff --git a/testing/web-platform/tests/web-animations/responsive/columnGap.html b/testing/web-platform/tests/web-animations/responsive/columnGap.html
new file mode 100644
index 0000000000..43d44152cb
--- /dev/null
+++ b/testing/web-platform/tests/web-animations/responsive/columnGap.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<div id='container'>
+<div id='element'></div>
+</div>
+
+<script>
+var element = document.getElementById('element');
+var container = document.getElementById('container');
+
+test(function() {
+    element.style.fontSize = '10px';
+    var player = element.animate([{columnGap: '3em'}, {columnGap: '5em'}], 10);
+    player.pause();
+    player.currentTime = 5;
+    element.style.fontSize = '20px';
+    assert_equals(getComputedStyle(element).columnGap, '80px');
+}, 'column-gap responsive to style changes');
+
+test(function() {
+    element.style.fontSize = '10px';
+    var player = element.animate([{columnGap: '40px'}, {columnGap: 'calc(40px - 2em)'}], 10);
+    player.pause();
+
+    player.currentTime = 5;
+    element.style.fontSize = '40px';
+    assert_equals(getComputedStyle(element).columnGap, '20px');
+
+    player.currentTime = 7.5;
+    assert_equals(getComputedStyle(element).columnGap, '10px');
+}, 'column-gap clamped to 0px on keyframes');
+
+test(function() {
+    container.style.columnGap = 'normal';
+    var player = element.animate([{columnGap: 'inherit'}, {columnGap: '20px'}], 4000);
+    player.pause();
+
+    player.currentTime = 1000;
+    assert_equals(getComputedStyle(element).columnGap, 'normal');
+
+    container.style.columnGap = '100px';
+    assert_equals(getComputedStyle(element).columnGap, '80px');
+
+    container.style.columnGap = 'normal';
+    assert_equals(getComputedStyle(element).columnGap, 'normal');
+}, 'column-gap responsive to inherited changes');
+</script>
diff --git a/testing/web-platform/tests/web-animations/responsive/d.html b/testing/web-platform/tests/web-animations/responsive/d.html
new file mode 100644
index 0000000000..55c6c23a0e
--- /dev/null
+++ b/testing/web-platform/tests/web-animations/responsive/d.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<div id='container'>
+    <div id='element'></div>
+</div>
+<script>
+
+var container = document.getElementById('container');
+var element = document.getElementById('element');
+
+test(function() {
+    var keyframes = [
+        {d: 'inherit'},
+        {d: 'path("M 0 0 H 200")'}
+    ];
+
+    container.style.d = 'path("M 0 0 H 100")';
+    var player = element.animate(keyframes, 10);
+
+    player.pause();
+    player.currentTime = 5;
+    container.style.d = 'path("M 0 0 H 400")';
+    assert_equals(getComputedStyle(element).d, 'path("M 0 0 H 300")');
+}, 'd responsive to inherited d changes');
+
+</script>
diff --git a/testing/web-platform/tests/web-animations/responsive/font-size-adjust.html b/testing/web-platform/tests/web-animations/responsive/font-size-adjust.html
new file mode 100644
index 0000000000..282ec7fede
--- /dev/null
+++ b/testing/web-platform/tests/web-animations/responsive/font-size-adjust.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<div id='container'>
+    <div id='element'></div>
+</div>
+<script>
+
+var container = document.getElementById('container');
+var element = document.getElementById('element');
+
+test(function() {
+    var keyframes = [
+        {fontSizeAdjust: 'inherit'},
+        {fontSizeAdjust: '6'}
+    ];
+
+    container.style.fontSizeAdjust = 'none';
+    var player = element.animate(keyframes, 20);
+
+    player.pause();
+    player.currentTime = 5;
+    assert_equals(getComputedStyle(element).fontSizeAdjust, 'none');
+
+    container.style.fontSizeAdjust = '2';
+    assert_equals(getComputedStyle(element).fontSizeAdjust, '3');
+
+    player.currentTime = 10;
+    container.style.fontSizeAdjust = '8';
+    assert_equals(getComputedStyle(element).fontSizeAdjust, '7');
+}, 'font-size-adjust responsive to inherited font-size-adjust changes');
+</script>
diff --git a/testing/web-platform/tests/web-animations/responsive/fontSize.html b/testing/web-platform/tests/web-animations/responsive/fontSize.html
new file mode 100644
index 0000000000..d65aeacd46
--- /dev/null
+++ b/testing/web-platform/tests/web-animations/responsive/fontSize.html
@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<div id='container'>
+    <div id='element'></div>
+</div>
+<script>
+
+var container = document.getElementById('container');
+var element = document.getElementById('element');
+
+test(function() {
+    var keyframes = [
+        {fontSize: 'larger'},
+        {fontSize: 'larger'}
+    ];
+
+    container.style.fontSize = 'small';
+    var player = element.animate(keyframes, 10);
+    player.pause();
+    player.currentTime = 5;
+    fontSize = getComputedStyle(element).fontSize;
+    container.style.fontSize = 'medium';
+    assert_not_equals(getComputedStyle(element).fontSize, fontSize);
+}, 'Relative font size larger responsive to style changes');
+
+test(function() {
+    var keyframes = [
+        {fontSize: 'smaller'},
+        {fontSize: 'smaller'}
+    ];
+
+    container.style.fontSize = 'large';
+    var player = element.animate(keyframes, 10);
+    player.pause();
+    player.currentTime = 5;
+    fontSize = getComputedStyle(element).fontSize;
+    container.style.fontSize = 'medium';
+    assert_not_equals(getComputedStyle(element).fontSize, fontSize);
+}, 'Relative font size smaller responsive to style changes');
+
+test(function() {
+    var keyframes = [
+        {fontSize: 'medium'},
+        {fontSize: 'medium'}
+    ];
+
+    container.style.fontFamily = 'cursive';
+    var player = element.animate(keyframes, 10);
+    player.pause();
+    player.currentTime = 5;
+    fontSize = getComputedStyle(element).fontSize;
+    container.style.fontFamily = 'monospace';
+    assert_not_equals(getComputedStyle(element).fontSize, fontSize);
+}, 'Font size medium responsive to style changes');
+
+test(function() {
+    var keyframes = [
+        {fontSize: 'initial'},
+        {fontSize: 'initial'}
+    ];
+
+    container.style.fontFamily = 'monospace';
+    var player = element.animate(keyframes, 10);
+    player.pause();
+    player.currentTime = 5;
+    fontSize = getComputedStyle(element).fontSize;
+    container.style.fontFamily = 'serif';
+    assert_not_equals(getComputedStyle(element).fontSize, fontSize);
+}, 'Font size initial responsive to style changes');
+
+</script>
diff --git a/testing/web-platform/tests/web-animations/responsive/fontWeight.html b/testing/web-platform/tests/web-animations/responsive/fontWeight.html
new file mode 100644
index 0000000000..e8fbbae0e7
--- /dev/null
+++ b/testing/web-platform/tests/web-animations/responsive/fontWeight.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<div id='container'>
+    <div id='element'></div>
+</div>
+<script>
+
+var container = document.getElementById('container');
+var element = document.getElementById('element');
+
+test(function() {
+    var keyframes = [
+        {fontWeight: 'bolder'},
+        {fontWeight: 'bolder'}
+    ];
+
+    container.style.fontWeight = '100';
+    var player = element.animate(keyframes, 10);
+    player.pause();
+    player.currentTime = 5;
+    fontWeight = getComputedStyle(element).fontWeight;
+    container.style.fontWeight = '800';
+    assert_not_equals(getComputedStyle(element).fontWeight, fontWeight);
+}, 'Relative font weight bolder responsive to style changes');
+
+test(function() {
+    var keyframes = [
+        {fontWeight: 'lighter'},
+        {fontWeight: 'lighter'}
+    ];
+
+    container.style.fontWeight = '900';
+    var player = element.animate(keyframes, 10);
+    player.pause();
+    player.currentTime = 5;
+    fontWeight = getComputedStyle(element).fontWeight;
+    container.style.fontWeight = '200';
+    assert_not_equals(getComputedStyle(element).fontWeight, fontWeight);
+}, 'Relative font weight lighter responsive to style changes');
+
+</script>
diff --git a/testing/web-platform/tests/web-animations/responsive/lineHeight.html b/testing/web-platform/tests/web-animations/responsive/lineHeight.html
new file mode 100644
index 0000000000..03d45e54c1
--- /dev/null
+++ b/testing/web-platform/tests/web-animations/responsive/lineHeight.html
@@ -0,0 +1,80 @@
+<!DOCTYPE html>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<div id='container'>
+<div id='element'></div>
+</div>
+
+<script>
+var element = document.getElementById('element');
+var container = document.getElementById('container');
+
+test(function() {
+    element.style.fontSize = '10px';
+    var player = element.animate([{lineHeight: '3em'}, {lineHeight: '5em'}], 10);
+    player.pause();
+    player.currentTime = 5;
+    element.style.fontSize = '20px';
+    assert_equals(getComputedStyle(element).lineHeight, '80px');
+}, 'lineHeight responsive to style changes');
+
+test(function() {
+    element.style.fontSize = '10px';
+    var player = element.animate([{lineHeight: '40px'}, {lineHeight: 'calc(40px - 2em)'}], 10);
+    player.pause();
+
+    player.currentTime = 5;
+    element.style.fontSize = '40px';
+    assert_equals(getComputedStyle(element).lineHeight, '20px');
+
+    player.currentTime = 7.5;
+    assert_equals(getComputedStyle(element).lineHeight, '10px');
+}, 'lineHeight clamped to 0px on keyframes');
+
+test(function() {
+    container.style.lineHeight = 'normal';
+    var player = element.animate([{lineHeight: 'inherit'}, {lineHeight: '20px'}], 4000);
+    player.pause();
+
+    player.currentTime = 1000;
+    assert_equals(getComputedStyle(element).lineHeight, 'normal');
+
+    container.style.lineHeight = '100px';
+    assert_equals(getComputedStyle(element).lineHeight, '80px');
+
+    container.style.lineHeight = 'normal';
+    assert_equals(getComputedStyle(element).lineHeight, 'normal');
+}, 'lineHeight responsive to inherited changes from keyword');
+
+test(function() {
+    container.style.fontSize = '10px';
+    container.style.lineHeight = '1.0';
+    const expected = getComputedStyle(container).lineHeight;
+    var player = element.animate([{lineHeight: 'inherit'}, {lineHeight: '20px'}], 4000);
+    player.pause();
+
+    player.currentTime = 1000;
+    getComputedStyle(element).lineHeight;
+
+    container.style.lineHeight = '100px';
+    assert_equals(getComputedStyle(element).lineHeight, '80px');
+}, 'lineHeight responsive to inherited changes from number');
+
+test(function() {
+    container.style.fontSize = '10px';
+    container.style.lineHeight = '1';
+    var player = element.animate([{lineHeight: 'inherit'}, {lineHeight: '2'}], 4000);
+    player.pause();
+
+    player.currentTime = 1000;
+    const expected = getComputedStyle(element).lineHeight;
+
+    container.style.lineHeight = '97px';
+    assert_equals(getComputedStyle(element).lineHeight, '97px');
+
+    container.style.lineHeight = '1';
+    assert_equals(getComputedStyle(element).lineHeight, expected);
+}, 'lineHeight responsive to inherited changes from length');
+
+</script>
diff --git a/testing/web-platform/tests/web-animations/responsive/minHeight.html b/testing/web-platform/tests/web-animations/responsive/minHeight.html
new file mode 100644
index 0000000000..07474bc3f4
--- /dev/null
+++ b/testing/web-platform/tests/web-animations/responsive/minHeight.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<div id='container'>
+<div id='element'></div>
+</div>
+
+<script>
+var element = document.getElementById('element');
+var container = document.getElementById('container');
+
+test(function() {
+    element.style.fontSize = '10px';
+    var player = element.animate([{minHeight: '3em'}, {minHeight: '5em'}], 10);
+    player.pause();
+    player.currentTime = 5;
+    element.style.fontSize = '20px';
+    assert_equals(getComputedStyle(element).minHeight, '80px');
+}, 'minHeight responsive to style changes');
+
+test(function() {
+    element.style.fontSize = '10px';
+    var player = element.animate([{minHeight: '40px'}, {minHeight: 'calc(40px - 2em)'}], 10);
+    player.pause();
+
+    player.currentTime = 5;
+    element.style.fontSize = '40px';
+    assert_equals(getComputedStyle(element).minHeight, '20px');
+
+    player.currentTime = 7.5;
+    assert_equals(getComputedStyle(element).minHeight, '10px');
+}, 'minHeight clamped to 0px on keyframes');
+
+</script>
diff --git a/testing/web-platform/tests/web-animations/responsive/offset-path.html b/testing/web-platform/tests/web-animations/responsive/offset-path.html
new file mode 100644
index 0000000000..eff8ede60f
--- /dev/null
+++ b/testing/web-platform/tests/web-animations/responsive/offset-path.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<div id='container'>
+    <div id='element'></div>
+</div>
+<script>
+
+var container = document.getElementById('container');
+var element = document.getElementById('element');
+
+test(function() {
+    var keyframes = [
+        {offsetPath: 'inherit'},
+        {offsetPath: 'path("M 0 0 H 200")'}
+    ];
+
+    container.style.offsetPath = 'path("M 0 0 H 100")';
+    var player = element.animate(keyframes, 10);
+
+    player.pause();
+    player.currentTime = 5;
+    container.style.offsetPath = 'path("M 0 0 H 400")';
+    assert_equals(getComputedStyle(element).offsetPath, 'path("M 0 0 H 300")');
+}, 'offset-path responsive to inherited offset-path changes');
+
+</script>
diff --git a/testing/web-platform/tests/web-animations/responsive/offsetDistance.html b/testing/web-platform/tests/web-animations/responsive/offsetDistance.html
new file mode 100644
index 0000000000..d56da9c767
--- /dev/null
+++ b/testing/web-platform/tests/web-animations/responsive/offsetDistance.html
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<div id='container'>
+    <div id='element'></div>
+</div>
+<script>
+
+var container = document.getElementById('container');
+var element = document.getElementById('element');
+
+test(function() {
+    var keyframes = [
+        {offsetDistance: '4%'},
+        {offsetDistance: '12%'}
+    ];
+
+    element.style.width = '100';
+    element.style.height = '200';
+    var player = element.animate(keyframes, 20);
+    player.pause();
+    player.currentTime = 15;
+    element.style.width = '300';
+    element.style.height = '600';
+    assert_equals(getComputedStyle(element).offsetDistance, '10%');
+}, 'offsetDistance percentages are supported');
+
+test(function() {
+    var keyframes = [
+        {offsetDistance: '8em'},
+        {offsetDistance: '16em'}
+    ];
+
+    element.style.fontSize = '10px';
+    var player = element.animate(keyframes, 20);
+    player.pause();
+    player.currentTime = 5;
+    element.style.fontSize = '20px';
+    assert_equals(getComputedStyle(element).offsetDistance, '200px');
+}, 'offsetDistance lengths respond to style changes');
+
+test(function() {
+    var keyframes = [
+        {offsetDistance: 'inherit'},
+        {offsetDistance: '200px'}
+    ];
+
+    container.style.offsetDistance = '100px';
+    var player = element.animate(keyframes, 10);
+
+    player.pause();
+    player.currentTime = 5;
+
+    container.style.offsetDistance = '400px';
+    assert_equals(getComputedStyle(element).offsetDistance, '300px');
+}, 'offsetDistance responsive to inherited offsetDistance changes');
+</script>
diff --git a/testing/web-platform/tests/web-animations/responsive/offsetRotate.html b/testing/web-platform/tests/web-animations/responsive/offsetRotate.html
new file mode 100644
index 0000000000..f0957e15c5
--- /dev/null
+++ b/testing/web-platform/tests/web-animations/responsive/offsetRotate.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<div id='container'>
+    <div id='element'></div>
+</div>
+<script>
+
+var container = document.getElementById('container');
+var element = document.getElementById('element');
+
+test(function() {
+    var keyframes = [
+        {offsetRotate: 'inherit'},
+        {offsetRotate: 'auto 200deg'}
+    ];
+
+    container.style.offsetRotate = 'auto 100deg';
+    var player = element.animate(keyframes, 10);
+
+    player.pause();
+    player.currentTime = 5;
+    assert_equals(getComputedStyle(element).offsetRotate, 'auto 150deg');
+
+    container.style.offsetRotate = '400deg';
+    assert_equals(getComputedStyle(element).offsetRotate, 'auto 200deg');
+
+    container.style.offsetRotate = '400deg auto';
+    assert_equals(getComputedStyle(element).offsetRotate, 'auto 300deg');
+
+    container.style.offsetRotate = '800deg auto';
+    assert_equals(getComputedStyle(element).offsetRotate, 'auto 500deg');
+
+    container.style.offsetRotate = '400deg';
+    assert_equals(getComputedStyle(element).offsetRotate, 'auto 200deg');
+
+    container.style.offsetRotate = '800deg auto';
+    assert_equals(getComputedStyle(element).offsetRotate, 'auto 500deg');
+
+    container.style.offsetRotate = '400deg auto';
+    assert_equals(getComputedStyle(element).offsetRotate, 'auto 300deg');
+}, 'offsetRotate responsive to inherited offsetRotate changes');
+</script>
diff --git a/testing/web-platform/tests/web-animations/responsive/opacity.html b/testing/web-platform/tests/web-animations/responsive/opacity.html
new file mode 100644
index 0000000000..0bedfc879a
--- /dev/null
+++ b/testing/web-platform/tests/web-animations/responsive/opacity.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<div id='container'>
+    <div id='element'></div>
+</div>
+<script>
+
+'use strict';
+var container = document.getElementById('container');
+var element = document.getElementById('element');
+
+var properties = [
+    'fillOpacity',
+    'floodOpacity',
+    'opacity',
+    'shapeImageThreshold',
+    'stopOpacity',
+    'strokeOpacity',
+];
+
+for (var property of properties) {
+    test(function() {
+        var initialKeyframe = {};
+        initialKeyframe[property] = 'inherit';
+        var finalKeyframe = {};
+        finalKeyframe[property] = '0.5';
+        var keyframes = [ initialKeyframe, finalKeyframe ];
+
+        container.style[property] = 1;
+        var player = element.animate(keyframes, 10);
+
+        player.pause();
+        player.currentTime = 5;
+        assert_equals(getComputedStyle(element)[property], '0.75');
+
+        container.style[property] = 0.25;
+        assert_equals(getComputedStyle(element)[property], '0.375');
+
+        container.style[property] = -0.5; // clamps to 0
+        assert_equals(getComputedStyle(element)[property], '0.25');
+
+        container.style[property] = 2; // clamps to 1
+        assert_equals(getComputedStyle(element)[property], '0.75');
+    }, property + ' responsive to inherited changes');
+}
+
+</script>
diff --git a/testing/web-platform/tests/web-animations/responsive/perspective.html b/testing/web-platform/tests/web-animations/responsive/perspective.html
new file mode 100644
index 0000000000..f32b4dbad3
--- /dev/null
+++ b/testing/web-platform/tests/web-animations/responsive/perspective.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<div id='container'>
+<div id='element'></div>
+</div>
+
+<script>
+var element = document.getElementById('element');
+var container = document.getElementById('container');
+
+test(function() {
+    element.style.fontSize = '10px';
+    var player = element.animate([{perspective: '3em'}, {perspective: '5em'}], 10);
+    player.pause();
+    player.currentTime = 5;
+    element.style.fontSize = '20px';
+    assert_equals(getComputedStyle(element).perspective, '80px');
+}, 'perspective responsive to style changes');
+
+test(function() {
+    element.style.fontSize = '10px';
+    var player = element.animate([{perspective: '40px'}, {perspective: 'calc(40px - 2em)'}], 10);
+    player.pause();
+
+    player.currentTime = 5;
+    element.style.fontSize = '40px';
+    assert_equals(getComputedStyle(element).perspective, '20px');
+
+    player.currentTime = 7.5;
+    assert_equals(getComputedStyle(element).perspective, '10px');
+}, 'perspective clamped to 0px on keyframes');
+
+test(function() {
+    container.style.perspective = 'none';
+    var player = element.animate([{perspective: 'inherit'}, {perspective: '20px'}], 4000);
+    player.pause();
+
+    player.currentTime = 1000;
+    assert_equals(getComputedStyle(element).perspective, 'none');
+
+    container.style.perspective = '100px';
+    assert_equals(getComputedStyle(element).perspective, '80px');
+
+    container.style.perspective = 'none';
+    assert_equals(getComputedStyle(element).perspective, 'none');
+}, 'perspective responsive to inherited changes');
+</script>
diff --git a/testing/web-platform/tests/web-animations/responsive/resources/block.html b/testing/web-platform/tests/web-animations/responsive/resources/block.html
new file mode 100644
index 0000000000..8284055969
--- /dev/null
+++ b/testing/web-platform/tests/web-animations/responsive/resources/block.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<style>
+  .testBlock {
+    width: 100px;
+    height: 100px;
+    background: #00cc66;
+    border-top: 50px solid #ffff00;
+  }
+</style>
+<div class="testBlock" id="testBlock"></div>
\ No newline at end of file
diff --git a/testing/web-platform/tests/web-animations/responsive/rotate.html b/testing/web-platform/tests/web-animations/responsive/rotate.html
new file mode 100644
index 0000000000..b0e4213200
--- /dev/null
+++ b/testing/web-platform/tests/web-animations/responsive/rotate.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<div id='container'>
+<div id='element'></div>
+</div>
+
+<script>
+var element = document.getElementById('element');
+var container = document.getElementById('container');
+
+test(function() {
+    container.style.rotate = 'none';
+    var player = element.animate([{rotate: 'inherit'}, {rotate: '100deg'}], 10);
+    player.pause();
+    player.currentTime = 2;
+    container.style.rotate = '200deg';
+    assert_equals(getComputedStyle(element).rotate, '180deg');
+}, 'Rotate responsive to inherited rotate changes');
+
+</script>
diff --git a/testing/web-platform/tests/web-animations/responsive/rowGap.html b/testing/web-platform/tests/web-animations/responsive/rowGap.html
new file mode 100644
index 0000000000..b7dae62f23
--- /dev/null
+++ b/testing/web-platform/tests/web-animations/responsive/rowGap.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<div id='container'>
+<div id='element'></div>
+</div>
+
+<script>
+var element = document.getElementById('element');
+var container = document.getElementById('container');
+
+test(function() {
+    element.style.fontSize = '10px';
+    var player = element.animate([{rowGap: '3em'}, {rowGap: '5em'}], 10);
+    player.pause();
+    player.currentTime = 5;
+    element.style.fontSize = '20px';
+    assert_equals(getComputedStyle(element).rowGap, '80px');
+}, 'row-gap responsive to style changes');
+
+test(function() {
+    element.style.fontSize = '10px';
+    var player = element.animate([{rowGap: '40px'}, {rowGap: 'calc(40px - 2em)'}], 10);
+    player.pause();
+
+    player.currentTime = 5;
+    element.style.fontSize = '40px';
+    assert_equals(getComputedStyle(element).rowGap, '20px');
+
+    player.currentTime = 7.5;
+    assert_equals(getComputedStyle(element).rowGap, '10px');
+}, 'row-gap clamped to 0px on keyframes');
+
+test(function() {
+    container.style.rowGap = 'normal';
+    var player = element.animate([{rowGap: 'inherit'}, {rowGap: '20px'}], 4000);
+    player.pause();
+
+    player.currentTime = 1000;
+    assert_equals(getComputedStyle(element).rowGap, 'normal');
+
+    container.style.rowGap = '100px';
+    assert_equals(getComputedStyle(element).rowGap, '80px');
+
+    container.style.rowGap = 'normal';
+    assert_equals(getComputedStyle(element).rowGap, 'normal');
+}, 'row-gap responsive to inherited changes');
+</script>
diff --git a/testing/web-platform/tests/web-animations/responsive/shapeMargin.html b/testing/web-platform/tests/web-animations/responsive/shapeMargin.html
new file mode 100644
index 0000000000..02d6151ad0
--- /dev/null
+++ b/testing/web-platform/tests/web-animations/responsive/shapeMargin.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<div id='container'>
+<div id='element'></div>
+</div>
+
+<script>
+var element = document.getElementById('element');
+var container = document.getElementById('container');
+
+test(function() {
+    element.style.fontSize = '10px';
+    element.style.width = '200px';
+    var player = element.animate([{shapeMargin: '3em'}, {shapeMargin: '80%'}], 10);
+    player.pause();
+    player.currentTime = 5;
+    element.style.fontSize = '20px';
+    element.style.width = '100px';
+    assert_equals(getComputedStyle(element).shapeMargin, 'calc(40% + 30px)');
+}, 'shapeMargin responsive to style changes');
+
+</script>
diff --git a/testing/web-platform/tests/web-animations/responsive/shapeOutside.html b/testing/web-platform/tests/web-animations/responsive/shapeOutside.html
new file mode 100644
index 0000000000..2a54576a33
--- /dev/null
+++ b/testing/web-platform/tests/web-animations/responsive/shapeOutside.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<div id='container'>
+    <div id='element'></div>
+</div>
+<script>
+
+var container = document.getElementById('container');
+var element = document.getElementById('element');
+
+test(function() {
+    container.style.fontSize = '10px';
+
+    var keyframes = [
+        {shapeOutside: 'circle(10em at 50% 50%)'},
+        {shapeOutside: 'circle(10em at 50% 50%)'}
+    ];
+    var player = element.animate(keyframes, 10);
+    player.pause();
+    player.currentTime = 5;
+
+    var shapeOutside = getComputedStyle(element).shapeOutside;
+    container.style.fontSize = '20px';
+    assert_not_equals(getComputedStyle(element).shapeOutside, shapeOutside);
+}, 'shapeOutside responsive to style changes');
+
+test(function() {
+    var keyframes = [
+        {shapeOutside: 'inherit'},
+        {shapeOutside: 'circle(200px at 50% 50%)'}
+    ];
+
+    container.style.shapeOutside = 'circle(100px at 50% 50%)';
+    var player = element.animate(keyframes, 10);
+
+    player.pause();
+    player.currentTime = 5;
+    assert_equals(getComputedStyle(element).shapeOutside, 'circle(150px at 50% 50%)');
+
+    container.style.shapeOutside = 'inset(100%)';
+    assert_equals(getComputedStyle(element).shapeOutside, 'circle(200px at 50% 50%)');
+
+    container.style.shapeOutside = 'circle(400px at 50% 50%)';
+    assert_equals(getComputedStyle(element).shapeOutside, 'circle(300px at 50% 50%)');
+
+    container.style.shapeOutside = 'circle(800px at 50% 50%)';
+    assert_equals(getComputedStyle(element).shapeOutside, 'circle(500px at 50% 50%)');
+
+    container.style.shapeOutside = 'inset(100%)';
+    assert_equals(getComputedStyle(element).shapeOutside, 'circle(200px at 50% 50%)');
+
+    container.style.shapeOutside = 'circle(800px at 50% 50%)';
+    assert_equals(getComputedStyle(element).shapeOutside, 'circle(500px at 50% 50%)');
+
+    container.style.shapeOutside = 'circle(400px at 50% 50%)';
+    assert_equals(getComputedStyle(element).shapeOutside, 'circle(300px at 50% 50%)');
+}, 'shapeOutside responsive to inherited shapeOutside changes');
+</script>
diff --git a/testing/web-platform/tests/web-animations/responsive/strokeDasharray.html b/testing/web-platform/tests/web-animations/responsive/strokeDasharray.html
new file mode 100644
index 0000000000..a1ccb30e90
--- /dev/null
+++ b/testing/web-platform/tests/web-animations/responsive/strokeDasharray.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<div id='container'>
+    <div id='element'></div>
+</div>
+<script>
+
+var container = document.getElementById('container');
+var element = document.getElementById('element');
+
+test(function() {
+    container.style.fontSize = '10px';
+
+    var keyframes = [
+        {strokeDasharray: '10em 10em'},
+        {strokeDasharray: '10em 10em'}
+    ];
+    var player = element.animate(keyframes, 10);
+    player.pause();
+    player.currentTime = 5;
+
+    var strokeDasharray = getComputedStyle(element).strokeDasharray;
+    container.style.fontSize = '20px';
+    assert_not_equals(getComputedStyle(element).strokeDasharray, strokeDasharray);
+}, 'strokeDasharray responsive to style changes');
+
+</script>
diff --git a/testing/web-platform/tests/web-animations/responsive/text-size-adjust.html b/testing/web-platform/tests/web-animations/responsive/text-size-adjust.html
new file mode 100644
index 0000000000..203b067a77
--- /dev/null
+++ b/testing/web-platform/tests/web-animations/responsive/text-size-adjust.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<div id='container'>
+    <div id='element'></div>
+</div>
+<script>
+
+var container = document.getElementById('container');
+var element = document.getElementById('element');
+
+test(function() {
+    var keyframes = [
+        {textSizeAdjust: 'inherit'},
+        {textSizeAdjust: '60%'}
+    ];
+
+    container.style.textSizeAdjust = '100%';
+    var player = element.animate(keyframes, 20);
+
+    player.pause();
+    player.currentTime = 5;
+    assert_equals(getComputedStyle(element).textSizeAdjust, '90%');
+
+    player.currentTime = 10;
+    container.style.textSizeAdjust = '50%';
+    assert_equals(getComputedStyle(element).textSizeAdjust, '55%');
+}, 'text-size-adjust responsive to inherited text-size-adjust changes');
+</script>
diff --git a/testing/web-platform/tests/web-animations/responsive/textIndent.html b/testing/web-platform/tests/web-animations/responsive/textIndent.html
new file mode 100644
index 0000000000..430417d28b
--- /dev/null
+++ b/testing/web-platform/tests/web-animations/responsive/textIndent.html
@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<div id='container'>
+    <div id='element'></div>
+</div>
+<script>
+
+var container = document.getElementById('container');
+var element = document.getElementById('element');
+
+test(function() {
+    container.style.fontSize = '10px';
+
+    var keyframes = [
+        {textIndent: '10em hanging'},
+        {textIndent: '10em hanging'}
+    ];
+    var player = element.animate(keyframes, 10);
+    player.pause();
+    player.currentTime = 5;
+
+    var textIndent = getComputedStyle(element).textIndent;
+    container.style.fontSize = '20px';
+    assert_not_equals(getComputedStyle(element).textIndent, textIndent);
+}, 'textIndent responsive to style changes');
+
+test(function() {
+    var keyframes = [
+        {textIndent: 'inherit'},
+        {textIndent: '200px hanging each-line'}
+    ];
+
+    container.style.textIndent = '100px hanging each-line';
+    var player = element.animate(keyframes, 10);
+
+    player.pause();
+    player.currentTime = 5;
+    assert_equals(getComputedStyle(element).textIndent, '150px hanging each-line');
+
+    container.style.textIndent = '400px hanging';
+    assert_equals(getComputedStyle(element).textIndent, '200px hanging each-line');
+
+    container.style.textIndent = '400px hanging each-line';
+    assert_equals(getComputedStyle(element).textIndent, '300px hanging each-line');
+
+    container.style.textIndent = '800px hanging each-line';
+    assert_equals(getComputedStyle(element).textIndent, '500px hanging each-line');
+
+    container.style.textIndent = '400px each-line';
+    assert_equals(getComputedStyle(element).textIndent, '200px hanging each-line');
+
+    container.style.textIndent = '800px hanging each-line';
+    assert_equals(getComputedStyle(element).textIndent, '500px hanging each-line');
+
+    container.style.textIndent = '400px hanging each-line';
+    assert_equals(getComputedStyle(element).textIndent, '300px hanging each-line');
+}, 'textIndent responsive to inherited textIndent changes');
+</script>
diff --git a/testing/web-platform/tests/web-animations/responsive/to-color-change.html b/testing/web-platform/tests/web-animations/responsive/to-color-change.html
new file mode 100644
index 0000000000..6c3fcccf62
--- /dev/null
+++ b/testing/web-platform/tests/web-animations/responsive/to-color-change.html
@@ -0,0 +1,253 @@
+<!DOCTYPE html>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<style>
+a { visibility: hidden; }
+</style>
+
+<div id='container'>
+    <div id='child'></div>
+</div>
+<div id='element'></div>
+<svg>
+    <rect id='svgElement'></rect>
+</svg>
+
+<a href='example.com/unvisited' id='unvisited'><div id='unvisitedchild'>Unvisited</div></a>
+<a href='' id='visited'><div id='visitedchild'>Visited</div></a>
+
+<script>
+'use strict';
+var container = document.getElementById('container');
+var child = document.getElementById('child');
+var element = document.getElementById('element');
+var unvisited = document.getElementById('unvisited');
+var visited = document.getElementById('visited');
+var unvisitedChild = document.getElementById('unvisitedchild');
+var visitedChild = document.getElementById('visitedchild');
+
+test(function() {
+    var keyframes = [
+        {backgroundColor: 'currentColor'},
+        {backgroundColor: 'rgb(0, 68, 0)'}
+    ];
+
+    element.style.color = 'rgb(204, 0, 0)';
+    var player = element.animate(keyframes, 10);
+    player.pause();
+    player.currentTime = 5;
+    element.style.color = 'rgb(0, 0, 204)';
+    assert_equals(getComputedStyle(element).backgroundColor, 'rgb(0, 34, 102)');
+}, 'Background color responsive to currentColor changes');
+
+test(function() {
+    var keyframes = [
+        {fill: 'currentColor'},
+        {fill: 'rgb(0, 68, 0)'}
+    ];
+
+    svgElement.style.color = 'rgb(204, 0, 0)';
+    var player = svgElement.animate(keyframes, 10);
+    player.pause();
+    player.currentTime = 5;
+    svgElement.style.color = 'rgb(0, 0, 204)';
+    assert_equals(getComputedStyle(svgElement).fill, 'rgb(0, 34, 102)');
+}, 'Fill color responsive to currentColor changes');
+
+test(function() {
+    var keyframes = [
+        {backgroundColor: 'rgba(250, 240, 220, 0.431372549)'},
+        {backgroundColor: 'currentColor'}
+    ];
+
+    element.style.color = 'rgb(204, 0, 0)';
+    var player = element.animate(keyframes, 10);
+    player.pause();
+    player.currentTime = 3;
+    element.style.color = 'rgba(160, 190, 180, 0.980392157)';
+    assert_equals(getComputedStyle(element).backgroundColor, 'rgba(206, 215, 200, 0.596)');
+}, 'Color interpolation uses pre-multiplied colors');
+
+test(function() {
+    var keyframes = [
+        {
+            borderBottomColor: 'currentColor',
+            borderLeftColor: 'currentColor',
+            borderRightColor: 'currentColor',
+            borderTopColor: 'currentColor',
+            offset: 0
+        },
+        {
+            borderBottomColor: 'rgb(0, 68, 0)',
+            borderLeftColor: 'rgb(0, 70, 0)',
+            borderRightColor: 'rgb(0, 72, 0)',
+            borderTopColor: 'rgb(0, 74, 0)',
+            offset: 1
+        }
+    ];
+
+    element.style.color = 'rgb(204, 0, 0)';
+    var player = element.animate(keyframes, 10);
+    player.pause();
+    player.currentTime = 5;
+    element.style.color = 'rgb(0, 0, 204)';
+    assert_equals(getComputedStyle(element).borderBottomColor, 'rgb(0, 34, 102)');
+    assert_equals(getComputedStyle(element).borderLeftColor, 'rgb(0, 35, 102)');
+    assert_equals(getComputedStyle(element).borderRightColor, 'rgb(0, 36, 102)');
+    assert_equals(getComputedStyle(element).borderTopColor, 'rgb(0, 37, 102)');
+}, 'Border color responsive to currentColor changes');
+
+test(function() {
+    var keyframes = [
+        {
+            borderBottomColor: 'currentColor',
+            borderLeftColor: 'currentColor',
+            borderRightColor: 'currentColor',
+            borderTopColor: 'currentColor',
+            offset: 0
+        },
+        {
+            borderBottomColor: 'rgb(0, 68, 0)',
+            borderLeftColor: 'rgb(0, 70, 0)',
+            borderRightColor: 'rgb(0, 72, 0)',
+            borderTopColor: 'rgb(0, 74, 0)',
+            offset: 1
+        }
+    ];
+
+    element.style.color = 'rgb(204, 0, 0)';
+    var player = element.animate(keyframes, 10);
+    player.pause();
+    player.currentTime = 5;
+    element.style.color = 'rgb(0, 0, 200)';
+    assert_equals(getComputedStyle(element).borderBottomColor, 'rgb(0, 34, 100)');
+    assert_equals(getComputedStyle(element).borderLeftColor, 'rgb(0, 35, 100)');
+    assert_equals(getComputedStyle(element).borderRightColor, 'rgb(0, 36, 100)');
+    assert_equals(getComputedStyle(element).borderTopColor, 'rgb(0, 37, 100)');
+}, 'Border color responsive to currentColor changes again');
+
+test(function() {
+    var keyframes = [
+        {outlineColor: 'currentColor'},
+        {outlineColor: 'rgb(0, 68, 0)'}
+    ];
+
+    element.style.color = 'rgb(204, 0, 0)';
+    var player = element.animate(keyframes, 10);
+    player.pause();
+    player.currentTime = 5;
+    element.style.color = 'rgb(0, 0, 204)';
+    assert_equals(getComputedStyle(element).outlineColor, 'rgb(0, 34, 102)');
+}, 'Outline color responsive to currentColor changes');
+
+test(function() {
+    var keyframes = [
+        {stroke: 'rgb(0, 68, 0)'},
+        {stroke: 'currentColor'}
+    ];
+
+    svgElement.style.color = 'rgb(204, 0, 0)';
+    var player = svgElement.animate(keyframes, 10);
+    player.pause();
+    player.currentTime = 5;
+    svgElement.style.color = 'rgb(0, 0, 204)';
+    assert_equals(getComputedStyle(svgElement).stroke, 'rgb(0, 34, 102)');
+}, 'Stroke color responsive to currentColor changes');
+
+test(function() {
+    var keyframes = [
+        {textDecorationColor: 'rgb(0, 68, 0)'},
+        {textDecorationColor: 'currentColor'}
+    ];
+
+    element.style.color = 'rgb(204, 0, 0)';
+    var player = element.animate(keyframes, 10);
+    player.pause();
+    player.currentTime = 5;
+    element.style.color = 'rgb(0, 0, 204)';
+    assert_equals(getComputedStyle(element).textDecorationColor, 'rgb(0, 34, 102)');
+}, 'Text decoration color responsive to currentColor changes');
+
+test(function() {
+    var keyframes = [
+        {color: 'currentColor'},
+        {color: 'rgb(0, 68, 0)'}
+    ];
+
+    child.style.color = 'rgb(10, 10, 10)'; // Should be ignored
+    container.style.color = 'rgb(204, 0, 0)';
+    var player = child.animate(keyframes, 10);
+    player.pause();
+    player.currentTime = 5;
+    container.style.color = 'rgb(0, 0, 204)';
+    assert_equals(getComputedStyle(child).color, 'rgb(0, 34, 102)');
+    player.currentTime = 7.5;
+    container.style.color = 'rgb(136, 0, 136)';
+    assert_equals(getComputedStyle(child).color, 'rgb(34, 51, 34)');
+}, 'Color responsive to parent currentColor changes');
+
+test(function() {
+    var keyframes = [
+        {color: 'rgb(0, 68, 0)'},
+        {color: 'currentColor'}
+    ];
+
+    child.style.color = 'rgb(10, 10, 10)'; // Should be ignored
+    container.style.color = 'rgb(204, 0, 0)';
+    var player = child.animate(keyframes, 10);
+    player.pause();
+    player.currentTime = 5;
+    container.style.color = 'rgb(0, 0, 204)';
+    assert_equals(getComputedStyle(child).color, 'rgb(0, 34, 102)');
+    player.currentTime = 7.5;
+    container.style.color = 'rgb(136, 0, 68)';
+    assert_equals(getComputedStyle(child).color, 'rgb(102, 17, 51)');
+}, 'Color responsive to repeated parent currentColor changes');
+
+test(function() {
+    var keyframes = [
+        {backgroundColor: 'currentColor'},
+        {backgroundColor: 'rgb(100, 150, 200)'}
+    ];
+
+    var player1 = unvisited.animate(keyframes, 10);
+    var player2 = visited.animate(keyframes, 10);
+    player1.pause();
+    player2.pause();
+    player1.currentTime = 5;
+    player2.currentTime = 5;
+    assert_equals(getComputedStyle(unvisited).backgroundColor, getComputedStyle(visited).backgroundColor);
+}, 'Color animations do not expose visited status');
+
+test(function() {
+    var keyframes = [
+        {color: 'rgb(100, 150, 200)'},
+        {color: 'currentColor'}
+    ];
+
+    var player1 = unvisitedChild.animate(keyframes, 10);
+    var player2 = visitedChild.animate(keyframes, 10);
+    player1.pause();
+    player2.pause();
+    player1.currentTime = 5;
+    player2.currentTime = 5;
+    assert_equals(getComputedStyle(unvisitedChild).color, getComputedStyle(visitedChild).color);
+}, 'Color animations do not expose parent visited status');
+
+test(function() {
+    var keyframes = [
+        {columnRuleColor: 'inherit'},
+        {columnRuleColor: 'rgb(70, 70, 170)'}
+    ];
+
+    container.style.columnRuleColor = 'rgb(170, 70, 70)';
+    var player = child.animate(keyframes, 10);
+
+    player.pause();
+    player.currentTime = 5;
+    assert_equals(getComputedStyle(child).columnRuleColor, 'rgb(120, 70, 120)');
+
+    container.style.columnRuleColor = 'rgb(70, 170, 70)';
+    assert_equals(getComputedStyle(child).columnRuleColor, 'rgb(70, 120, 120)');
+}, 'Color animations respond to inherited changes');
+</script>
diff --git a/testing/web-platform/tests/web-animations/responsive/to-inherited-change.html b/testing/web-platform/tests/web-animations/responsive/to-inherited-change.html
new file mode 100644
index 0000000000..96ef5d24e1
--- /dev/null
+++ b/testing/web-platform/tests/web-animations/responsive/to-inherited-change.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<div id='container'>
+    <div id='element'></div>
+</div>
+
+<script>
+
+var container = document.getElementById('container');
+var element = document.getElementById('element');
+
+test(function() {
+    var keyframes = [
+        {fontSize: 'inherit'},
+        {fontSize: '20px'}
+    ];
+
+    container.style.fontSize = '10px';
+    var player = element.animate(keyframes, 10);
+    player.pause();
+    player.currentTime = 5;
+    container.style.fontSize = '30px';
+    assert_equals(getComputedStyle(element).fontSize, '25px');
+}, 'Font size responsive to inherited changes at start');
+
+test(function() {
+    var keyframes = [
+        {fontSize: '50px'},
+        {fontSize: 'inherit'}
+    ];
+
+    container.style.fontSize = '40px';
+    var player = element.animate(keyframes, 10);
+    player.pause();
+    player.currentTime = 5;
+    container.style.fontSize = '60px';
+    assert_equals(getComputedStyle(element).fontSize, '55px');
+}, 'Font size responsive to inherited changes at end');
+
+test(function() {
+    var keyframes = [
+        {fontSize: 'inherit'},
+        {fontSize: 'inherit'}
+    ];
+
+    container.style.fontSize = '70px';
+    var player = element.animate(keyframes, 10);
+    player.pause();
+    player.currentTime = 5;
+    container.style.fontSize = '80px';
+    assert_equals(getComputedStyle(element).fontSize, '80px');
+}, 'Font size responsive to inherited changes');
+
+</script>
diff --git a/testing/web-platform/tests/web-animations/responsive/to-style-change.html b/testing/web-platform/tests/web-animations/responsive/to-style-change.html
new file mode 100644
index 0000000000..8f4bf4c8b5
--- /dev/null
+++ b/testing/web-platform/tests/web-animations/responsive/to-style-change.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<div id='container'>
+<div id='element'></div>
+</div>
+
+<script>
+var element = document.getElementById('element');
+var container = document.getElementById('container');
+
+test(function() {
+    element.style.fontSize = '10px';
+    container.style.width = '1000px';
+    var player = element.animate([{left: 'calc(100px + 80%)'}, {left: '10em'}], 10);
+    player.pause();
+    player.currentTime = 5;
+    assert_equals(getComputedStyle(element).left, 'calc(40% + 100px)');
+    element.style.fontSize = '20px';
+    assert_equals(getComputedStyle(element).left, 'calc(40% + 150px)');
+    container.style.width = '500px';
+    assert_equals(getComputedStyle(element).left, 'calc(40% + 150px)');
+}, 'Lengths responsive to style changes');
+
+test(function() {
+    container.style.width = '1000px';
+    var player = element.animate([{paddingTop: '30%'}, {paddingTop: '50%'}], 10);
+    player.pause();
+    player.currentTime = 5;
+    container.style.width = '700px';
+    assert_equals(getComputedStyle(element).paddingTop, '280px');
+}, 'Percentages responsive to width style changes');
+
+test(function() {
+    element.style.fontSize = '1px';
+    var player = element.animate([{lineHeight: '9'}, {lineHeight: '13'}], 10);
+    player.pause();
+    player.currentTime = 2.5;
+    element.style.fontSize = '7px';
+    assert_equals(getComputedStyle(element).lineHeight, '70px');
+}, 'Numbers responsive to style changes');
+
+</script>
diff --git a/testing/web-platform/tests/web-animations/responsive/toggle-animated-iframe-visibility-ref.html b/testing/web-platform/tests/web-animations/responsive/toggle-animated-iframe-visibility-ref.html
new file mode 100644
index 0000000000..dab5bed7c8
--- /dev/null
+++ b/testing/web-platform/tests/web-animations/responsive/toggle-animated-iframe-visibility-ref.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<style>
+  .rotated {
+    transform: rotate(90deg);
+  }
+</style>
+<div id="container">
+  <iframe class="rotated" src="resources/block.html">
+  </iframe>
+</div>
\ No newline at end of file
diff --git a/testing/web-platform/tests/web-animations/responsive/toggle-animated-iframe-visibility.html b/testing/web-platform/tests/web-animations/responsive/toggle-animated-iframe-visibility.html
new file mode 100644
index 0000000000..f50ffaad34
--- /dev/null
+++ b/testing/web-platform/tests/web-animations/responsive/toggle-animated-iframe-visibility.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html class="reftest-wait">
+<meta name="assert" content="This should resume the animation after unhiding the iframe.">
+<title>CSS Test (Animations): Unhiding iframe visibility should restart animation. </title>
+<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=616270">
+<link rel="match" href="toggle-animated-iframe-visibility-ref.html">
+<script src="/common/reftest-wait.js"></script>
+
+<div id="container"></div>
+
+<div id="log"></div>
+
+<script>
+  var container;
+  var block;
+  var logDiv;
+
+  function verifyVisibility(expected_visibility, message) {
+    if (getComputedStyle(block).visibility !== expected_visibility)
+      logDiv.innerHTML = `FAIL: ${message}`;
+  }
+
+  async function runTest() {
+    var animation = block.animate(
+    { transform: [ 'rotate(0deg)', 'rotate(180deg)' ] },
+    {
+      duration: 10000000,
+      delay: -5000000,
+      easing: 'cubic-bezier(0, 1, 1, 0)'
+    });
+
+    await animation.ready;
+
+    container.style.visibility = 'hidden';
+    requestAnimationFrame(() => {
+      verifyVisibility('hidden', 'style.visibility should be hidden');
+      container.style.visibility = 'visible';
+
+      requestAnimationFrame(() => {
+        verifyVisibility('visible', 'style.visiblity should be visible');
+        takeScreenshot();
+      });
+    });
+  }
+
+  window.onload = function () {
+    logDiv = document.getElementById('log');
+    container = document.getElementById('container');
+    block = document.createElement('iframe');
+
+    container.appendChild(block);
+    block.onload = runTest;
+    block.src = 'resources/block.html';
+  };
+</script>
diff --git a/testing/web-platform/tests/web-animations/responsive/transform.html b/testing/web-platform/tests/web-animations/responsive/transform.html
new file mode 100644
index 0000000000..d57f8b136a
--- /dev/null
+++ b/testing/web-platform/tests/web-animations/responsive/transform.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<div id='container'>
+<div id='element'></div>
+</div>
+
+<script>
+var element = document.getElementById('element');
+var container = document.getElementById('container');
+
+test(function() {
+    container.style.fontSize = '10px';
+    var player = element.animate([{transform: 'translateX(10em)'}, {transform: 'translateX(20em)'}], 10);
+    player.pause();
+    player.currentTime = 2;
+    container.style.fontSize = '20px';
+    assert_equals(getComputedStyle(element).transform, 'matrix(1, 0, 0, 1, 240, 0)');
+}, 'Transform responsive to font size changes');
+
+</script>
diff --git a/testing/web-platform/tests/web-animations/responsive/translate.html b/testing/web-platform/tests/web-animations/responsive/translate.html
new file mode 100644
index 0000000000..8df4d8577d
--- /dev/null
+++ b/testing/web-platform/tests/web-animations/responsive/translate.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<div id='container'>
+<div id='element'></div>
+</div>
+
+<script>
+var element = document.getElementById('element');
+var container = document.getElementById('container');
+
+test(function() {
+    container.style.fontSize = '10px';
+    var player = element.animate([{translate: '1em 2em'}, {translate: '10em 20em'}], 10);
+    player.pause();
+    player.currentTime = 2;
+    container.style.fontSize = '20px';
+    assert_equals(getComputedStyle(element).translate, '56px 112px');
+}, 'Translate responsive to font size changes');
+
+</script>
diff --git a/testing/web-platform/tests/web-animations/responsive/verticalAlign.html b/testing/web-platform/tests/web-animations/responsive/verticalAlign.html
new file mode 100644
index 0000000000..af81fa481b
--- /dev/null
+++ b/testing/web-platform/tests/web-animations/responsive/verticalAlign.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<div id='container'>
+<div id='element'></div>
+</div>
+
+<script>
+var element = document.getElementById('element');
+var container = document.getElementById('container');
+
+test(function() {
+    element.style.fontSize = '10px';
+    var player = element.animate([{verticalAlign: '3em'}, {verticalAlign: '5em'}], 10);
+    player.pause();
+    player.currentTime = 5;
+    element.style.fontSize = '20px';
+    assert_equals(getComputedStyle(element).verticalAlign, '80px');
+}, 'verticalAlign responsive to style changes');
+
+</script>
-- 
cgit v1.2.3