From 70fbd7952a349a42d536d1e0c02f3ee24145927b Mon Sep 17 00:00:00 2001 From: James Stuckey Weber Date: Wed, 28 Aug 2024 10:20:47 -0400 Subject: [PATCH 1/4] Add transform-box, add missing transform properties" --- features/individual-transforms.yml | 7 +++ features/individual-transforms.yml.dist | 3 ++ features/transform-box.yml | 10 ++++ features/transform-box.yml.dist | 67 +++++++++++++++++++++++++ features/transforms2d.yml | 22 ++++++++ features/transforms2d.yml.dist | 21 +++++++- 6 files changed, 128 insertions(+), 2 deletions(-) create mode 100644 features/transform-box.yml create mode 100644 features/transform-box.yml.dist diff --git a/features/individual-transforms.yml b/features/individual-transforms.yml index 1b8b5ce1020..013d198c1f0 100644 --- a/features/individual-transforms.yml +++ b/features/individual-transforms.yml @@ -2,3 +2,10 @@ name: Individual transform properties description: Transform elements with separate `translate`, `rotate`, and `scale` CSS properties. spec: https://drafts.csswg.org/css-transforms-2/#individual-transforms group: transforms +compat_features: + - css.properties.rotate + - css.properties.scale + - css.properties.translate + - css.properties.rotate.none + - css.properties.scale.none + - css.properties.translate.none diff --git a/features/individual-transforms.yml.dist b/features/individual-transforms.yml.dist index 68451ca2180..8bdecf9d3d6 100644 --- a/features/individual-transforms.yml.dist +++ b/features/individual-transforms.yml.dist @@ -14,5 +14,8 @@ status: safari_ios: "14.5" compat_features: - css.properties.rotate + - css.properties.rotate.none - css.properties.scale + - css.properties.scale.none - css.properties.translate + - css.properties.translate.none diff --git a/features/transform-box.yml b/features/transform-box.yml new file mode 100644 index 00000000000..168ba64553b --- /dev/null +++ b/features/transform-box.yml @@ -0,0 +1,10 @@ +name: transform-box +description: The `transform-box` CSS property sets the reference box for transformations. +spec: https://drafts.csswg.org/css-transforms-1/#transform-box +compat_features: + - css.properties.transform-box + - css.properties.transform-box.border-box + - css.properties.transform-box.content-box + - css.properties.transform-box.fill-box + - css.properties.transform-box.stroke-box + - css.properties.transform-box.view-box diff --git a/features/transform-box.yml.dist b/features/transform-box.yml.dist new file mode 100644 index 00000000000..987977f74e2 --- /dev/null +++ b/features/transform-box.yml.dist @@ -0,0 +1,67 @@ +# Generated from: transform-box.yml +# Do not edit this file by hand. Edit the source file instead! + +status: + baseline: low + baseline_low_date: 2024-04-16 + support: + chrome: "118" + chrome_android: "118" + edge: "118" + firefox: "125" + firefox_android: "125" + safari: "13.1" + safari_ios: "13.4" +compat_features: + # baseline: high + # baseline_low_date: 2020-01-15 + # baseline_high_date: 2022-07-15 + # support: + # chrome: "64" + # chrome_android: "64" + # edge: "79" + # firefox: "55" + # firefox_android: "55" + # safari: "11" + # safari_ios: "11" + - css.properties.transform-box + + # baseline: high + # baseline_low_date: ≤2020-03-24 + # baseline_high_date: ≤2022-09-24 + # support: + # chrome: "64" + # chrome_android: "64" + # edge: "79" + # firefox: "55" + # firefox_android: "55" + # safari: ≤13.1 + # safari_ios: ≤13.4 + - css.properties.transform-box.fill-box + - css.properties.transform-box.view-box + + # baseline: low + # baseline_low_date: 2023-10-13 + # support: + # chrome: "118" + # chrome_android: "118" + # edge: "118" + # firefox: "55" + # firefox_android: "55" + # safari: "13.1" + # safari_ios: "13.4" + - css.properties.transform-box.border-box + + # ⬇️ Same status as overall feature ⬇️ + # baseline: low + # baseline_low_date: 2024-04-16 + # support: + # chrome: "118" + # chrome_android: "118" + # edge: "118" + # firefox: "125" + # firefox_android: "125" + # safari: "13.1" + # safari_ios: "13.4" + - css.properties.transform-box.content-box + - css.properties.transform-box.stroke-box diff --git a/features/transforms2d.yml b/features/transforms2d.yml index ccb04d7221b..e3d345ddc26 100644 --- a/features/transforms2d.yml +++ b/features/transforms2d.yml @@ -3,3 +3,25 @@ description: The `transform` CSS property and its 2D transform functions allow r caniuse: transforms2d spec: https://drafts.csswg.org/css-transforms-1/ group: transforms +status: + compute_from: css.properties.transform +compat_features: + - css.types.transform-function + - css.types.transform-function.matrix + - css.types.transform-function.rotate + - css.types.transform-function.scale + - css.types.transform-function.scaleX + - css.types.transform-function.scaleY + - css.types.transform-function.skew + - css.types.transform-function.skewX + - css.types.transform-function.skewY + - css.types.transform-function.translate + - css.types.transform-function.translateX + - css.types.transform-function.translateY + - css.properties.transform + - css.properties.transform-origin + - css.properties.transform-origin.bottom + - css.properties.transform-origin.center + - css.properties.transform-origin.left + - css.properties.transform-origin.right + - css.properties.transform-origin.top diff --git a/features/transforms2d.yml.dist b/features/transforms2d.yml.dist index 25cc49d944c..2fd9d7a0a9b 100644 --- a/features/transforms2d.yml.dist +++ b/features/transforms2d.yml.dist @@ -9,7 +9,7 @@ status: chrome: "36" chrome_android: "36" edge: "12" - firefox: "16" + firefox: ≤16 firefox_android: "16" safari: "9" safari_ios: "9" @@ -38,6 +38,7 @@ compat_features: - css.types.transform-function.translateX - css.types.transform-function.translateY + # ⬇️ Same status as overall feature ⬇️ # baseline: high # baseline_low_date: 2015-09-30 # baseline_high_date: 2018-03-30 @@ -51,7 +52,6 @@ compat_features: # safari_ios: "9" - css.properties.transform - # ⬇️ Same status as overall feature ⬇️ # baseline: high # baseline_low_date: 2015-09-30 # baseline_high_date: 2018-03-30 @@ -64,3 +64,20 @@ compat_features: # safari: "9" # safari_ios: "9" - css.properties.transform-origin + + # baseline: high + # baseline_low_date: 2020-07-28 + # baseline_high_date: 2023-01-28 + # support: + # chrome: "36" + # chrome_android: "36" + # edge: "12" + # firefox: ≤72 + # firefox_android: "79" + # safari: "9" + # safari_ios: "9" + - css.properties.transform-origin.bottom + - css.properties.transform-origin.center + - css.properties.transform-origin.left + - css.properties.transform-origin.right + - css.properties.transform-origin.top From 054d68ffaac92ee23b9f59ddc38e93959a63b01c Mon Sep 17 00:00:00 2001 From: James Stuckey Weber Date: Thu, 19 Sep 2024 12:15:01 -0400 Subject: [PATCH 2/4] Update descriptions --- features/individual-transforms.yml | 4 ++-- features/transform-box.yml | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/features/individual-transforms.yml b/features/individual-transforms.yml index 013d198c1f0..ba26e1fb088 100644 --- a/features/individual-transforms.yml +++ b/features/individual-transforms.yml @@ -1,6 +1,6 @@ name: Individual transform properties -description: Transform elements with separate `translate`, `rotate`, and `scale` CSS properties. -spec: https://drafts.csswg.org/css-transforms-2/#individual-transforms +description: The `translate`, `rotate`, and `scale` CSS properties apply simple transformations independently, as opposed to applying multiple transformations with the `transform` CSS property. +spec: https://drafts.csswg.org/css-transforms-2/#individual-transforms group: transforms compat_features: - css.properties.rotate diff --git a/features/transform-box.yml b/features/transform-box.yml index 168ba64553b..f1f06caab7a 100644 --- a/features/transform-box.yml +++ b/features/transform-box.yml @@ -1,5 +1,5 @@ name: transform-box -description: The `transform-box` CSS property sets the reference box for transformations. +description: The `transform-box` CSS property sets the position and dimensions, or reference box, relative to which transformations are calculated. spec: https://drafts.csswg.org/css-transforms-1/#transform-box compat_features: - css.properties.transform-box From 73c40dee7698f102b5aa2b04ba01873319639706 Mon Sep 17 00:00:00 2001 From: James Stuckey Weber Date: Thu, 19 Sep 2024 12:17:51 -0400 Subject: [PATCH 3/4] Format --- features/individual-transforms.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/features/individual-transforms.yml b/features/individual-transforms.yml index ba26e1fb088..3471cafbec2 100644 --- a/features/individual-transforms.yml +++ b/features/individual-transforms.yml @@ -1,6 +1,6 @@ name: Individual transform properties description: The `translate`, `rotate`, and `scale` CSS properties apply simple transformations independently, as opposed to applying multiple transformations with the `transform` CSS property. -spec: https://drafts.csswg.org/css-transforms-2/#individual-transforms +spec: https://drafts.csswg.org/css-transforms-2/#individual-transforms group: transforms compat_features: - css.properties.rotate From d550fbc785481752a4782b31906e7dc3b88836ba Mon Sep 17 00:00:00 2001 From: James Stuckey Weber Date: Thu, 19 Sep 2024 17:11:59 -0400 Subject: [PATCH 4/4] Review --- features/transform-box.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/features/transform-box.yml b/features/transform-box.yml index f1f06caab7a..d44aa61b708 100644 --- a/features/transform-box.yml +++ b/features/transform-box.yml @@ -1,5 +1,5 @@ name: transform-box -description: The `transform-box` CSS property sets the position and dimensions, or reference box, relative to which transformations are calculated. +description: The `transform-box` CSS property sets the position and dimensions of the reference box relative to which an element's transformations are calculated. spec: https://drafts.csswg.org/css-transforms-1/#transform-box compat_features: - css.properties.transform-box