Skip to content

GitLab

T
tangled
Commit a0c4bd61 authored by Darren Shen's avatar Darren Shen Committed by Commit Bot
Browse files
Options

[css-typed-om] Support animation and transition properties. 

This patch supports all the animation/transition properties except
animation-name and transition-property (need spec feedback first).
We also fix the <time> tests so that computed time values use canonical
units as spec'd in [1].

[1] https://github.com/w3c/css-houdini-drafts/issues/725

Bug: 820299
Change-Id: I7c038ce419f8bdb1c789493554776c5e7f9810c7
Reviewed-on: https://chromium-review.googlesource.com/983094
Commit-Queue: Darren Shen <shend@chromium.org>
Reviewed-by: default avatarRune Lillesveen <futhark@chromium.org>
Cr-Commit-Position: refs/heads/master@{#548017}
parent 00aefbd4
Hide whitespace changes
Inline Side-by-side
Showing with 257 additions and 13 deletions
third_party/WebKit/LayoutTests/external/wpt/css/css-typed-om/the-stylepropertymap/properties/animation-delay.html 0 → 100644
View file @ a0c4bd61
<!doctype html>
<meta charset="utf-8">
<title>'animation-delay' property</title>
<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#dom-stylepropertymap-get">
<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#dom-stylepropertymap-set">
<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#property-stle-value-normalization">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../../resources/testhelper.js"></script>
<script src="resources/testsuite.js"></script>
<body>
<div id="log"></div>
<script>
'use strict';
runListValuedPropertyTests('animation-delay', [
{ syntax: '<time>' }
]);
</script>
third_party/WebKit/LayoutTests/external/wpt/css/css-typed-om/the-stylepropertymap/properties/animation-duration.html 0 → 100644
View file @ a0c4bd61
<meta charset="utf-8">
<title>'animation-duration' property</title>
<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#dom-stylepropertymap-get">
<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#dom-stylepropertymap-set">
<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#property-stle-value-normalization">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../../resources/testhelper.js"></script>
<script src="resources/testsuite.js"></script>
<body>
<div id="log"></div>
<script>
'use strict';
runListValuedPropertyTests('animation-duration', [
{ syntax: '<time>' },
]);
</script>
third_party/WebKit/LayoutTests/external/wpt/css/css-typed-om/the-stylepropertymap/properties/animation-fill-mode.html 0 → 100644
View file @ a0c4bd61
<!doctype html>
<meta charset="utf-8">
<title>'animation-fill-mode' property</title>
<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#dom-stylepropertymap-get">
<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#dom-stylepropertymap-set">
<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#property-stle-value-normalization">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../../resources/testhelper.js"></script>
<script src="resources/testsuite.js"></script>
<body>
<div id="log"></div>
<script>
'use strict';
runListValuedPropertyTests('animation-fill-mode', [
{ syntax: 'none' },
{ syntax: 'forwards' },
{ syntax: 'backwards' },
{ syntax: 'both' },
]);
</script>
third_party/WebKit/LayoutTests/external/wpt/css/css-typed-om/the-stylepropertymap/properties/animation-iteration-count.html 0 → 100644
View file @ a0c4bd61
<!doctype html>
<meta charset="utf-8">
<title>'animation-iteration-count' property</title>
<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#dom-stylepropertymap-get">
<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#dom-stylepropertymap-set">
<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#property-stle-value-normalization">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../../resources/testhelper.js"></script>
<script src="resources/testsuite.js"></script>
<body>
<div id="log"></div>
<script>
'use strict';
runListValuedPropertyTests('animation-iteration-count', [
{ syntax: 'infinite' },
{ syntax: '<number>' },
]);
</script>
third_party/WebKit/LayoutTests/external/wpt/css/css-typed-om/the-stylepropertymap/properties/animation-play-state.html 0 → 100644
View file @ a0c4bd61
<!doctype html>
<meta charset="utf-8">
<title>'animation-play-state' property</title>
<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#dom-stylepropertymap-get">
<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#dom-stylepropertymap-set">
<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#property-stle-value-normalization">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../../resources/testhelper.js"></script>
<script src="resources/testsuite.js"></script>
<body>
<div id="log"></div>
<script>
'use strict';
runListValuedPropertyTests('animation-play-state', [
{ syntax: 'running' },
{ syntax: 'paused' },
]);
</script>
third_party/WebKit/LayoutTests/external/wpt/css/css-typed-om/the-stylepropertymap/properties/animation-timing-function.html 0 → 100644
View file @ a0c4bd61
<!doctype html>
<meta charset="utf-8">
<title>'animation-timing-function' property</title>
<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#dom-stylepropertymap-get">
<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#dom-stylepropertymap-set">
<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#property-stle-value-normalization">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../../resources/testhelper.js"></script>
<script src="resources/testsuite.js"></script>
<body>
<div id="log"></div>
<script>
'use strict';
runListValuedPropertyTests('animation-timing-function', [
{ syntax: 'linear' },
{ syntax: 'ease' },
{ syntax: 'ease-in' },
{ syntax: 'ease-out' },
{ syntax: 'ease-in-out' },
{ syntax: 'step-start' },
{ syntax: 'step-end' },
]);
runUnsupportedPropertyTests('animation-timing-function', [
'cubic-bezier(0.1, 0.7, 1.0, 0.1)', 'steps(4, end)', 'frames(10)'
]);
</script>
third_party/WebKit/LayoutTests/external/wpt/css/css-typed-om/the-stylepropertymap/properties/animation.html 0 → 100644
View file @ a0c4bd61
<!doctype html>
<meta charset="utf-8">
<title>'animation' property</title>
<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#dom-stylepropertymap-get">
<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#dom-stylepropertymap-set">
<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#property-stle-value-normalization">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../../resources/testhelper.js"></script>
<script src="resources/testsuite.js"></script>
<body>
<div id="log"></div>
<script>
'use strict';
runUnsupportedPropertyTests('animation', [
'slidein 3s ease-in 1s infinite reverse both running',
'slidein .5s linear 1s infinite alternate'
]);
</script>
third_party/WebKit/LayoutTests/external/wpt/css/css-typed-om/the-stylepropertymap/properties/resources/testsuite.js
View file @ a0c4bd61
......@@ -102,7 +102,9 @@ const gTestSyntaxExamples = {
},
{
description: "negative milliseconds",
input: new CSSUnitValue(-3.14, 'ms')
input: new CSSUnitValue(-3.14, 'ms'),
// Computed values use canonical units
defaultComputed: (_, result) => assert_style_value_equals(result, new CSSUnitValue(-0.00314, 's'))
},
{
description: "positive seconds",
......
third_party/WebKit/LayoutTests/external/wpt/css/css-typed-om/the-stylepropertymap/properties/transition-delay.html 0 → 100644
View file @ a0c4bd61
<!doctype html>
<meta charset="utf-8">
<title>'transition-delay' property</title>
<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#dom-stylepropertymap-get">
<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#dom-stylepropertymap-set">
<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#property-stle-value-normalization">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../../resources/testhelper.js"></script>
<script src="resources/testsuite.js"></script>
<body>
<div id="log"></div>
<script>
'use strict';
runListValuedPropertyTests('transition-delay', [
{ syntax: '<time>' }
]);
</script>
third_party/WebKit/LayoutTests/external/wpt/css/css-typed-om/the-stylepropertymap/properties/transition-duration-expected.txt deleted 100644 → 0
View file @ 00aefbd4
This is a testharness.js-based test.
PASS Can set 'transition-duration' to CSS-wide keywords
PASS Can set 'transition-duration' to var() references
FAIL Can set 'transition-duration' to a time assert_approx_equals: expected -3.14 +/- 0.000001 but got -0.00314
PASS Setting 'transition-duration' to a length throws TypeError
PASS Setting 'transition-duration' to a percent throws TypeError
PASS Setting 'transition-duration' to a number throws TypeError
PASS Setting 'transition-duration' to a position throws TypeError
PASS Setting 'transition-duration' to a URL throws TypeError
PASS Setting 'transition-duration' to a transform throws TypeError
Harness: the test ran to completion.
third_party/WebKit/LayoutTests/external/wpt/css/css-typed-om/the-stylepropertymap/properties/transition-expected.txt 0 → 100644
View file @ a0c4bd61
This is a testharness.js-based test.
PASS 'transition' does not supported 'none'
FAIL 'transition' does not supported 'none, none' assert_not_equals: Unsupported value must not be null got disallowed value null
PASS 'transition' does not supported 'margin-right 4s'
PASS 'transition' does not supported 'all 0.5s ease-out, color 1s'
Harness: the test ran to completion.
third_party/WebKit/LayoutTests/external/wpt/css/css-typed-om/the-stylepropertymap/properties/transition-timing-function.html 0 → 100644
View file @ a0c4bd61
<!doctype html>
<meta charset="utf-8">
<title>'transition-timing-function' property</title>
<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#dom-stylepropertymap-get">
<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#dom-stylepropertymap-set">
<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#property-stle-value-normalization">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../../resources/testhelper.js"></script>
<script src="resources/testsuite.js"></script>
<body>
<div id="log"></div>
<script>
'use strict';
runListValuedPropertyTests('transition-timing-function', [
{ syntax: 'linear' },
{ syntax: 'ease' },
{ syntax: 'ease-in' },
{ syntax: 'ease-out' },
{ syntax: 'ease-in-out' },
{ syntax: 'step-start' },
{ syntax: 'step-end' },
]);
runUnsupportedPropertyTests('transition-timing-function', [
'cubic-bezier(0.1, 0.7, 1.0, 0.1)', 'steps(4, end)', 'frames(10)'
]);
</script>
third_party/WebKit/LayoutTests/external/wpt/css/css-typed-om/the-stylepropertymap/properties/transition.html 0 → 100644
View file @ a0c4bd61
<!doctype html>
<meta charset="utf-8">
<title>'transition' property</title>
<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#dom-stylepropertymap-get">
<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#dom-stylepropertymap-set">
<link rel="help" href="https://drafts.css-houdini.org/css-typed-om-1/#property-stle-value-normalization">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="../../resources/testhelper.js"></script>
<script src="resources/testsuite.js"></script>
<body>
<div id="log"></div>
<script>
'use strict';
runUnsupportedPropertyTests('transition', [
'none', 'none, none', 'margin-right 4s', 'all 0.5s ease-out, color 1s'
]);
</script>
third_party/WebKit/Source/core/css/CSSProperties.json5
View file @ a0c4bd61
......@@ -355,6 +355,8 @@
property_methods: ["ParseSingleValue", "CSSValueFromComputedStyleInternal"],
custom_apply_functions_all: true,
priority: "Animation",
typedom_types: ["Time"],
separator: ",",
},
{
name: "animation-direction",
......@@ -364,6 +366,7 @@
separator: ",",
custom_apply_functions_all: true,
priority: "Animation",
separator: ",",
},
{
name: "animation-duration",
......@@ -371,12 +374,17 @@
separator: ",",
custom_apply_functions_all: true,
priority: "Animation",
typedom_types: ["Time"],
separator: ",",
},
{
name: "animation-fill-mode",
property_methods: ["ParseSingleValue", "CSSValueFromComputedStyleInternal"],
custom_apply_functions_all: true,
priority: "Animation",
keywords: ["none", "forwards", "backwards", "both"],
typedom_types: ["Keyword"],
separator: ",",
},
{
name: "animation-iteration-count",
......@@ -385,6 +393,9 @@
separator: ",",
custom_apply_functions_all: true,
priority: "Animation",
keywords: ["infinite"],
typedom_types: ["Keyword", "Number"],
separator: ",",
},
{
name: "animation-name",
......@@ -397,18 +408,26 @@
property_methods: ["ParseSingleValue", "CSSValueFromComputedStyleInternal"],
custom_apply_functions_all: true,
priority: "Animation",
keywords: ["running", "paused"],
typedom_types: ["Keyword"],
separator: ",",
},
{
name: "animation-timing-function",
property_methods: ["ParseSingleValue", "CSSValueFromComputedStyleInternal"],
custom_apply_functions_all: true,
priority: "Animation",
keywords: ["linear", "ease", "ease-in", "ease-out", "ease-in-out", "step-start", "step-end"],
typedom_types: ["Keyword"],
separator: ",",
},
{
name: "transition-delay",
property_methods: ["ParseSingleValue", "CSSValueFromComputedStyleInternal"],
custom_apply_functions_all: true,
priority: "Animation",
typedom_types: ["Time"],
separator: ",",
},
{
name: "transition-duration",
......@@ -429,6 +448,9 @@
property_methods: ["ParseSingleValue", "CSSValueFromComputedStyleInternal"],
custom_apply_functions_all: true,
priority: "Animation",
keywords: ["linear", "ease", "ease-in", "ease-out", "ease-in-out", "step-start", "step-end"],
typedom_types: ["Keyword"],
separator: ",",
},
// High Priority and all other font properties.
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment