Skip to content

Commit

Permalink
[css-ui] Verify caret-color animations
Browse files Browse the repository at this point in the history
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.

Build from revision 7af5a49dc68b5efefa3dd93012a07a4fb9392968
  • Loading branch information
CssBuildBot committed Jan 4, 2017
1 parent e286d7b commit 5221fd6
Show file tree
Hide file tree
Showing 46 changed files with 829 additions and 139 deletions.
14 changes: 7 additions & 7 deletions css-color-3_dev/html4/caret-color-013.htm
Original file line number Diff line number Diff line change
Expand Up @@ -32,19 +32,19 @@
}

var textarea = document.getElementById("textarea");
setAndCheckCaretColor(textarea, "", "", "rgb(0, 0, 0)", "Test default caret-color");
setAndCheckCaretColor(textarea, "initial", "initial", "rgb(0, 0, 0)", "Test caret-color: initial");
setAndCheckCaretColor(textarea, "inherit", "inherit", "rgb(0, 0, 0)", "Test caret-color: inherit");
setAndCheckCaretColor(textarea, "auto", "auto", "rgb(0, 0, 0)", "Test caret-color: auto");
setAndCheckCaretColor(textarea, "currentcolor", "currentcolor", "rgb(0, 0, 0)", "Test caret-color: currentcolor");
setAndCheckCaretColor(textarea, "", "", "auto", "Test default caret-color");
setAndCheckCaretColor(textarea, "initial", "initial", "auto", "Test caret-color: initial");
setAndCheckCaretColor(textarea, "inherit", "inherit", "auto", "Test caret-color: inherit");
setAndCheckCaretColor(textarea, "auto", "auto", "auto", "Test caret-color: auto");
setAndCheckCaretColor(textarea, "currentcolor", "currentcolor", "currentcolor", "Test caret-color: currentcolor");
setAndCheckCaretColor(textarea, "lime", "lime", "rgb(0, 255, 0)", "Test caret-color: lime");
setAndCheckCaretColor(textarea, "initial", "initial", "rgb(0, 0, 0)", "Reset caret-color: initial");
setAndCheckCaretColor(textarea, "initial", "initial", "auto", "Reset caret-color: initial");
setAndCheckCaretColor(textarea, "rgb(0, 100, 100)", "rgb(0, 100, 100)", "rgb(0, 100, 100)", "Test caret-color: rgb(0, 100, 100)");

var wrapper = document.getElementById("wrapper");
wrapper.style.caretColor = "green";

setAndCheckCaretColor(textarea, "initial", "initial", "rgb(0, 0, 0)", "Test caret-color: initial (inherited)");
setAndCheckCaretColor(textarea, "initial", "initial", "auto", "Test caret-color: initial (inherited)");
setAndCheckCaretColor(textarea, "inherit", "inherit", "rgb(0, 128, 0)", "Test caret-color: inherit (inherited)");
setAndCheckCaretColor(textarea, "blue", "blue", "rgb(0, 0, 255)", "Test caret-color: blue (inherited)");
</script>
Expand Down
47 changes: 47 additions & 0 deletions css-color-3_dev/html4/caret-color-019.htm
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
<!DOCTYPE html>
<html><head><meta charset="utf-8">
<title>CSS Basic User Interface Test: caret-color auto test animation</title>
<link href="mailto:rego@igalia.com" rel="author" title="Manuel Rego Casasnovas">
<link href="http://www.w3.org/TR/css3-ui/#caret-color" rel="help">
<link href="https://www.w3.org/TR/web-animations-1/#dom-animatable-animate" rel="help">
<link href="https://www.w3.org/TR/css3-color/#color0" rel="help">
<meta content="Test checks that 'auto' value for caret-color property is not interpolatible." name="assert">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
textarea {
color: magenta;
caret-color: red;
}
</style>
</head><body>
<textarea id="textarea"></textarea>
<div id="log"></div>

<script>
test(
function(){
var textarea = document.getElementById("textarea");
assert_equals(getComputedStyle(textarea).caretColor, 'rgb(255, 0, 0)');

var keyframes = [
{ caretColor: 'auto' },
{ caretColor: 'lime' }
];
var options = {
duration: 10,
fill: "forwards"
};

var player = textarea.animate(keyframes, options);
player.pause();
player.currentTime = 0;
assert_equals(getComputedStyle(textarea).caretColor, 'rgb(255, 0, 255)');
player.currentTime = 5;
assert_equals(getComputedStyle(textarea).caretColor, 'rgb(0, 255, 0)');
player.currentTime = 10;
assert_equals(getComputedStyle(textarea).caretColor, 'rgb(0, 255, 0)');
}, "caret-color: auto is not interpolatible");
</script>

</body></html>
47 changes: 47 additions & 0 deletions css-color-3_dev/html4/caret-color-020.htm
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
<!DOCTYPE html>
<html><head><meta charset="utf-8">
<title>CSS Basic User Interface Test: caret-color currentcolor test animation</title>
<link href="mailto:rego@igalia.com" rel="author" title="Manuel Rego Casasnovas">
<link href="http://www.w3.org/TR/css3-ui/#caret-color" rel="help">
<link href="https://www.w3.org/TR/web-animations-1/#dom-animatable-animate" rel="help">
<link href="https://www.w3.org/TR/css3-color/#color0" rel="help">
<meta content="Test checks that 'currentcolor' value for caret-color property is interpolatible." name="assert">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
textarea {
color: magenta;
caret-color: red;
}
</style>
</head><body>
<textarea id="textarea"></textarea>
<div id="log"></div>

<script>
test(
function(){
var textarea = document.getElementById("textarea");
assert_equals(getComputedStyle(textarea).caretColor, 'rgb(255, 0, 0)');

var keyframes = [
{ caretColor: 'currentcolor' },
{ caretColor: 'lime' }
];
var options = {
duration: 10,
fill: "forwards"
};

var player = textarea.animate(keyframes, options);
player.pause();
player.currentTime = 0;
assert_equals(getComputedStyle(textarea).caretColor, 'rgb(255, 0, 255)');
player.currentTime = 5;
assert_equals(getComputedStyle(textarea).caretColor, 'rgb(128, 128, 128)');
player.currentTime = 10;
assert_equals(getComputedStyle(textarea).caretColor, 'rgb(0, 255, 0)');
}, "caret-color: currentcolor is interpolatible");
</script>

</body></html>
26 changes: 24 additions & 2 deletions css-color-3_dev/html4/chapter-3.htm
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
<body>

<h1>CSS Color Module Level 3 Conformance Test Suite</h1>
<h2>Color properties (16 tests)</h2>
<h2>Color properties (18 tests)</h2>
<table width="100%">
<col id="test-column">
<col id="refs-column">
Expand Down Expand Up @@ -62,7 +62,7 @@ <h2>Color properties (16 tests)</h2>
</tr>
</tbody>
<tbody id="s3.1.#color0">
<!-- 3 tests -->
<!-- 5 tests -->
<tr id="caret-color-013-3.1.#color0" class="dom script">
<td>
<a href="caret-color-013.htm">caret-color-013</a></td>
Expand Down Expand Up @@ -96,6 +96,28 @@ <h2>Color properties (16 tests)</h2>
</ul>
</td>
</tr>
<tr id="caret-color-019-3.1.#color0" class="script">
<td>
<a href="caret-color-019.htm">caret-color-019</a></td>
<td></td>
<td><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>caret-color auto test animation
<ul class="assert">
<li>Test checks that 'auto' value for caret-color property is not interpolatible.</li>
</ul>
</td>
</tr>
<tr id="caret-color-020-3.1.#color0" class="script">
<td>
<a href="caret-color-020.htm">caret-color-020</a></td>
<td></td>
<td><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>caret-color currentcolor test animation
<ul class="assert">
<li>Test checks that 'currentcolor' value for caret-color property is interpolatible.</li>
</ul>
</td>
</tr>
</tbody>
<tbody id="s3.1.#currentcolor0">
<!-- 0 tests -->
Expand Down
2 changes: 1 addition & 1 deletion css-color-3_dev/html4/toc.htm
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ <h1>CSS Color Module Level 3 Conformance Test Suite By Chapter</h1>
<tbody id="s3">
<tr><th><a href="chapter-3.htm">Chapter 3 -
Color properties</a></th>
<td>(16 Tests)</td></tr>
<td>(18 Tests)</td></tr>
</tbody>
<tbody id="s4">
<tr><th><a href="chapter-4.htm">Chapter 4 -
Expand Down
8 changes: 6 additions & 2 deletions css-color-3_dev/implementation-report-TEMPLATE.data
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,16 @@
# http://test.csswg.org/suites/css-color-3_dev/DATESTAMP/
# See http://wiki.csswg.org/test/implementation-report for instructions
testname revision result comment
html4/caret-color-013.htm 0e52cf5be9ac07172ba7be4d7feae0446c2156ee ?
xhtml1/caret-color-013.xht 0e52cf5be9ac07172ba7be4d7feae0446c2156ee ?
html4/caret-color-013.htm 9d819d02f818d6dd752192ff7136ce1ca2fa2bc6 ?
xhtml1/caret-color-013.xht 9d819d02f818d6dd752192ff7136ce1ca2fa2bc6 ?
html4/caret-color-016.htm 4d7ff9d4e4f8f12da4c2a6242ea91c22b8304d95 ?
xhtml1/caret-color-016.xht 4d7ff9d4e4f8f12da4c2a6242ea91c22b8304d95 ?
html4/caret-color-018.htm 2b42067b6dbf7c555d46c69f305f3fd7bd42876f ?
xhtml1/caret-color-018.xht 2b42067b6dbf7c555d46c69f305f3fd7bd42876f ?
html4/caret-color-019.htm db4e2e0837e0788e22917c5a0112b3242b287b92 ?
xhtml1/caret-color-019.xht db4e2e0837e0788e22917c5a0112b3242b287b92 ?
html4/caret-color-020.htm 34bcc32848a5cccf585aa0ef1005fdc241af2c28 ?
xhtml1/caret-color-020.xht 34bcc32848a5cccf585aa0ef1005fdc241af2c28 ?
html4/t31-color-currentcolor-b.htm 4dde926ad6a739b59385977b3d01c5676854e069 ?
xhtml1/t31-color-currentcolor-b.xht 4dde926ad6a739b59385977b3d01c5676854e069 ?
html4/t31-color-text-a.htm 17e2f9fc24d9de23f0059dc8d3b1f636e32942c7 ?
Expand Down
4 changes: 3 additions & 1 deletion css-color-3_dev/testinfo.data
Original file line number Diff line number Diff line change
@@ -1,7 +1,9 @@
id references title flags links revision credits assertion
caret-color-013 caret-color dynamic changes dom,script http://www.w3.org/TR/css3-ui/#caret-color,https://www.w3.org/TR/css3-color/#color0 0e52cf5be9ac07172ba7be4d7feae0446c2156ee `Manuel Rego Casasnovas`<mailto:rego@igalia.com> Test checks checks that carret-color can be correctly changed using the style attribute, and that the computed value is done correctly.
caret-color-013 caret-color dynamic changes dom,script http://www.w3.org/TR/css3-ui/#caret-color,https://www.w3.org/TR/css3-color/#color0 9d819d02f818d6dd752192ff7136ce1ca2fa2bc6 `Manuel Rego Casasnovas`<mailto:rego@igalia.com> Test checks checks that carret-color can be correctly changed using the style attribute, and that the computed value is done correctly.
caret-color-016 caret-color visited link computed value interact,may,script http://www.w3.org/TR/css3-ui/#caret-color,https://www.w3.org/TR/css3-color/#color0,https://www.w3.org/TR/selectors4/#link 4d7ff9d4e4f8f12da4c2a6242ea91c22b8304d95 `Manuel Rego Casasnovas`<mailto:rego@igalia.com> Test checks that computed style of caret-color on visited links doesn't leak privacy information.
caret-color-018 caret-color test animation script http://www.w3.org/TR/css3-ui/#caret-color,https://www.w3.org/TR/web-animations-1/#dom-animatable-animate,https://www.w3.org/TR/css3-color/#color0 2b42067b6dbf7c555d46c69f305f3fd7bd42876f `Manuel Rego Casasnovas`<mailto:rego@igalia.com> Test checks that caret-color is animatable as a color, and that the computed values during the animation are the expected ones.
caret-color-019 caret-color auto test animation script http://www.w3.org/TR/css3-ui/#caret-color,https://www.w3.org/TR/web-animations-1/#dom-animatable-animate,https://www.w3.org/TR/css3-color/#color0 db4e2e0837e0788e22917c5a0112b3242b287b92 `Manuel Rego Casasnovas`<mailto:rego@igalia.com> Test checks that 'auto' value for caret-color property is not interpolatible.
caret-color-020 caret-color currentcolor test animation script http://www.w3.org/TR/css3-ui/#caret-color,https://www.w3.org/TR/web-animations-1/#dom-animatable-animate,https://www.w3.org/TR/css3-color/#color0 34bcc32848a5cccf585aa0ef1005fdc241af2c28 `Manuel Rego Casasnovas`<mailto:rego@igalia.com> Test checks that 'currentcolor' value for caret-color property is interpolatible.
t31-color-currentColor-b reference/t31-color-currentColor-b-ref color http://www.w3.org/TR/css3-color/#foreground,http://www.w3.org/TR/css3-color/#currentcolor 4dde926ad6a739b59385977b3d01c5676854e069 `L. David Baron`<https://dbaron.org/>,`Mozilla Corporation`<http://mozilla.com/> That currentColor on the color property acts like inherit.
t31-color-text-a !reference/t31-color-text-a-ref color http://www.w3.org/TR/css3-color/#foreground 17e2f9fc24d9de23f0059dc8d3b1f636e32942c7 `L. David Baron`<https://dbaron.org/>,`Mozilla Corporation`<http://mozilla.com/> That color sets the color of the text.
t32-opacity-basic-0.0-a opacity http://www.w3.org/TR/css3-color/#transparency c34df9c36365c14e1e2895a96aa6c474515c6894 `L. David Baron`<https://dbaron.org/>,`Mozilla Corporation`<http://mozilla.com/> Opacity of 0.0 makes box transparent.
Expand Down
14 changes: 7 additions & 7 deletions css-color-3_dev/xhtml1/caret-color-013.xht
Original file line number Diff line number Diff line change
Expand Up @@ -32,19 +32,19 @@
}

var textarea = document.getElementById("textarea");
setAndCheckCaretColor(textarea, "", "", "rgb(0, 0, 0)", "Test default caret-color");
setAndCheckCaretColor(textarea, "initial", "initial", "rgb(0, 0, 0)", "Test caret-color: initial");
setAndCheckCaretColor(textarea, "inherit", "inherit", "rgb(0, 0, 0)", "Test caret-color: inherit");
setAndCheckCaretColor(textarea, "auto", "auto", "rgb(0, 0, 0)", "Test caret-color: auto");
setAndCheckCaretColor(textarea, "currentcolor", "currentcolor", "rgb(0, 0, 0)", "Test caret-color: currentcolor");
setAndCheckCaretColor(textarea, "", "", "auto", "Test default caret-color");
setAndCheckCaretColor(textarea, "initial", "initial", "auto", "Test caret-color: initial");
setAndCheckCaretColor(textarea, "inherit", "inherit", "auto", "Test caret-color: inherit");
setAndCheckCaretColor(textarea, "auto", "auto", "auto", "Test caret-color: auto");
setAndCheckCaretColor(textarea, "currentcolor", "currentcolor", "currentcolor", "Test caret-color: currentcolor");
setAndCheckCaretColor(textarea, "lime", "lime", "rgb(0, 255, 0)", "Test caret-color: lime");
setAndCheckCaretColor(textarea, "initial", "initial", "rgb(0, 0, 0)", "Reset caret-color: initial");
setAndCheckCaretColor(textarea, "initial", "initial", "auto", "Reset caret-color: initial");
setAndCheckCaretColor(textarea, "rgb(0, 100, 100)", "rgb(0, 100, 100)", "rgb(0, 100, 100)", "Test caret-color: rgb(0, 100, 100)");

var wrapper = document.getElementById("wrapper");
wrapper.style.caretColor = "green";

setAndCheckCaretColor(textarea, "initial", "initial", "rgb(0, 0, 0)", "Test caret-color: initial (inherited)");
setAndCheckCaretColor(textarea, "initial", "initial", "auto", "Test caret-color: initial (inherited)");
setAndCheckCaretColor(textarea, "inherit", "inherit", "rgb(0, 128, 0)", "Test caret-color: inherit (inherited)");
setAndCheckCaretColor(textarea, "blue", "blue", "rgb(0, 0, 255)", "Test caret-color: blue (inherited)");
</script>
Expand Down
47 changes: 47 additions & 0 deletions css-color-3_dev/xhtml1/caret-color-019.xht
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" />
<title>CSS Basic User Interface Test: caret-color auto test animation</title>
<link href="mailto:rego@igalia.com" rel="author" title="Manuel Rego Casasnovas" />
<link href="http://www.w3.org/TR/css3-ui/#caret-color" rel="help" />
<link href="https://www.w3.org/TR/web-animations-1/#dom-animatable-animate" rel="help" />
<link href="https://www.w3.org/TR/css3-color/#color0" rel="help" />
<meta content="Test checks that 'auto' value for caret-color property is not interpolatible." name="assert" />
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
textarea {
color: magenta;
caret-color: red;
}
</style>
</head><body>
<textarea id="textarea"></textarea>
<div id="log"></div>

<script>
test(
function(){
var textarea = document.getElementById("textarea");
assert_equals(getComputedStyle(textarea).caretColor, 'rgb(255, 0, 0)');

var keyframes = [
{ caretColor: 'auto' },
{ caretColor: 'lime' }
];
var options = {
duration: 10,
fill: "forwards"
};

var player = textarea.animate(keyframes, options);
player.pause();
player.currentTime = 0;
assert_equals(getComputedStyle(textarea).caretColor, 'rgb(255, 0, 255)');
player.currentTime = 5;
assert_equals(getComputedStyle(textarea).caretColor, 'rgb(0, 255, 0)');
player.currentTime = 10;
assert_equals(getComputedStyle(textarea).caretColor, 'rgb(0, 255, 0)');
}, "caret-color: auto is not interpolatible");
</script>

</body></html>
47 changes: 47 additions & 0 deletions css-color-3_dev/xhtml1/caret-color-020.xht
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta charset="utf-8" />
<title>CSS Basic User Interface Test: caret-color currentcolor test animation</title>
<link href="mailto:rego@igalia.com" rel="author" title="Manuel Rego Casasnovas" />
<link href="http://www.w3.org/TR/css3-ui/#caret-color" rel="help" />
<link href="https://www.w3.org/TR/web-animations-1/#dom-animatable-animate" rel="help" />
<link href="https://www.w3.org/TR/css3-color/#color0" rel="help" />
<meta content="Test checks that 'currentcolor' value for caret-color property is interpolatible." name="assert" />
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
textarea {
color: magenta;
caret-color: red;
}
</style>
</head><body>
<textarea id="textarea"></textarea>
<div id="log"></div>

<script>
test(
function(){
var textarea = document.getElementById("textarea");
assert_equals(getComputedStyle(textarea).caretColor, 'rgb(255, 0, 0)');

var keyframes = [
{ caretColor: 'currentcolor' },
{ caretColor: 'lime' }
];
var options = {
duration: 10,
fill: "forwards"
};

var player = textarea.animate(keyframes, options);
player.pause();
player.currentTime = 0;
assert_equals(getComputedStyle(textarea).caretColor, 'rgb(255, 0, 255)');
player.currentTime = 5;
assert_equals(getComputedStyle(textarea).caretColor, 'rgb(128, 128, 128)');
player.currentTime = 10;
assert_equals(getComputedStyle(textarea).caretColor, 'rgb(0, 255, 0)');
}, "caret-color: currentcolor is interpolatible");
</script>

</body></html>
26 changes: 24 additions & 2 deletions css-color-3_dev/xhtml1/chapter-3.xht
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
<body>

<h1>CSS Color Module Level 3 Conformance Test Suite</h1>
<h2>Color properties (16 tests)</h2>
<h2>Color properties (18 tests)</h2>
<table width="100%">
<col id="test-column"></col>
<col id="refs-column"></col>
Expand Down Expand Up @@ -62,7 +62,7 @@
</tr>
</tbody>
<tbody id="s3.1.#color0">
<!-- 3 tests -->
<!-- 5 tests -->
<tr id="caret-color-013-3.1.#color0" class="dom script">
<td>
<a href="caret-color-013.xht">caret-color-013</a></td>
Expand Down Expand Up @@ -96,6 +96,28 @@
</ul>
</td>
</tr>
<tr id="caret-color-019-3.1.#color0" class="script">
<td>
<a href="caret-color-019.xht">caret-color-019</a></td>
<td></td>
<td><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>caret-color auto test animation
<ul class="assert">
<li>Test checks that 'auto' value for caret-color property is not interpolatible.</li>
</ul>
</td>
</tr>
<tr id="caret-color-020-3.1.#color0" class="script">
<td>
<a href="caret-color-020.xht">caret-color-020</a></td>
<td></td>
<td><abbr class="script" title="Executes tests in script">Script</abbr></td>
<td>caret-color currentcolor test animation
<ul class="assert">
<li>Test checks that 'currentcolor' value for caret-color property is interpolatible.</li>
</ul>
</td>
</tr>
</tbody>
<tbody id="s3.1.#currentcolor0">
<!-- 0 tests -->
Expand Down
2 changes: 1 addition & 1 deletion css-color-3_dev/xhtml1/toc.xht
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@
<tbody id="s3">
<tr><th><a href="chapter-3.xht">Chapter 3 -
Color properties</a></th>
<td>(16 Tests)</td></tr>
<td>(18 Tests)</td></tr>
</tbody>
<tbody id="s4">
<tr><th><a href="chapter-4.xht">Chapter 4 -
Expand Down
Loading

0 comments on commit 5221fd6

Please sign in to comment.