Use <coord-box> as the reference box of the containing block for ray().
So now we use <coord-box> to decide which box we should use. Also, we
have to tweak the calculation of path length to take the top left point
into consideration, for padding-box and content-box. border-box is the
default value, so other tests should cover it.
Differential Revision: https://phabricator.services.mozilla.com/D180397
bugzilla-url: https://bugzilla.mozilla.org/show_bug.cgi?id=1581237
gecko-commit: a3c49585335cd1c0b2c30a9aa1a1ab25826e4dd9
gecko-reviewers: emilio
diff --git a/css/motion/offset-path-ray-015-ref.html b/css/motion/offset-path-ray-015-ref.html
new file mode 100644
index 0000000..13f25aa
--- /dev/null
+++ b/css/motion/offset-path-ray-015-ref.html
@@ -0,0 +1,25 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS Motion Path test reference: ray() path with padding-box</title>
+
+<style>
+ #outer {
+ top: 100px;
+ left: 100px;
+ position: relative;
+ width: 200px;
+ height: 200px;
+ padding: 50px;
+ border: 50px solid black;
+ }
+ #box {
+ background-color: green;
+ transform: translate(-50px, -50px);
+ width: 100px;
+ height: 100px;
+ }
+</style>
+
+<div id="outer">
+ <div id="box"></div>
+</div>
diff --git a/css/motion/offset-path-ray-015.html b/css/motion/offset-path-ray-015.html
new file mode 100644
index 0000000..d8729c1
--- /dev/null
+++ b/css/motion/offset-path-ray-015.html
@@ -0,0 +1,30 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS Motion Path test: ray() path with padding-box</title>
+<link rel="match" href="offset-path-ray-015-ref.html">
+<link rel="help" href="https://drafts.fxtf.org/motion/#ray-function">
+
+<style>
+ #outer {
+ top: 100px;
+ left: 100px;
+ position: relative;
+ width: 200px;
+ height: 200px;
+ padding: 50px;
+ border: 50px solid black;
+ }
+ #box {
+ background-color: green;
+ offset-path: ray(0deg sides at 0% 0%) padding-box;
+ offset-rotate: 0deg;
+ offset-anchor: 0% 0%;
+ width: 100px;
+ height: 100px;
+ background-color: green;
+ }
+</style>
+
+<div id="outer">
+ <div id="box"></div>
+</div>
diff --git a/css/motion/offset-path-ray-016-ref.html b/css/motion/offset-path-ray-016-ref.html
new file mode 100644
index 0000000..dea0910
--- /dev/null
+++ b/css/motion/offset-path-ray-016-ref.html
@@ -0,0 +1,24 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS Motion Path test reference: ray() path with content-box</title>
+
+<style>
+ #outer {
+ top: 100px;
+ left: 100px;
+ position: relative;
+ width: 200px;
+ height: 200px;
+ padding: 50px;
+ border: 50px solid black;
+ }
+ #box {
+ background-color: green;
+ width: 100px;
+ height: 100px;
+ }
+</style>
+
+<div id="outer">
+ <div id="box"></div>
+</div>
diff --git a/css/motion/offset-path-ray-016.html b/css/motion/offset-path-ray-016.html
new file mode 100644
index 0000000..539823a
--- /dev/null
+++ b/css/motion/offset-path-ray-016.html
@@ -0,0 +1,31 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS Motion Path test: ray() path with content-box</title>
+<link rel="match" href="offset-path-ray-016-ref.html">
+<link rel="help" href="https://drafts.fxtf.org/motion/#ray-function">
+
+<style>
+ #outer {
+ top: 100px;
+ left: 100px;
+ position: relative;
+ width: 200px;
+ height: 200px;
+ padding: 50px;
+ border: 50px solid black;
+ }
+ #box {
+ background-color: green;
+ offset-path: ray(0deg sides at 0% 0%) content-box;
+ offset-rotate: 0deg;
+ offset-anchor: 0% 0%;
+ width: 100px;
+ height: 100px;
+ background-color: green;
+ }
+</style>
+
+<div id="outer">
+ <div style="width: 100px; height: 100px; background-color: red;"></div>
+ <div id="box"></div>
+</div>
diff --git a/css/motion/offset-path-ray-017-ref.html b/css/motion/offset-path-ray-017-ref.html
new file mode 100644
index 0000000..03719c5
--- /dev/null
+++ b/css/motion/offset-path-ray-017-ref.html
@@ -0,0 +1,25 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS Motion Path test reference: ray() path with padding-box</title>
+
+<style>
+ #outer {
+ top: 100px;
+ left: 100px;
+ position: relative;
+ width: 200px;
+ height: 200px;
+ padding: 50px;
+ border: 50px solid black;
+ }
+ #box {
+ background-color: green;
+ transform: translate(100px, -50px);
+ width: 100px;
+ height: 100px;
+ }
+</style>
+
+<div id="outer">
+ <div id="box"></div>
+</div>
diff --git a/css/motion/offset-path-ray-017.html b/css/motion/offset-path-ray-017.html
new file mode 100644
index 0000000..93f3ce0
--- /dev/null
+++ b/css/motion/offset-path-ray-017.html
@@ -0,0 +1,31 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS Motion Path test: ray() path with padding-box</title>
+<link rel="match" href="offset-path-ray-017-ref.html">
+<link rel="help" href="https://drafts.fxtf.org/motion/#ray-function">
+
+<style>
+ #outer {
+ top: 100px;
+ left: 100px;
+ position: relative;
+ width: 200px;
+ height: 200px;
+ padding: 50px;
+ border: 50px solid black;
+ }
+ #box {
+ background-color: green;
+ offset-path: ray(0deg sides at 50% 50%) padding-box;
+ offset-distance: 100%;
+ offset-rotate: 0deg;
+ offset-anchor: 0% 0%;
+ width: 100px;
+ height: 100px;
+ background-color: green;
+ }
+</style>
+
+<div id="outer">
+ <div id="box"></div>
+</div>
diff --git a/css/motion/offset-path-ray-018-ref.html b/css/motion/offset-path-ray-018-ref.html
new file mode 100644
index 0000000..39dd820
--- /dev/null
+++ b/css/motion/offset-path-ray-018-ref.html
@@ -0,0 +1,25 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS Motion Path test reference: ray() path with content-box</title>
+
+<style>
+ #outer {
+ top: 100px;
+ left: 100px;
+ position: relative;
+ width: 200px;
+ height: 200px;
+ padding: 50px;
+ border: 50px solid black;
+ }
+ #box {
+ background-color: green;
+ transform: translate(100px, 0px);
+ width: 100px;
+ height: 100px;
+ }
+</style>
+
+<div id="outer">
+ <div id="box"></div>
+</div>
diff --git a/css/motion/offset-path-ray-018.html b/css/motion/offset-path-ray-018.html
new file mode 100644
index 0000000..73b5b6c
--- /dev/null
+++ b/css/motion/offset-path-ray-018.html
@@ -0,0 +1,31 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>CSS Motion Path test: ray() path with content-box</title>
+<link rel="match" href="offset-path-ray-018-ref.html">
+<link rel="help" href="https://drafts.fxtf.org/motion/#ray-function">
+
+<style>
+ #outer {
+ top: 100px;
+ left: 100px;
+ position: relative;
+ width: 200px;
+ height: 200px;
+ padding: 50px;
+ border: 50px solid black;
+ }
+ #box {
+ background-color: green;
+ offset-path: ray(0deg sides at 50% 50%) content-box;
+ offset-distance: 100%;
+ offset-rotate: 0deg;
+ offset-anchor: 0% 0%;
+ width: 100px;
+ height: 100px;
+ background-color: green;
+ }
+</style>
+
+<div id="outer">
+ <div id="box"></div>
+</div>
