From 34ce07059ffe25af503c6190ad7d38b812d7fc4f Mon Sep 17 00:00:00 2001
From: Dipika Bhattacharya <dipika@foss-community.org>
Date: Sat, 6 Jan 2024 01:36:30 -0500
Subject: [PATCH] CSS: Update `ray()` syntax and add values (#700)

### Description

- Fixes #676
To address listing the values for `<ray-size>`, I've referred to the
instructions in the `mdn/data/docs` section [Store the information in
the
JSONs](https://github.com/mdn/data/blob/main/docs/updating_css_json.md#store-the-information-in-the-jsons),
where it mentions how to handle when "syntax contains references to
specific values".

I've added `"syntaxes"` for `ray()` in `syntaxes.json`. I've included
only the keys that have further values. I'm not sure if that's the
correct way to do it though. I am assuming this should be okay because
the complete syntax exists in `functions.json`.

**UPDATE**: `"syntaxes"` is not supported, was getting lint errors. I've
reverted to use `syntax` but expanded the `<ray-size>` and `<position>`
values inline.

- I'm also using this PR to update `ray()` function syntax (mdn/content
PR to add [Formal
syntax](https://pr31514.content.dev.mdn.mozit.cloud/en-US/docs/Web/CSS/ray#formal_syntax)).
With Firefox122 coming out on Jan 23, 2024, `ray()` will be supported by
default, making it standard across browsers. So I've also updated the
status to `standard` (BCD PR with [ray() status
update](https://github.com/mdn/browser-compat-data/pull/21844/files#diff-5153a0172f96a72ece248c9d29cea659e3ecd45c45d81d57b0b6f2f00c57e7b3R98)).
### Motivation

Addressing an issue as well as updating the syntax

### Related issues and pull requests

https://github.com/mdn/browser-compat-data/pull/21844
https://github.com/mdn/content/pull/31514
---
 css/functions.json | 4 ++--
 css/syntaxes.json  | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/css/functions.json b/css/functions.json
index 8fee9090..f9b9dc12 100644
--- a/css/functions.json
+++ b/css/functions.json
@@ -326,11 +326,11 @@
     "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/gradient/radial-gradient"
   },
   "ray()": {
-    "syntax": "ray( <angle> && <ray-size>? && contain? )",
+    "syntax": "ray( <angle> && <ray-size>? && contain? && [at <position>]? )",
     "groups": [
       "CSS Motion Path"
     ],
-    "status": "experimental",
+    "status": "standard",
     "mdn_url": "https://developer.mozilla.org/docs/Web/CSS/ray"
   },
   "repeating-linear-gradient()": {
diff --git a/css/syntaxes.json b/css/syntaxes.json
index aa1191d2..23f19d9a 100644
--- a/css/syntaxes.json
+++ b/css/syntaxes.json
@@ -621,7 +621,7 @@
     "syntax": "<number [0,∞]> [ / <number [0,∞]> ]?"
   },
   "ray()": {
-    "syntax": "ray( <angle> && <ray-size>? && contain? )"
+    "syntax": "{ <angle> && [closest-side | closest-corner | farthest-side | farthest-corner | sides] && contain? && [at [ left | center | right | top | bottom | <length-percentage> ] | [ left | center | right ] && [ top | center | bottom ] | [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ] | [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ]]"
   },
   "relative-selector": {
     "syntax": "<combinator>? <complex-selector>"