diff options
| author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-07 09:22:09 +0000 |
|---|---|---|
| committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-07 09:22:09 +0000 |
| commit | 43a97878ce14b72f0981164f87f2e35e14151312 (patch) | |
| tree | 620249daf56c0258faa40cbdcf9cfba06de2a846 /testing/web-platform/tests/web-animations/responsive | |
| parent | Initial commit. (diff) | |
| download | firefox-43a97878ce14b72f0981164f87f2e35e14151312.tar.xz firefox-43a97878ce14b72f0981164f87f2e35e14151312.zip | |
Adding upstream version 110.0.1.upstream/110.0.1upstream
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'testing/web-platform/tests/web-animations/responsive')
38 files changed, 1718 insertions, 0 deletions
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> |