Commit 9274fd6b authored by ericwilligers's avatar ericwilligers Committed by Commit bot

CSS Motion Path: delete implementation of motion-rotation property

The 'motion-rotation' property has been replaced by 'offset-rotate'.

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

BUG=711937

Review-Url: https://codereview.chromium.org/2840943003
Cr-Commit-Position: refs/heads/master@{#467952}
parent 6273712b
...@@ -283,7 +283,6 @@ crbug.com/591099 animations/interpolation/line-height-interpolation.html [ Crash ...@@ -283,7 +283,6 @@ crbug.com/591099 animations/interpolation/line-height-interpolation.html [ Crash
crbug.com/591099 animations/interpolation/margin-interpolation.html [ Crash ] crbug.com/591099 animations/interpolation/margin-interpolation.html [ Crash ]
crbug.com/591099 animations/interpolation/max-height-interpolation.html [ Crash ] crbug.com/591099 animations/interpolation/max-height-interpolation.html [ Crash ]
crbug.com/591099 animations/interpolation/min-height-interpolation.html [ Crash ] crbug.com/591099 animations/interpolation/min-height-interpolation.html [ Crash ]
crbug.com/591099 animations/interpolation/motion-rotation-interpolation.html [ Crash ]
crbug.com/591099 animations/interpolation/object-position-interpolation.html [ Crash ] crbug.com/591099 animations/interpolation/object-position-interpolation.html [ Crash ]
crbug.com/591099 animations/interpolation/offset-rotate-interpolation.html [ Crash ] crbug.com/591099 animations/interpolation/offset-rotate-interpolation.html [ Crash ]
crbug.com/591099 animations/interpolation/offset-rotation-interpolation.html [ Crash ] crbug.com/591099 animations/interpolation/offset-rotation-interpolation.html [ Crash ]
...@@ -22669,7 +22668,6 @@ crbug.com/591099 virtual/threaded/animations/interpolation/line-height-interpola ...@@ -22669,7 +22668,6 @@ crbug.com/591099 virtual/threaded/animations/interpolation/line-height-interpola
crbug.com/591099 virtual/threaded/animations/interpolation/margin-interpolation.html [ Crash ] crbug.com/591099 virtual/threaded/animations/interpolation/margin-interpolation.html [ Crash ]
crbug.com/591099 virtual/threaded/animations/interpolation/max-height-interpolation.html [ Crash ] crbug.com/591099 virtual/threaded/animations/interpolation/max-height-interpolation.html [ Crash ]
crbug.com/591099 virtual/threaded/animations/interpolation/min-height-interpolation.html [ Crash ] crbug.com/591099 virtual/threaded/animations/interpolation/min-height-interpolation.html [ Crash ]
crbug.com/591099 virtual/threaded/animations/interpolation/motion-rotation-interpolation.html [ Crash ]
crbug.com/591099 virtual/threaded/animations/interpolation/object-position-interpolation.html [ Crash ] crbug.com/591099 virtual/threaded/animations/interpolation/object-position-interpolation.html [ Crash ]
crbug.com/591099 virtual/threaded/animations/interpolation/offset-rotate-interpolation.html [ Crash ] crbug.com/591099 virtual/threaded/animations/interpolation/offset-rotate-interpolation.html [ Crash ]
crbug.com/591099 virtual/threaded/animations/interpolation/offset-rotation-interpolation.html [ Crash ] crbug.com/591099 virtual/threaded/animations/interpolation/offset-rotation-interpolation.html [ Crash ]
...@@ -4,7 +4,7 @@ accessibility/insert-adjacent-html-causes-crash.xhtml ...@@ -4,7 +4,7 @@ accessibility/insert-adjacent-html-causes-crash.xhtml
animations/animation-shorthand-overriding.html animations/animation-shorthand-overriding.html
animations/empty-keyframes.html animations/empty-keyframes.html
animations/interpolation/border-image-slice-interpolation-stability.html animations/interpolation/border-image-slice-interpolation-stability.html
animations/responsive/motion-rotation-responsive.html animations/responsive/offset-rotate-responsive.html
animations/svg-attribute-composition/svg-bias-composition.html animations/svg-attribute-composition/svg-bias-composition.html
animations/svg-attribute-interpolation/svg-numOctaves-interpolation.html animations/svg-attribute-interpolation/svg-numOctaves-interpolation.html
bluetooth/characteristic/notifications/concurrent-stops.html bluetooth/characteristic/notifications/concurrent-stops.html
......
<!DOCTYPE html>
<body>
<script src="../interpolation/resources/interpolation-test.js"></script>
<script>
assertComposition({
property: 'motion-rotation',
underlying: '20deg',
addFrom: '10deg',
addTo: '20deg',
}, [
{at: -0.3, is: '27deg'},
{at: 0, is: '30deg'},
{at: 0.3, is: '33deg'},
{at: 0.6, is: '36deg'},
{at: 1, is: '40deg'},
{at: 1.5, is: '45deg'},
]);
assertComposition({
property: 'motion-rotation',
underlying: 'auto 20deg',
addFrom: '10deg',
addTo: '20deg',
}, [
{at: -0.3, is: '7deg'},
{at: 0, is: '10deg'},
{at: 0.3, is: '13deg'},
{at: 0.6, is: '16deg'},
{at: 1, is: '20deg'},
{at: 1.5, is: '25deg'},
]);
assertComposition({
property: 'motion-rotation',
underlying: 'auto 20deg',
addFrom: 'reverse 10deg',
addTo: 'auto 20deg',
}, [
{at: -0.3, is: 'auto 261deg'},
{at: 0, is: 'auto 210deg'},
{at: 0.3, is: 'auto 159deg'},
{at: 0.6, is: 'auto 108deg'},
{at: 1, is: 'auto 40deg'},
{at: 1.5, is: 'auto -45deg'},
]);
assertComposition({
property: 'motion-rotation',
underlying: '20deg',
addFrom: 'reverse 10deg',
addTo: '20deg',
}, [
{at: -0.3, is: 'auto 190deg'},
{at: 0, is: 'auto 190deg'},
{at: 0.3, is: 'auto 190deg'},
{at: 0.6, is: '40deg'},
{at: 1, is: '40deg'},
{at: 1.5, is: '40deg'},
]);
assertComposition({
property: 'motion-rotation',
underlying: '20deg',
replaceFrom: 'reverse 10deg',
addTo: '20deg',
}, [
{at: -0.3, is: 'auto 190deg'},
{at: 0, is: 'auto 190deg'},
{at: 0.3, is: 'auto 190deg'},
{at: 0.6, is: '40deg'},
{at: 1, is: '40deg'},
{at: 1.5, is: '40deg'},
]);
assertComposition({
property: 'motion-rotation',
underlying: '20deg',
addFrom: '10deg',
replaceTo: '10deg',
}, [
{at: -0.3, is: '36deg'},
{at: 0, is: '30deg'},
{at: 0.3, is: '24deg'},
{at: 0.6, is: '18deg'},
{at: 1, is: '10deg'},
{at: 1.5, is: '0deg'},
]);
</script>
</body>
<!DOCTYPE html>
<meta charset="UTF-8">
<style>
.parent {
motion-rotation: 30deg;
}
.target {
width: 80px;
height: 80px;
display: inline-block;
background-color: black;
margin-right: 5px;
motion-rotation: 10deg;
}
.expected {
background-color: green;
margin-right: 15px;
}
</style>
<body>
<script src="resources/interpolation-test.js"></script>
<script>
assertInterpolation({
property: 'motion-rotation',
from: neutralKeyframe,
to: '20deg',
}, [
{at: -0.3, is: '7deg'},
{at: 0, is: '10deg'},
{at: 0.3, is: '13deg'},
{at: 0.6, is: '16deg'},
{at: 1, is: '20deg'},
{at: 1.5, is: '25deg'},
]);
assertNoInterpolation({
property: 'motion-rotation',
from: 'initial',
to: '20deg',
});
assertInterpolation({
property: 'motion-rotation',
from: 'inherit',
to: '20deg',
}, [
{at: -0.3, is: '33deg'},
{at: 0, is: '30deg'},
{at: 0.3, is: '27deg'},
{at: 0.6, is: '24deg'},
{at: 1, is: '20deg'},
{at: 1.5, is: '15deg'},
]);
assertNoInterpolation({
property: 'motion-rotation',
from: 'unset',
to: '20deg',
});
assertInterpolation({
property: 'motion-rotation',
from: '10deg',
to: '50deg'
}, [
{at: -0.3, is: '-2deg'},
{at: 0, is: '10deg'},
{at: 0.3, is: '22deg'},
{at: 0.6, is: '34deg'},
{at: 1, is: '50deg'},
{at: 1.5, is: '70deg'},
]);
assertInterpolation({
property: 'motion-rotation',
from: 'auto 10deg',
to: 'auto 50deg'
}, [
{at: -0.3, is: 'auto -2deg'},
{at: 0, is: 'auto 10deg'},
{at: 0.3, is: 'auto 22deg'},
{at: 0.6, is: 'auto 34deg'},
{at: 1, is: 'auto 50deg'},
{at: 1.5, is: 'auto 70deg'},
]);
assertInterpolation({
property: 'motion-rotation',
from: 'reverse -170deg',
to: 'reverse -130deg'
}, [
{at: -0.3, is: 'auto -2deg'},
{at: 0, is: 'auto 10deg'},
{at: 0.3, is: 'auto 22deg'},
{at: 0.6, is: 'auto 34deg'},
{at: 1, is: 'auto 50deg'},
{at: 1.5, is: 'auto 70deg'},
]);
assertInterpolation({
property: 'motion-rotation',
from: 'auto 10deg',
to: 'reverse -130deg'
}, [
{at: -0.3, is: 'auto -2deg'},
{at: 0, is: 'auto 10deg'},
{at: 0.3, is: 'auto 22deg'},
{at: 0.6, is: 'auto 34deg'},
{at: 1, is: 'auto 50deg'},
{at: 1.5, is: 'auto 70deg'},
]);
assertInterpolation({
property: 'motion-rotation',
from: 'reverse -170deg',
to: 'auto 50deg'
}, [
{at: -0.3, is: 'auto -2deg'},
{at: 0, is: 'auto 10deg'},
{at: 0.3, is: 'auto 22deg'},
{at: 0.6, is: 'auto 34deg'},
{at: 1, is: 'auto 50deg'},
{at: 1.5, is: 'auto 70deg'},
]);
assertNoInterpolation({
property: 'motion-rotation',
from: 'auto 200deg',
to: '300deg'
});
assertNoInterpolation({
property: 'motion-rotation',
from: '300deg',
to: 'reverse 20deg'
});
</script>
</body>
<!DOCTYPE html>
<script src="resources/responsive-test.js"></script>
<script>
assertCSSResponsive({
property: 'motion-rotation',
from: 'inherit',
to: 'auto 40deg',
configurations: [{
state: {inherited: '50deg'},
expect: [
{at: 0.25, is: '50deg'},
{at: 0.75, is: 'auto 40deg'},
],
}, {
state: {inherited: 'auto 20deg'},
expect: [
{at: 0.25, is: 'auto 25deg'},
{at: 0.75, is: 'auto 35deg'},
],
}],
});
assertCSSResponsive({
property: 'motion-rotation',
from: neutralKeyframe,
to: '80deg',
configurations: [{
state: {underlying: 'auto 50deg'},
expect: [
{at: 0.25, is: 'auto 50deg'},
{at: 0.75, is: '80deg'},
],
}, {
state: {underlying: '40deg'},
expect: [
{at: 0.25, is: '50deg'},
{at: 0.75, is: '70deg'},
],
}],
});
</script>
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. 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.
CONSOLE WARNING: motion-rotation is deprecated and will be removed in M58, around April 2017. Please use offset-rotate instead. See https://www.chromestatus.com/features/6390764217040896 for more details.
PASS successfullyParsed is true PASS successfullyParsed is true
TEST COMPLETE TEST COMPLETE
......
...@@ -3,6 +3,5 @@ ...@@ -3,6 +3,5 @@
<style> <style>
.foo { .foo {
motion-offset: 50px; motion-offset: 50px;
motion-rotation: auto 30deg;
} }
</style> </style>
<!DOCTYPE html>
<html>
<head>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<style>
#div2 {
motion-rotation: auto;
}
#div3 {
motion-rotation: reverse;
}
#div4 {
motion-rotation: 180deg;
}
#div5 {
motion-rotation: 0rad;
}
#div6 {
motion-rotation: -400grad auto;
}
#div7 {
motion-rotation: 2turn reverse;
}
#div8 {
motion-rotation: reverse 30deg;
}
#div9 {
motion-rotation: inherit;
}
</style>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<div id="div4"></div>
<div id="div5"></div>
<div id="div6"></div>
<div id="div7"></div>
<div id="div8">
<div id="div9"></div>
<div id="div10"></div>
</div>
<span id="span1" style="motion-rotation: auto -45deg"></span>
<script>
"use strict";
test(function() {
assert_equals(getComputedStyle(div1, null).motionRotation, 'auto 0deg');
}, 'motion-rotation default is auto');
test(function() {
assert_equals(getComputedStyle(div2, null).motionRotation, 'auto 0deg');
}, 'motion-rotation auto expands to auto 0deg');
test(function() {
assert_equals(getComputedStyle(div3, null).motionRotation, 'auto 180deg');
}, 'motion-rotation reverse expands to auto 180deg');
test(function() {
assert_equals(getComputedStyle(div4, null).motionRotation, '180deg');
}, 'motion-rotation can be a fixed angle');
test(function() {
assert_equals(getComputedStyle(div5, null).motionRotation, '0deg');
}, 'motion-rotation angles are converted to degrees');
test(function() {
assert_equals(getComputedStyle(div6, null).motionRotation, 'auto -360deg');
}, 'motion-rotation can be supplied with angle before auto');
test(function() {
assert_equals(getComputedStyle(div7, null).motionRotation, 'auto 900deg');
}, 'motion-rotation can be supplied with angle before reverse');
test(function() {
assert_equals(getComputedStyle(div8, null).motionRotation, 'auto 210deg');
}, 'motion-rotation is unaffected by child elements');
test(function() {
assert_equals(getComputedStyle(div9, null).motionRotation, 'auto 210deg');
}, 'motion-rotation can be explicitly inherited');
test(function() {
assert_equals(getComputedStyle(div10, null).motionRotation, 'auto 0deg');
}, 'motion-rotation is not inherited by default');
test(function() {
assert_equals(span1.style.motionRotation, 'auto -45deg');
}, 'motion-rotation style can be set inline');
</script>
</body>
</html>
<!DOCTYPE html>
<head>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
</head>
<div id="target" class="p"></div>
<script>
test(function() {
assert_false(internals.isCSSPropertyUseCounted(document, "motion-rotation"));
var styleElement = document.createElement('style');
styleElement.textContent = ".p { motion-rotation: 0deg; }";
document.head.appendChild(styleElement);
getComputedStyle(target);
assert_true(internals.isCSSPropertyUseCounted(document, "motion-rotation"));
assert_false(internals.isCSSPropertyUseCounted(document, "offset-rotation"));
assert_false(internals.isCSSPropertyUseCounted(document, "offset-rotate"));
});
</script>
...@@ -15,7 +15,6 @@ test(function() { ...@@ -15,7 +15,6 @@ test(function() {
getComputedStyle(target); getComputedStyle(target);
assert_true(internals.isCSSPropertyUseCounted(document, "offset-rotate")); assert_true(internals.isCSSPropertyUseCounted(document, "offset-rotate"));
assert_false(internals.isCSSPropertyUseCounted(document, "motion-rotation"));
assert_false(internals.isCSSPropertyUseCounted(document, "offset-rotation")); assert_false(internals.isCSSPropertyUseCounted(document, "offset-rotation"));
}); });
</script> </script>
...@@ -15,7 +15,6 @@ test(function() { ...@@ -15,7 +15,6 @@ test(function() {
getComputedStyle(target); getComputedStyle(target);
assert_true(internals.isCSSPropertyUseCounted(document, "offset-rotation")); assert_true(internals.isCSSPropertyUseCounted(document, "offset-rotation"));
assert_false(internals.isCSSPropertyUseCounted(document, "motion-rotation"));
assert_false(internals.isCSSPropertyUseCounted(document, "offset-rotate")); assert_false(internals.isCSSPropertyUseCounted(document, "offset-rotate"));
}); });
</script> </script>
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
<script src="../../resources/testharnessreport.js"></script> <script src="../../resources/testharnessreport.js"></script>
<style> <style>
body { body {
offset: path("M 2 9223372036854775640 h 112 v 18446744073709551478") 6772159099343311147963407119496477758278323944392504792520726726528445908706753060030057770863072007690525803528990028771578716997626504007399536732362342681220306922677405220428480102113641824539771557937974021684448585322739937495322648385679803197878862537591342648461579499923703493989594208073045976755073456313663842125268129997886257177874866252782866713636942669286588447097343808037614382288341687498451651245152153424054000300383726062592046846049867203248174598084843154rad reverse 44px; offset: path("M 2 9223372036854775640 h 112 v 18446744073709551478") 44px 6772159099343311147963407119496477758278323944392504792520726726528445908706753060030057770863072007690525803528990028771578716997626504007399536732362342681220306922677405220428480102113641824539771557937974021684448585322739937495322648385679803197878862537591342648461579499923703493989594208073045976755073456313663842125268129997886257177874866252782866713636942669286588447097343808037614382288341687498451651245152153424054000300383726062592046846049867203248174598084843154rad reverse;
} }
</style> </style>
<script> <script>
......
...@@ -1393,10 +1393,6 @@ ...@@ -1393,10 +1393,6 @@
name: "motion-offset", name: "motion-offset",
alias_for: "offset-distance", alias_for: "offset-distance",
}, },
{
name: "motion-rotation",
alias_for: "offset-rotation",
},
{ {
name: "object-fit", name: "object-fit",
type_name: "ObjectFit", type_name: "ObjectFit",
......
...@@ -121,9 +121,6 @@ String Deprecation::DeprecationMessage(CSSPropertyID unresolved_property) { ...@@ -121,9 +121,6 @@ String Deprecation::DeprecationMessage(CSSPropertyID unresolved_property) {
case CSSPropertyAliasMotionOffset: case CSSPropertyAliasMotionOffset:
return replacedWillBeRemoved("motion-offset", "offset-distance", M58, return replacedWillBeRemoved("motion-offset", "offset-distance", M58,
"6390764217040896"); "6390764217040896");
case CSSPropertyAliasMotionRotation:
return replacedWillBeRemoved("motion-rotation", "offset-rotate", M58,
"6390764217040896");
case CSSPropertyOffsetRotation: case CSSPropertyOffsetRotation:
return replacedWillBeRemoved("offset-rotation", "offset-rotate", M58, return replacedWillBeRemoved("offset-rotation", "offset-rotate", M58,
"6390764217040896"); "6390764217040896");
......
...@@ -884,8 +884,7 @@ int UseCounter::MapCSSPropertyIdToCSSSampleIdForHistogram( ...@@ -884,8 +884,7 @@ int UseCounter::MapCSSPropertyIdToCSSSampleIdForHistogram(
// CSSPropertyMotionPath was 457. // CSSPropertyMotionPath was 457.
case CSSPropertyAliasMotionOffset: case CSSPropertyAliasMotionOffset:
return 458; return 458;
case CSSPropertyAliasMotionRotation: // CSSPropertyAliasMotionRotation was 459.
return 459;
// CSSPropertyMotion was 460. // CSSPropertyMotion was 460.
case CSSPropertyX: case CSSPropertyX:
return 461; return 461;
......
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