diff --git a/features/individual-transforms.yml b/features/individual-transforms.yml index 1b8b5ce1020..3471cafbec2 100644 --- a/features/individual-transforms.yml +++ b/features/individual-transforms.yml @@ -1,4 +1,11 @@ name: Individual transform properties -description: Transform elements with separate `translate`, `rotate`, and `scale` CSS 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 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..d44aa61b708 --- /dev/null +++ b/features/transform-box.yml @@ -0,0 +1,10 @@ +name: transform-box +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 + - 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