Bug 1576520 [wpt PR 18664] - Port outline-*-interpolation.html to WPT, a=testonly
authorStephen McGruer <smcgruer@chromium.org>
Wed, 28 Aug 2019 09:52:00 +0000
changeset 551238 2724049ee8a930629b76f8fd58766fa64ae01f94
parent 551237 e9ae2ae34bf6bc42e21b6d65f7a64040a91b7cf3
child 551239 8046d65970ac3a826ae9f37ca99ed293583fef22
push id11865
push userbtara@mozilla.com
push dateMon, 02 Sep 2019 08:54:37 +0000
treeherdermozilla-beta@37f59c4671b3 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerstestonly
bugs1576520, 18664, 900581, 1768666, 690330
milestone70.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1576520 [wpt PR 18664] - Port outline-*-interpolation.html to WPT, a=testonly Automatic update from web-platform-tests Port outline-*-interpolation.html to WPT Bug: 900581 Change-Id: I40b7d6f983d37726b843e82ad5ba794cec9c1214 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1768666 Reviewed-by: Xida Chen <xidachen@chromium.org> Commit-Queue: Stephen McGruer <smcgruer@chromium.org> Cr-Commit-Position: refs/heads/master@{#690330} -- wpt-commits: 552bd3bf8bc1beb528c6e9b6b730c3cbc3968345 wpt-pr: 18664
testing/web-platform/tests/css/css-ui/animation/outline-color-interpolation.html
testing/web-platform/tests/css/css-ui/animation/outline-offset-interpolation.html
testing/web-platform/tests/css/css-ui/animation/outline-width-interpolation.html
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/animation/outline-color-interpolation.html
@@ -0,0 +1,96 @@
+<!DOCTYPE html>
+<meta charset="UTF-8">
+<title>outline-color interpolation</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-3/#outline-color">
+<meta name="assert" content="outline-color supports animation by computed value">
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/interpolation-testcommon.js"></script>
+
+<style>
+.parent {
+  outline-color: yellow;
+}
+.target {
+  width: 50px;
+  height: 50px;
+  background-color: black;
+  display: inline-block;
+  outline: 12px solid white;
+  margin: 12px 12px;
+  outline-color: blue;
+}
+.expected {
+  background-color: lime;
+}
+</style>
+
+<body></body>
+
+<script>
+test_interpolation({
+  property: 'outline-color',
+  from: neutralKeyframe,
+  to: 'green',
+}, [
+  {at: -0.3, expect: 'rgb(0, 0, 255)'},
+  {at: 0, expect: 'rgb(0, 0, 255)'},
+  {at: 0.3, expect: 'rgb(0, 38, 179)'},
+  {at: 0.6, expect: 'rgb(0, 77, 102)'},
+  {at: 1, expect: 'rgb(0, 128, 0)'},
+  {at: 1.5, expect: 'rgb(0, 192, 0)'},
+]);
+
+test_interpolation({
+  property: 'outline-color',
+  from: 'initial',
+  to: 'green',
+}, [
+  {at: -0.3, expect: 'rgb(0, 0, 0)'},
+  {at: 0, expect: 'rgb(0, 0, 0)'},
+  {at: 0.3, expect: 'rgb(0, 38, 0)'},
+  {at: 0.6, expect: 'rgb(0, 77, 0)'},
+  {at: 1, expect: 'rgb(0, 128, 0)'},
+  {at: 1.5, expect: 'rgb(0, 192, 0)'},
+]);
+
+test_interpolation({
+  property: 'outline-color',
+  from: 'inherit',
+  to: 'green',
+}, [
+  {at: -0.3, expect: 'rgb(255, 255, 0)'},
+  {at: 0, expect: 'rgb(255, 255, 0)'},
+  {at: 0.3, expect: 'rgb(179, 217, 0)'},
+  {at: 0.6, expect: 'rgb(102, 179, 0)'},
+  {at: 1, expect: 'rgb(0, 128, 0)'},
+  {at: 1.5, expect: 'rgb(0, 65, 0)'},
+]);
+
+test_interpolation({
+  property: 'outline-color',
+  from: 'unset',
+  to: 'green',
+}, [
+  {at: -0.3, expect: 'rgb(0, 0, 0)'},
+  {at: 0, expect: 'rgb(0, 0, 0)'},
+  {at: 0.3, expect: 'rgb(0, 38, 0)'},
+  {at: 0.6, expect: 'rgb(0, 77, 0)'},
+  {at: 1, expect: 'rgb(0, 128, 0)'},
+  {at: 1.5, expect: 'rgb(0, 192, 0)'},
+]);
+
+test_interpolation({
+  property: 'outline-color',
+  from: 'white',
+  to: 'orange'
+}, [
+  {at: -0.3, expect: 'white'},
+  {at: 0, expect: 'white'},
+  {at: 0.3, expect: 'rgb(255, 228, 179)'},
+  {at: 0.6, expect: 'rgb(255, 201, 102)'},
+  {at: 1, expect: 'orange'},
+  {at: 1.5, expect: 'rgb(255, 120, 0)'},
+]);
+</script>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/animation/outline-offset-interpolation.html
@@ -0,0 +1,98 @@
+<!DOCTYPE html>
+<meta charset="UTF-8">
+<title>outline-offset interpolation</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-3/#outline-offset">
+<meta name="assert" content="outline-offset supports animation by computed value">
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/interpolation-testcommon.js"></script>
+
+<style>
+.parent {
+  outline: solid 0px;
+  outline-offset: 30px;
+}
+.target {
+  width: 50px;
+  height: 50px;
+  background-color: black;
+  display: inline-block;
+  margin: 40px 0px 0px 40px;
+  outline: 4px solid orange;
+  outline-offset: 10px;
+}
+.expected {
+  background-color: green;
+  margin-right: 18px;
+}
+</style>
+
+<body></body>
+
+<script>
+test_interpolation({
+  property: 'outline-offset',
+  from: neutralKeyframe,
+  to: '20px',
+}, [
+  {at: -0.3, expect: '7px'},
+  {at: 0, expect: '10px'},
+  {at: 0.3, expect: '13px'},
+  {at: 0.6, expect: '16px'},
+  {at: 1, expect: '20px'},
+  {at: 1.5, expect: '25px'},
+]);
+
+test_interpolation({
+  property: 'outline-offset',
+  from: 'initial',
+  to: '20px',
+}, [
+  {at: -0.3, expect: '-6px'},
+  {at: 0, expect: '0px'},
+  {at: 0.3, expect: '6px'},
+  {at: 0.6, expect: '12px'},
+  {at: 1, expect: '20px'},
+  {at: 1.5, expect: '30px'},
+]);
+
+test_interpolation({
+  property: 'outline-offset',
+  from: 'inherit',
+  to: '20px',
+}, [
+  {at: -0.3, expect: '33px'},
+  {at: 0, expect: '30px'},
+  {at: 0.3, expect: '27px'},
+  {at: 0.6, expect: '24px'},
+  {at: 1, expect: '20px'},
+  {at: 1.5, expect: '15px'},
+]);
+
+test_interpolation({
+  property: 'outline-offset',
+  from: 'unset',
+  to: '20px',
+}, [
+  {at: -0.3, expect: '-6px'},
+  {at: 0, expect: '0px'},
+  {at: 0.3, expect: '6px'},
+  {at: 0.6, expect: '12px'},
+  {at: 1, expect: '20px'},
+  {at: 1.5, expect: '30px'},
+]);
+
+test_interpolation({
+  property: 'outline-offset',
+  from: '-5px',
+  to: '5px',
+}, [
+  {at: -0.3, expect: '-8px'},
+  {at: 0, expect: '-5px'},
+  {at: 0.3, expect: '-2px'},
+  {at: 0.6, expect: '1px'},
+  {at: 1, expect: '5px'},
+  {at: 1.5, expect: '10px'},
+]);
+</script>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-ui/animation/outline-width-interpolation.html
@@ -0,0 +1,120 @@
+<!DOCTYPE html>
+<meta charset="UTF-8">
+<title>outline-width interpolation</title>
+<link rel="help" href="https://drafts.csswg.org/css-ui-3/#outline-width">
+<meta name="assert" content="outline-width supports animation by computed value">
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/css/support/interpolation-testcommon.js"></script>
+
+<style>
+.parent {
+  outline: solid transparent;
+  outline-width: 30px;
+}
+.target {
+  width: 50px;
+  height: 50px;
+  background-color: black;
+  display: inline-block;
+  margin: 18px;
+  outline: solid orange;
+  outline-width: 10px;
+  opacity: 0.5;
+}
+.expected {
+  background-color: green;
+}
+</style>
+
+<body></body>
+
+<script>
+// NOTE: The below tests make assumptions about the values of medium (for unset
+// and initial) and thick, namely that:
+//   * medium=3px
+//   * thick=3px
+//
+// A better version of these tests would dynamically generate the expected values
+// by querying the computed style from the UA.
+
+test_interpolation({
+  property: 'outline-width',
+  from: neutralKeyframe,
+  to: '20px',
+}, [
+  {at: -0.3, expect: '7px'},
+  {at: 0, expect: '10px'},
+  {at: 0.3, expect: '13px'},
+  {at: 0.6, expect: '16px'},
+  {at: 1, expect: '20px'},
+  {at: 1.5, expect: '25px'},
+]);
+
+test_interpolation({
+  property: 'outline-width',
+  from: 'initial',
+  to: '20px',
+}, [
+  {at: -0.3, expect: '0px'},
+  {at: 0, expect: '3px'},
+  {at: 0.3, expect: '8px'},
+  {at: 0.6, expect: '13px'},
+  {at: 1, expect: '20px'},
+  {at: 1.5, expect: '28px'},
+]);
+
+test_interpolation({
+  property: 'outline-width',
+  from: 'inherit',
+  to: '20px',
+}, [
+  {at: -0.3, expect: '33px'},
+  {at: 0, expect: '30px'},
+  {at: 0.3, expect: '27px'},
+  {at: 0.6, expect: '24px'},
+  {at: 1, expect: '20px'},
+  {at: 1.5, expect: '15px'},
+]);
+
+test_interpolation({
+  property: 'outline-width',
+  from: 'unset',
+  to: '20px',
+}, [
+  {at: -0.3, expect: '0px'},
+  {at: 0, expect: '3px'},
+  {at: 0.3, expect: '8px'},
+  {at: 0.6, expect: '13px'},
+  {at: 1, expect: '20px'},
+  {at: 1.5, expect: '28px'},
+]);
+
+test_interpolation({
+  property: 'outline-width',
+  from: '0px',
+  to: '10px',
+}, [
+  {at: -0.3, expect: '0px'}, // CSS outline-width can't be negative.
+  {at: 0, expect: '0px'},
+  {at: 0.3, expect: '3px'},
+  {at: 0.6, expect: '6px'},
+  {at: 1, expect: '10px'},
+  {at: 1.5, expect: '15px'}
+]);
+
+test_interpolation({
+  property: 'outline-width',
+  from: 'thick',
+  to: '15px',
+}, [
+  {at: -2, expect: '0px'}, // CSS outline-width can't be negative.
+  {at: -0.3, expect: '2px'},
+  {at: 0, expect: '5px'},
+  {at: 0.3, expect: '8px'},
+  {at: 0.6, expect: '11px'},
+  {at: 1, expect: '15px'},
+  {at: 1.5, expect: '20px'}
+]);
+</script>