Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(95)

Issues Search
    My Issues | Starred     Open | Closed | All

Unified Diff: LayoutTests/web-animations-api/animations-responsive-to-color-change.html

Issue 292173009: Web Animations - responsive interpolation (Closed) Base URL: https://chromium.googlesource.com/chromium/blink.git@0519_MySeparation
Patch Set: applyAndSnapshotAnimatableValue Created 6 years, 7 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View side-by-side diff with in-line comments
Download patch
« no previous file with comments | « LayoutTests/web-animations-api/animations-responsive-textIndent.html ('k') | LayoutTests/web-animations-api/animations-responsive-to-color-change-expected.txt » ('j') | Source/core/animation/StringKeyframe.h » ('J')
Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
Index: LayoutTests/web-animations-api/animations-responsive-to-color-change.html
diff --git a/LayoutTests/web-animations-api/animations-responsive-to-color-change.html b/LayoutTests/web-animations-api/animations-responsive-to-color-change.html
index 75fc3fbbd18ea95c05f394c41e45d0e201b26fc4..f2cbfcaa56e1f3c69a59c21e9c7966b96c6b3f0c 100644
--- a/LayoutTests/web-animations-api/animations-responsive-to-color-change.html
+++ b/LayoutTests/web-animations-api/animations-responsive-to-color-change.html
@@ -1,25 +1,206 @@
<!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>
+<a href='example.com/unvisited' id='unvisited'><div id='unvisitedchild'>Unvisited</div></a>
+<a href='' id='visited'><div id='visitedchild'>Visited</div></a>
+
<script>
+var container = document.getElementById('container');
+var child = document.getElementById('child');
var element = document.getElementById('element');
-
-var keyframes = [
- {backgroundColor: 'currentColor', offset: 0},
- {backgroundColor: '#004400', offset: 1}
-];
+var unvisited = document.getElementById('unvisited');
+var visited = document.getElementById('visited');
+var unvisitedChild = document.getElementById('unvisitedchild');
+var visitedChild = document.getElementById('visitedchild');
test(function() {
- element.style.color = '#CC0000';
+ 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 = '#0000CC';
+ element.style.color = 'rgb(0, 0, 204)';
assert_equals(getComputedStyle(element).backgroundColor, 'rgb(0, 34, 102)');
-}, 'Colors responsive to style changes');
+}, 'Background 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.596078)');
+}, '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 = [
+ {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');
</script>
« no previous file with comments | « LayoutTests/web-animations-api/animations-responsive-textIndent.html ('k') | LayoutTests/web-animations-api/animations-responsive-to-color-change-expected.txt » ('j') | Source/core/animation/StringKeyframe.h » ('J')

Powered by Google App Engine
This is Rietveld 408576698