Implement <contain> option for motion path <ray>
Spec: https://drafts.fxtf.org/motion/#valdef-ray-contain
Test changes are due to the recent spec change: previously
<contain> implied that the box should be inside the circle,
formed by the radius of the ray length. Now it became easier
as <contain> just reduces the ray length by a fixed value.
Fixed: 649922
Change-Id: I1dcfb2c11c714e2f666196b94e702cbecc0f8c11
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4453583
Reviewed-by: Fredrik Söderquist <fs@opera.com>
Commit-Queue: Daniil Sakhapov <sakhapov@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1138248}
diff --git a/css/motion/offset-path-ray-contain-001-ref.html b/css/motion/offset-path-ray-contain-001-ref.html
index 24a823f..05f54d9 100644
--- a/css/motion/offset-path-ray-contain-001-ref.html
+++ b/css/motion/offset-path-ray-contain-001-ref.html
@@ -9,12 +9,15 @@
}
#target {
position: relative;
- left: 150px;
- top: 150px;
- width: 100px;
- height: 100px;
+ left: 30px;
+ top: 40px;
+ width: 10px;
+ height: 10px;
background-color: lime;
- transform: rotate(0deg) translate(50px, -150px);
+ /* ray length is sqrt(30^2 + 40^2); contain does -max(10, 10) / 2; */
+ /* the result length is 45px. angle is 180deg; */
+ /* 5 is origin shift. */
+ transform: translate(-5px, 40px);
}
</style>
</head>
diff --git a/css/motion/offset-path-ray-contain-001.html b/css/motion/offset-path-ray-contain-001.html
index 83e1692..ba03f11 100644
--- a/css/motion/offset-path-ray-contain-001.html
+++ b/css/motion/offset-path-ray-contain-001.html
@@ -12,12 +12,12 @@
}
#target {
position: relative;
- left: 150px;
- top: 150px;
- width: 100px;
- height: 100px;
+ left: 30px;
+ top: 40px;
+ width: 10px;
+ height: 10px;
background-color: lime;
- offset-path: ray(45deg closest-corner contain);
+ offset-path: ray(180deg closest-corner contain);
offset-rotate: 0deg;
offset-distance: 100%;
}
diff --git a/css/motion/offset-path-ray-contain-002-ref.html b/css/motion/offset-path-ray-contain-002-ref.html
index 92ccb13..a5bff44 100644
--- a/css/motion/offset-path-ray-contain-002-ref.html
+++ b/css/motion/offset-path-ray-contain-002-ref.html
@@ -14,8 +14,9 @@
width: 100px;
height: 100px;
background-color: lime;
- /* The vertical movement is about sqrt(150^2 - 50^2) - 50 */
- transform: translateY(91.42px);
+ /* ray length is sqrt(150^2 + 0^2); contain does -max(100, 100) / 2; */
+ /* the result length is 100. sin(90deg) * length = 100; */
+ transform: translateY(100px);
}
</style>
</head>
diff --git a/css/motion/offset-path-ray-contain-003-ref.html b/css/motion/offset-path-ray-contain-003-ref.html
index 3ad660e..965960f 100644
--- a/css/motion/offset-path-ray-contain-003-ref.html
+++ b/css/motion/offset-path-ray-contain-003-ref.html
@@ -14,8 +14,9 @@
width: 100px;
height: 100px;
background-color: lime;
- /* The movement is about 150 - 50 * sqrt(2) */
- transform: rotate(-45deg) translate(79.29px) rotate(45deg);
+ /* ray length is sqrt(150^2 + 0^2); contain does -max(100, 100) / 2; */
+ /* the result length is 100. sin(45deg) * length = 70.71; */
+ transform: rotate(-45deg) translate(100px) rotate(45deg);
}
</style>
</head>
diff --git a/css/motion/offset-path-ray-contain-004-ref.html b/css/motion/offset-path-ray-contain-004-ref.html
index 38b0d44..188e259 100644
--- a/css/motion/offset-path-ray-contain-004-ref.html
+++ b/css/motion/offset-path-ray-contain-004-ref.html
@@ -14,8 +14,9 @@
width: 100px;
height: 100px;
background-color: lime;
- /* The movement is about sqrt(150^2 - 50^2) - 50 */
- transform: rotate(-45deg) translate(91.42px);
+ /* ray length is sqrt(150^2 + 0^2); contain does -max(100, 100) / 2; */
+ /* the result length is 100. sin(45deg) * length = 70.71; */
+ transform: rotate(-45deg) translate(100px);
}
</style>
</head>
diff --git a/css/motion/offset-path-ray-contain-005-ref.html b/css/motion/offset-path-ray-contain-005-ref.html
index c1dafc4..ead5dfb 100644
--- a/css/motion/offset-path-ray-contain-005-ref.html
+++ b/css/motion/offset-path-ray-contain-005-ref.html
@@ -16,15 +16,12 @@
height: 25px;
background-color: lime;
/*
- * The original path length is 50px, which is not enough to contain
- * the element entirely, so it should be increased.
- * "75px" is just the center of the element, which makes the path
- * length increase minimally.
- * Besides, -75px = (-150px * 2) + 225px, the used offset distance is
- * -225px in this case.
- * Note: offset-anchor is "200% -300%", and ray angle is -90deg.
+ * The original path length is 50px, contain applies
+ * decrease, so that the new length is -25px (-150px / 2).
+ * Note: offset-anchor is "200% -300%", and ray angle is -90deg
+ and offset-rotate is -90deg.
*/
- transform: translate(calc(-75px), calc(25px * 3));
+ transform: translate(-75px, -12.5px) rotate(-90deg) translate(-225px, 87.5px);
}
</style>
</head>
diff --git a/css/motion/offset-path-ray-contain-005.html b/css/motion/offset-path-ray-contain-005.html
index 0ec0c25..fc74702 100644
--- a/css/motion/offset-path-ray-contain-005.html
+++ b/css/motion/offset-path-ray-contain-005.html
@@ -22,8 +22,8 @@
background-color: lime;
offset-path: ray(-90deg closest-side contain);
offset-anchor: 200% -300%;
- offset-rotate: 0deg;
- offset-distance: 0%;
+ offset-rotate: -90deg;
+ offset-distance: 50%;
}
</style>
</head>
