Skip to content

GitLab

T
tangled
Commit 612ac411 authored by ericwilligers's avatar ericwilligers Committed by Commit bot
Browse files
Options

CSS Motion Path: delete implementation of motion-offset property 

The 'motion-offset' property has been replaced by 'offset-distance'.

'motion-offset' is among the properties disabled in M58.

Intent to Remove: https://groups.google.com/a/chromium.org/d/msg/blink-dev/o1C5NzGf9Q0/sbaLF1MbAgAJ

BUG=711937

Review-Url: https://codereview.chromium.org/2841863005
Cr-Commit-Position: refs/heads/master@{#468287}
parent 91f64acc
Hide whitespace changes
Inline Side-by-side
Showing with 32 additions and 281 deletions
third_party/WebKit/LayoutTests/animations/animations-responsive-motionOffset.html → third_party/WebKit/LayoutTests/animations/animations-responsive-offsetDistance.html
View file @ 612ac411
......@@ -8,8 +8,8 @@ var element = document.getElementById('element');
test(function() {
var keyframes = [
{motionOffset: '4%'},
{motionOffset: '12%'}
{offsetDistance: '4%'},
{offsetDistance: '12%'}
];
element.style.width = '100';
......@@ -19,13 +19,13 @@ test(function() {
player.currentTime = 15;
element.style.width = '300';
element.style.height = '600';
assert_equals(getComputedStyle(element).motionOffset, '10%');
assert_equals(getComputedStyle(element).offsetDistance, '10%');
}, 'Motion position percentages are supported');
test(function() {
var keyframes = [
{motionOffset: '8em'},
{motionOffset: '16em'}
{offsetDistance: '8em'},
{offsetDistance: '16em'}
];
element.style.fontSize = '10px';
......@@ -33,7 +33,7 @@ test(function() {
player.pause();
player.currentTime = 5;
element.style.fontSize = '20px';
assert_equals(getComputedStyle(element).motionOffset, '200px');
assert_equals(getComputedStyle(element).offsetDistance, '200px');
}, 'Motion position lengths respond to style changes');
</script>
third_party/WebKit/LayoutTests/animations/composition/motion-offset-composition.html deleted 100644 → 0
View file @ 91f64acc
<!DOCTYPE html>
<meta charset="UTF-8">
<body>
<script src="../interpolation/resources/interpolation-test.js"></script>
<script>
assertComposition({
property: 'motion-offset',
underlying: '50px',
addFrom: '100px',
addTo: '200px',
}, [
{at: -0.3, is: '120px'},
{at: 0, is: '150px'},
{at: 0.5, is: '200px'},
{at: 1, is: '250px'},
{at: 1.5, is: '300px'},
]);
assertComposition({
property: 'motion-offset',
underlying: '100px',
addFrom: '10px',
addTo: '2px',
}, [
{at: -0.5, is: '114px'},
{at: 0, is: '110px'},
{at: 0.5, is: '106px'},
{at: 1, is: '102px'},
{at: 1.5, is: '98px'},
]);
assertComposition({
property: 'motion-offset',
underlying: '10%',
addFrom: '100px',
addTo: '20%',
}, [
{at: -0.3, is: 'calc(130px + 4%)'},
{at: 0, is: 'calc(100px + 10%)'},
{at: 0.5, is: 'calc(50px + 20%)'},
{at: 1, is: '30%'},
{at: 1.5, is: 'calc(-50px + 40%)'},
]);
assertComposition({
property: 'motion-offset',
underlying: '50px',
addFrom: '100px',
replaceTo: '200px',
}, [
{at: -0.3, is: '135px'},
{at: 0, is: '150px'},
{at: 0.5, is: '175px'},
{at: 1, is: '200px'},
{at: 1.5, is: '225px'},
]);
</script>
</body>
third_party/WebKit/LayoutTests/animations/interpolation/motion-offset-interpolation.html deleted 100644 → 0
View file @ 91f64acc
<!DOCTYPE html>
<meta charset="UTF-8">
<style>
.parent {
motion-offset: 30px;
}
.target {
width: 10px;
height: 10px;
background-color: black;
offset-path: path("M0 0H 400");
motion-offset: 10px;
}
.expected {
background-color: green;
}
</style>
<body>
<script src="resources/interpolation-test.js"></script>
<script>
assertInterpolation({
property: 'motion-offset',
from: neutralKeyframe,
to: '20px',
}, [
{at: -0.3, is: '7px'},
{at: 0, is: '10px'},
{at: 0.3, is: '13px'},
{at: 0.6, is: '16px'},
{at: 1, is: '20px'},
{at: 1.5, is: '25px'},
]);
assertInterpolation({
property: 'motion-offset',
from: 'initial',
to: '20px',
}, [
{at: -0.3, is: '-6px'},
{at: 0, is: '0px'},
{at: 0.3, is: '6px'},
{at: 0.6, is: '12px'},
{at: 1, is: '20px'},
{at: 1.5, is: '30px'},
]);
assertInterpolation({
property: 'motion-offset',
from: 'inherit',
to: '20px',
}, [
{at: -0.3, is: '33px'},
{at: 0, is: '30px'},
{at: 0.3, is: '27px'},
{at: 0.6, is: '24px'},
{at: 1, is: '20px'},
{at: 1.5, is: '15px'},
]);
assertInterpolation({
property: 'motion-offset',
from: 'unset',
to: '20px',
}, [
{at: -0.3, is: '-6px'},
{at: 0, is: '0px'},
{at: 0.3, is: '6px'},
{at: 0.6, is: '12px'},
{at: 1, is: '20px'},
{at: 1.5, is: '30px'},
]);
assertInterpolation({
property: 'motion-offset',
from: '10px',
to: '50px',
}, [
{at: -0.3, is: '-2px'},
{at: 0, is: '10px'},
{at: 0.3, is: '22px'},
{at: 0.6, is: '34px'},
{at: 1, is: '50px'},
{at: 1.5, is: '70px'},
]);
assertInterpolation({
property: 'motion-offset',
from: '10px',
to: '100%',
}, [
// These expectations are expected to fail on the current animation engine
// with different (but equivalent) calc expressions.
{at: -0.3, is: 'calc(13px + -30%)'},
{at: 0, is: '10px'},
{at: 0.3, is: 'calc(7px + 30%)'},
{at: 0.6, is: 'calc(4px + 60%)'},
{at: 1, is: '100%'},
{at: 1.5, is: 'calc(-5px + 150%)'},
]);
</script>
</body>
third_party/WebKit/LayoutTests/animations/retain-zero-percent.html
View file @ 612ac411
......@@ -3,9 +3,9 @@
<div id="target"></div>
<script>
test(function() {
var animation = target.animate([{motionOffset: '-1%'}, {motionOffset: '1%'}], 1);
var animation = target.animate([{offsetDistance: '-1%'}, {offsetDistance: '1%'}], 1);
animation.pause();
animation.currentTime = 0.5;
assert_equals(getComputedStyle(target).motionOffset, '0%');
assert_equals(getComputedStyle(target).offsetDistance, '0%');
});
</script>
third_party/WebKit/LayoutTests/css-parser/unitless-length-quirk.html
View file @ 612ac411
......@@ -8,7 +8,7 @@ assert_valid_value("top", "30", "30px", true);
assert_valid_value("minWidth", "40", "40px", true);
assert_invalid_value("outlineWidth", "50");
assert_invalid_value("motionOffset", "60");
assert_invalid_value("offsetDistance", "60");
assert_invalid_value("webkitPaddingStart", "12");
assert_invalid_value("webkitMarginBefore", "24");
</script>
third_party/WebKit/LayoutTests/css3/motion-path/motion-offset.html deleted 100644 → 0
View file @ 91f64acc
<!DOCTYPE html>
<html>
<head>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<style>
#div2 {
motion-offset: 0;
}
#div3 {
motion-offset: 100px;
}
#div4 {
motion-offset: -200px;
}
#div5 {
motion-offset: 50%;
}
#div6 {
motion-offset: inherit;
}
</style>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<div id="div4"></div>
<div id="div5">
<div id="div6"></div>
<div id="div7"></div>
</div>
<span id="span1" style="motion-offset: 25%"></span>
<script>
"use strict";
test(function() {
assert_equals(getComputedStyle(div1, null).motionOffset, '0px');
}, 'motion-offset default is 0px');
test(function() {
assert_equals(getComputedStyle(div2, null).motionOffset, '0px');
}, 'motion-offset 0 is 0px');
test(function() {
assert_equals(getComputedStyle(div3, null).motionOffset, '100px');
}, 'motion-offset can be positive');
test(function() {
assert_equals(getComputedStyle(div4, null).motionOffset, '-200px');
}, 'motion-offset allows negative values');
test(function() {
assert_equals(getComputedStyle(div5, null).motionOffset, '50%');
}, 'motion-offset can be a percentage');
test(function() {
assert_equals(getComputedStyle(div6, null).motionOffset, '50%');
}, 'motion-offset can be explicitly inherited');
test(function() {
assert_equals(getComputedStyle(div7, null).motionOffset, '0px');
}, 'motion-offset is not inherited by default');
test(function() {
assert_equals(span1.style.motionOffset, '25%');
}, 'motion-offset style can be set inline');
</script>
</body>
</html>
third_party/WebKit/LayoutTests/css3/motion-path/motion-properties-deprecated-expected.txt deleted 100644 → 0
View file @ 91f64acc
CONSOLE WARNING: motion-offset is deprecated and will be removed in M58, around April 2017. Please use offset-distance instead. See https://www.chromestatus.com/features/6390764217040896 for more details.
PASS successfullyParsed is true
TEST COMPLETE
third_party/WebKit/LayoutTests/css3/motion-path/motion-properties-deprecated.html deleted 100644 → 0
View file @ 91f64acc
<!DOCTYPE html>
<script src="../../resources/js-test.js"></script>
<style>
.foo {
motion-offset: 50px;
}
</style>
third_party/WebKit/ManualTests/animation/compositor-transform-fill-forwards-with-motion-path.html
View file @ 612ac411
......@@ -15,12 +15,14 @@ div {
left: 100px;
top: 200px;
offset-path: path('m 0 0 h 400');
transform-origin: 0px 0px;
}
#div2 {
z-index: 3;
left: 100px;
top: 300px;
transform-origin: 0px 0px;
}
</style>
......@@ -40,8 +42,8 @@ var div2 = document.getElementById('div2');
function startAnimations() {
div1.animate([
{motionOffset: '0%'},
{motionOffset: '100%'}
{offsetDistance: '0%'},
{offsetDistance: '100%'}
], {
duration: 1000,
delay: 1000,
......@@ -65,11 +67,11 @@ function startAnimations() {
fill: 'forwards'
});
setTimeout(function() {
div2.style.motionPath = 'path("m 0 0 h -400")';
div2.style.motionRotation = '0deg';
div2.style.offsetPath = 'path("m 0 0 h -400")';
div2.style.offsetRotate = '0deg';
div2.animate([
{motionOffset: '0%'},
{motionOffset: '100%'}
{offsetDistance: '0%'},
{offsetDistance: '100%'}
], {
duration: 1000,
fill: 'forwards'
......
third_party/WebKit/ManualTests/animation/compositor-transform-halted-by-motion-path.html
View file @ 612ac411
......@@ -14,12 +14,14 @@ div {
z-index: 1;
left: 100px;
top: 200px;
transform-origin: 0px 0px;
}
#div2 {
z-index: 3;
left: 100px;
top: 300px;
transform-origin: 0px 0px;
}
</style>
......@@ -55,11 +57,11 @@ function startAnimations() {
delay: 1000
});
setTimeout(function() {
div2.style.motionPath = 'path("m 0 0 h -800")';
div2.style.motionRotation = '0deg';
div2.style.offsetPath = 'path("m 0 0 h -800")';
div2.style.offsetRotate = '0deg';
div2.animate([
{motionOffset: '0%'},
{motionOffset: '100%'}
{offsetDistance: '0%'},
{offsetDistance: '100%'}
], {
duration: 1000
});
......
third_party/WebKit/ManualTests/animation/compositor-transform-prevented-by-motion-path.html
View file @ 612ac411
......@@ -41,8 +41,8 @@ var div2 = document.getElementById('div2');
function startAnimations() {
div1.animate([
{motionOffset: '0%'},
{motionOffset: '100%'}
{offsetDistance: '0%'},
{offsetDistance: '100%'}
], {
duration: 2000,
delay: 1000
......@@ -56,8 +56,8 @@ function startAnimations() {
});
div2.animate([
{motionOffset: '0%'},
{motionOffset: '100%'}
{offsetDistance: '0%'},
{offsetDistance: '100%'}
], {
duration: 2000,
delay: 1000
......
third_party/WebKit/Source/core/css/CSSProperties.json5
View file @ 612ac411
......@@ -1389,10 +1389,6 @@
name_for_methods: "BlendMode",
type_name: "blink::WebBlendMode",
},
{
name: "motion-offset",
alias_for: "offset-distance",
},
{
name: "object-fit",
type_name: "ObjectFit",
......
third_party/WebKit/Source/core/frame/Deprecation.cpp
View file @ 612ac411
......@@ -15,7 +15,6 @@
namespace {
enum Milestone {
M58,
M59,
M60,
M61,
......@@ -27,8 +26,6 @@ const char* milestoneString(Milestone milestone) {
// https://www.chromium.org/developers/calendar
switch (milestone) {
case M58:
return "M58, around April 2017";
case M59:
return "M59, around June 2017";
case M60:
......@@ -117,13 +114,10 @@ void Deprecation::WarnOnDeprecatedProperties(
}
String Deprecation::DeprecationMessage(CSSPropertyID unresolved_property) {
switch (unresolved_property) {
case CSSPropertyAliasMotionOffset:
return replacedWillBeRemoved("motion-offset", "offset-distance", M58,
"6390764217040896");
default:
return g_empty_string;
}
// TODO: Add a switch here when there are properties that we intend to
// deprecate.
// Returning an empty string for now.
return g_empty_string;
}
void Deprecation::CountDeprecation(const LocalFrame* frame,
......
third_party/WebKit/Source/core/frame/UseCounter.cpp
View file @ 612ac411
......@@ -882,8 +882,7 @@ int UseCounter::MapCSSPropertyIdToCSSSampleIdForHistogram(
case CSSPropertyJustifyItems:
return 455;
// CSSPropertyMotionPath was 457.
case CSSPropertyAliasMotionOffset:
return 458;
// CSSPropertyAliasMotionOffset was 458.
// CSSPropertyAliasMotionRotation was 459.
// CSSPropertyMotion was 460.
case CSSPropertyX:
......
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