Skip to content

Commit 7af5a49

Browse files
mregomrego
committed
[css-ui] Verify caret-color animations
Added 2 new tests to check that "caret-color: auto" isn't interpolatible, but "caret-color: currentcolor" is. See w3c/csswg-drafts#781 for more information.
1 parent d68ccab commit 7af5a49

File tree

2 files changed

+92
-0
lines changed

2 files changed

+92
-0
lines changed

‎css-ui-3/caret-color-019.html

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
<!DOCTYPE html>
2+
<meta charset="utf-8">
3+
<title>CSS Basic User Interface Test: caret-color auto test animation</title>
4+
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
5+
<link rel="help" href="http://www.w3.org/TR/css3-ui/#caret-color">
6+
<link rel="help" href="https://www.w3.org/TR/web-animations-1/#dom-animatable-animate">
7+
<link rel="help" href="https://www.w3.org/TR/css3-color/#color0">
8+
<meta name="assert" content="Test checks that 'auto' value for caret-color property is not interpolatible.">
9+
<script src="/resources/testharness.js"></script>
10+
<script src="/resources/testharnessreport.js"></script>
11+
<style>
12+
textarea {
13+
color: magenta;
14+
caret-color: red;
15+
}
16+
</style>
17+
<body>
18+
<textarea id="textarea"></textarea>
19+
<div id=log></div>
20+
21+
<script>
22+
test(
23+
function(){
24+
var textarea = document.getElementById("textarea");
25+
assert_equals(getComputedStyle(textarea).caretColor, 'rgb(255, 0, 0)');
26+
27+
var keyframes = [
28+
{ caretColor: 'auto' },
29+
{ caretColor: 'lime' }
30+
];
31+
var options = {
32+
duration: 10,
33+
fill: "forwards"
34+
};
35+
36+
var player = textarea.animate(keyframes, options);
37+
player.pause();
38+
player.currentTime = 0;
39+
assert_equals(getComputedStyle(textarea).caretColor, 'rgb(255, 0, 255)');
40+
player.currentTime = 5;
41+
assert_equals(getComputedStyle(textarea).caretColor, 'rgb(0, 255, 0)');
42+
player.currentTime = 10;
43+
assert_equals(getComputedStyle(textarea).caretColor, 'rgb(0, 255, 0)');
44+
}, "caret-color: auto is not interpolatible");
45+
</script>
46+
</body>

‎css-ui-3/caret-color-020.html

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
<!DOCTYPE html>
2+
<meta charset="utf-8">
3+
<title>CSS Basic User Interface Test: caret-color currentcolor test animation</title>
4+
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
5+
<link rel="help" href="http://www.w3.org/TR/css3-ui/#caret-color">
6+
<link rel="help" href="https://www.w3.org/TR/web-animations-1/#dom-animatable-animate">
7+
<link rel="help" href="https://www.w3.org/TR/css3-color/#color0">
8+
<meta name="assert" content="Test checks that 'currentcolor' value for caret-color property is interpolatible.">
9+
<script src="/resources/testharness.js"></script>
10+
<script src="/resources/testharnessreport.js"></script>
11+
<style>
12+
textarea {
13+
color: magenta;
14+
caret-color: red;
15+
}
16+
</style>
17+
<body>
18+
<textarea id="textarea"></textarea>
19+
<div id=log></div>
20+
21+
<script>
22+
test(
23+
function(){
24+
var textarea = document.getElementById("textarea");
25+
assert_equals(getComputedStyle(textarea).caretColor, 'rgb(255, 0, 0)');
26+
27+
var keyframes = [
28+
{ caretColor: 'currentcolor' },
29+
{ caretColor: 'lime' }
30+
];
31+
var options = {
32+
duration: 10,
33+
fill: "forwards"
34+
};
35+
36+
var player = textarea.animate(keyframes, options);
37+
player.pause();
38+
player.currentTime = 0;
39+
assert_equals(getComputedStyle(textarea).caretColor, 'rgb(255, 0, 255)');
40+
player.currentTime = 5;
41+
assert_equals(getComputedStyle(textarea).caretColor, 'rgb(128, 128, 128)');
42+
player.currentTime = 10;
43+
assert_equals(getComputedStyle(textarea).caretColor, 'rgb(0, 255, 0)');
44+
}, "caret-color: currentcolor is interpolatible");
45+
</script>
46+
</body>

0 commit comments

Comments
 (0)