From 9f14df88de9656562cf2615d8852ad4ba079b429 Mon Sep 17 00:00:00 2001 From: Victor W Allen Date: Mon, 30 Sep 2024 13:44:38 -0700 Subject: [PATCH 1/7] Adds physical positioning properties --- features/physical-properties.yml | 13 +++++++++++++ features/physical-properties.yml.dist | 24 ++++++++++++++++++++++++ 2 files changed, 37 insertions(+) create mode 100644 features/physical-properties.yml create mode 100644 features/physical-properties.yml.dist diff --git a/features/physical-properties.yml b/features/physical-properties.yml new file mode 100644 index 00000000000..a71ff8fc845 --- /dev/null +++ b/features/physical-properties.yml @@ -0,0 +1,13 @@ +name: Physical properties +description: CSS physical properties set the inset position of an element relative to the corresponding side of a container determined by the element's `position` property. +spec: https://drafts.csswg.org/css-position-3/#insets +group: css +compat_features: + - css.properties.bottom + - css.properties.bottom.auto + - css.properties.left + - css.properties.left.auto + - css.properties.right + - css.properties.right.auto + - css.properties.top + - css.properties.top.auto diff --git a/features/physical-properties.yml.dist b/features/physical-properties.yml.dist new file mode 100644 index 00000000000..3081d0d2984 --- /dev/null +++ b/features/physical-properties.yml.dist @@ -0,0 +1,24 @@ +# Generated from: physical-properties.yml +# Do not edit this file by hand. Edit the source file instead! + +status: + baseline: high + baseline_low_date: 2015-07-29 + baseline_high_date: 2018-01-29 + support: + chrome: "1" + chrome_android: "18" + edge: "12" + firefox: "1" + firefox_android: "4" + safari: "1" + safari_ios: "1" +compat_features: + - css.properties.bottom + - css.properties.bottom.auto + - css.properties.left + - css.properties.left.auto + - css.properties.right + - css.properties.right.auto + - css.properties.top + - css.properties.top.auto From e0cf91666e6d71babea38569c7279a4c4b7eeacd Mon Sep 17 00:00:00 2001 From: Victor W Allen Date: Mon, 30 Sep 2024 14:14:00 -0700 Subject: [PATCH 2/7] Adds backdrop --- features/backdrop.yml | 6 ++++++ features/backdrop.yml.dist | 17 +++++++++++++++++ 2 files changed, 23 insertions(+) create mode 100644 features/backdrop.yml create mode 100644 features/backdrop.yml.dist diff --git a/features/backdrop.yml b/features/backdrop.yml new file mode 100644 index 00000000000..3a6b3236730 --- /dev/null +++ b/features/backdrop.yml @@ -0,0 +1,6 @@ +name: "::backdrop" +description: The `::backdrop` CSS pseudo-element is a box underneath an element, such as a ``, that diplays in the top layer. It can be used to create obscuring effects distinguishing a modal element from the elements underneath. +spec: https://drafts.csswg.org/css-position-4/#backdrop +group: selectors +compat_features: + - css.selectors.backdrop diff --git a/features/backdrop.yml.dist b/features/backdrop.yml.dist new file mode 100644 index 00000000000..a68459a1610 --- /dev/null +++ b/features/backdrop.yml.dist @@ -0,0 +1,17 @@ +# Generated from: backdrop.yml +# Do not edit this file by hand. Edit the source file instead! + +status: + baseline: high + baseline_low_date: 2022-03-14 + baseline_high_date: 2024-09-14 + support: + chrome: "37" + chrome_android: "37" + edge: "79" + firefox: "47" + firefox_android: "47" + safari: "15.4" + safari_ios: "15.4" +compat_features: + - css.selectors.backdrop From 671f4b18eb6ef6eb6ed12a1df1869ace9109d1b1 Mon Sep 17 00:00:00 2001 From: Victor W Allen Date: Tue, 1 Oct 2024 11:22:16 -0700 Subject: [PATCH 3/7] Adds fully split version of position css property --- features/absolute-positioning.yml | 6 ++++++ features/absolute-positioning.yml.dist | 17 +++++++++++++++++ features/fixed-positioning.yml | 6 ++++++ features/fixed-positioning.yml.dist | 17 +++++++++++++++++ features/position.yml | 6 ++++++ features/position.yml.dist | 17 +++++++++++++++++ features/relative-positioning.yml | 6 ++++++ features/relative-positioning.yml.dist | 17 +++++++++++++++++ features/static-positioning.yml | 6 ++++++ features/static-positioning.yml.dist | 17 +++++++++++++++++ 10 files changed, 115 insertions(+) create mode 100644 features/absolute-positioning.yml create mode 100644 features/absolute-positioning.yml.dist create mode 100644 features/fixed-positioning.yml create mode 100644 features/fixed-positioning.yml.dist create mode 100644 features/position.yml create mode 100644 features/position.yml.dist create mode 100644 features/relative-positioning.yml create mode 100644 features/relative-positioning.yml.dist create mode 100644 features/static-positioning.yml create mode 100644 features/static-positioning.yml.dist diff --git a/features/absolute-positioning.yml b/features/absolute-positioning.yml new file mode 100644 index 00000000000..d04becdff56 --- /dev/null +++ b/features/absolute-positioning.yml @@ -0,0 +1,6 @@ +name: Absolute positioning +description: "The `position: absolute` CSS declaration removes an element from the normal flow and positions an element relative to its containing block or closest positioned ancestor." +spec: https://drafts.csswg.org/css-position-3/#abspos-insets +group: layout +compat_features: + - css.properties.position.absolute diff --git a/features/absolute-positioning.yml.dist b/features/absolute-positioning.yml.dist new file mode 100644 index 00000000000..763238bfbff --- /dev/null +++ b/features/absolute-positioning.yml.dist @@ -0,0 +1,17 @@ +# Generated from: absolute-positioning.yml +# Do not edit this file by hand. Edit the source file instead! + +status: + baseline: high + baseline_low_date: 2015-07-29 + baseline_high_date: 2018-01-29 + support: + chrome: "1" + chrome_android: "18" + edge: "12" + firefox: "1" + firefox_android: "4" + safari: "1" + safari_ios: "1" +compat_features: + - css.properties.position.absolute diff --git a/features/fixed-positioning.yml b/features/fixed-positioning.yml new file mode 100644 index 00000000000..02ef80ec9e8 --- /dev/null +++ b/features/fixed-positioning.yml @@ -0,0 +1,6 @@ +name: Fixed positioning +description: "The `position: fixed` CSS declaration removes an element from the normal flow and positions an element relative to the viewport or page." +spec: https://drafts.csswg.org/css-position-3/#abspos-insets +group: layout +compat_features: + - css.properties.position.fixed diff --git a/features/fixed-positioning.yml.dist b/features/fixed-positioning.yml.dist new file mode 100644 index 00000000000..7f9ff559479 --- /dev/null +++ b/features/fixed-positioning.yml.dist @@ -0,0 +1,17 @@ +# Generated from: fixed-positioning.yml +# Do not edit this file by hand. Edit the source file instead! + +status: + baseline: high + baseline_low_date: 2015-07-29 + baseline_high_date: 2018-01-29 + support: + chrome: "1" + chrome_android: "18" + edge: "12" + firefox: "1" + firefox_android: "4" + safari: "1" + safari_ios: "1" +compat_features: + - css.properties.position.fixed diff --git a/features/position.yml b/features/position.yml new file mode 100644 index 00000000000..8d8b9050aae --- /dev/null +++ b/features/position.yml @@ -0,0 +1,6 @@ +name: Position +description: The `position` CSS property sets the scheme used to calculate the position of an element. Schemes set the origin position of the box based an element, the element's scrollport, or the viewport. +spec: https://drafts.csswg.org/css-position-3/#position-property +group: layout +compat_features: + - css.properties.position diff --git a/features/position.yml.dist b/features/position.yml.dist new file mode 100644 index 00000000000..43e93b9a367 --- /dev/null +++ b/features/position.yml.dist @@ -0,0 +1,17 @@ +# Generated from: position.yml +# Do not edit this file by hand. Edit the source file instead! + +status: + baseline: high + baseline_low_date: 2015-07-29 + baseline_high_date: 2018-01-29 + support: + chrome: "1" + chrome_android: "18" + edge: "12" + firefox: "1" + firefox_android: "4" + safari: "1" + safari_ios: "1" +compat_features: + - css.properties.position diff --git a/features/relative-positioning.yml b/features/relative-positioning.yml new file mode 100644 index 00000000000..860e1823255 --- /dev/null +++ b/features/relative-positioning.yml @@ -0,0 +1,6 @@ +name: Relative positioning +description: "The `position: relative` CSS declaration offsets the position of an element relative to its position in the normal flow." +spec: https://drafts.csswg.org/css-position-3/#relpos-insets +group: layout +compat_features: + - css.properties.position.relative diff --git a/features/relative-positioning.yml.dist b/features/relative-positioning.yml.dist new file mode 100644 index 00000000000..0736acfa195 --- /dev/null +++ b/features/relative-positioning.yml.dist @@ -0,0 +1,17 @@ +# Generated from: relative-positioning.yml +# Do not edit this file by hand. Edit the source file instead! + +status: + baseline: high + baseline_low_date: 2015-07-29 + baseline_high_date: 2018-01-29 + support: + chrome: "1" + chrome_android: "18" + edge: "12" + firefox: "1" + firefox_android: "4" + safari: "1" + safari_ios: "1" +compat_features: + - css.properties.position.relative diff --git a/features/static-positioning.yml b/features/static-positioning.yml new file mode 100644 index 00000000000..793f1c25986 --- /dev/null +++ b/features/static-positioning.yml @@ -0,0 +1,6 @@ +name: Static positioning +description: "The `position: static` CSS declaration positions an element in the normal flow. A statically positioned element ignores physical and logical properties such as `top` or `inset-block-start`." +spec: https://drafts.csswg.org/css-position-3/#position-property +group: layout +compat_features: + - css.properties.position.relative diff --git a/features/static-positioning.yml.dist b/features/static-positioning.yml.dist new file mode 100644 index 00000000000..4947b5dd636 --- /dev/null +++ b/features/static-positioning.yml.dist @@ -0,0 +1,17 @@ +# Generated from: static-positioning.yml +# Do not edit this file by hand. Edit the source file instead! + +status: + baseline: high + baseline_low_date: 2015-07-29 + baseline_high_date: 2018-01-29 + support: + chrome: "1" + chrome_android: "18" + edge: "12" + firefox: "1" + firefox_android: "4" + safari: "1" + safari_ios: "1" +compat_features: + - css.properties.position.relative From 849a927696907db6b3b9f6b1d5f1c9ea40d0f4ab Mon Sep 17 00:00:00 2001 From: Victor W Allen Date: Tue, 1 Oct 2024 12:02:35 -0700 Subject: [PATCH 4/7] Adds positioning group, updates descriptions and groups --- features/absolute-positioning.yml | 4 ++-- features/backdrop.yml | 2 +- features/fixed-positioning.yml | 4 ++-- features/position.yml | 4 ++-- features/relative-positioning.yml | 2 +- features/static-positioning.yml | 2 +- features/sticky-positioning.yml | 2 +- groups/positioning.yml | 3 +++ 8 files changed, 13 insertions(+), 10 deletions(-) create mode 100644 groups/positioning.yml diff --git a/features/absolute-positioning.yml b/features/absolute-positioning.yml index d04becdff56..c7ba958a321 100644 --- a/features/absolute-positioning.yml +++ b/features/absolute-positioning.yml @@ -1,6 +1,6 @@ name: Absolute positioning -description: "The `position: absolute` CSS declaration removes an element from the normal flow and positions an element relative to its containing block or closest positioned ancestor." +description: "The `position: absolute` CSS declaration removes an element from the normal flow and positions it relative to its containing block or closest positioned ancestor." spec: https://drafts.csswg.org/css-position-3/#abspos-insets -group: layout +group: positioning compat_features: - css.properties.position.absolute diff --git a/features/backdrop.yml b/features/backdrop.yml index 3a6b3236730..52815c2e1b6 100644 --- a/features/backdrop.yml +++ b/features/backdrop.yml @@ -1,5 +1,5 @@ name: "::backdrop" -description: The `::backdrop` CSS pseudo-element is a box underneath an element, such as a ``, that diplays in the top layer. It can be used to create obscuring effects distinguishing a modal element from the elements underneath. +description: The `::backdrop` CSS pseudo-element is a box underneath an element, such as a ``, that displays in the top layer. It can be used to create obscuring effects distinguishing a modal element from the elements underneath. spec: https://drafts.csswg.org/css-position-4/#backdrop group: selectors compat_features: diff --git a/features/fixed-positioning.yml b/features/fixed-positioning.yml index 02ef80ec9e8..1ca656da521 100644 --- a/features/fixed-positioning.yml +++ b/features/fixed-positioning.yml @@ -1,6 +1,6 @@ name: Fixed positioning -description: "The `position: fixed` CSS declaration removes an element from the normal flow and positions an element relative to the viewport or page." +description: "The `position: fixed` CSS declaration removes an element from the normal flow and positions it relative to the viewport or page." spec: https://drafts.csswg.org/css-position-3/#abspos-insets -group: layout +group: positioning compat_features: - css.properties.position.fixed diff --git a/features/position.yml b/features/position.yml index 8d8b9050aae..a1eca9ddd32 100644 --- a/features/position.yml +++ b/features/position.yml @@ -1,6 +1,6 @@ name: Position -description: The `position` CSS property sets the scheme used to calculate the position of an element. Schemes set the origin position of the box based an element, the element's scrollport, or the viewport. +description: The `position` CSS property sets the origin position of an element to an element, the element's scrollport, or the viewport. spec: https://drafts.csswg.org/css-position-3/#position-property -group: layout +group: positioning compat_features: - css.properties.position diff --git a/features/relative-positioning.yml b/features/relative-positioning.yml index 860e1823255..7e470f63310 100644 --- a/features/relative-positioning.yml +++ b/features/relative-positioning.yml @@ -1,6 +1,6 @@ name: Relative positioning description: "The `position: relative` CSS declaration offsets the position of an element relative to its position in the normal flow." spec: https://drafts.csswg.org/css-position-3/#relpos-insets -group: layout +group: positioning compat_features: - css.properties.position.relative diff --git a/features/static-positioning.yml b/features/static-positioning.yml index 793f1c25986..0ea2beefbe7 100644 --- a/features/static-positioning.yml +++ b/features/static-positioning.yml @@ -1,6 +1,6 @@ name: Static positioning description: "The `position: static` CSS declaration positions an element in the normal flow. A statically positioned element ignores physical and logical properties such as `top` or `inset-block-start`." spec: https://drafts.csswg.org/css-position-3/#position-property -group: layout +group: positioning compat_features: - css.properties.position.relative diff --git a/features/sticky-positioning.yml b/features/sticky-positioning.yml index 3c52fa1be18..92cfea6e478 100644 --- a/features/sticky-positioning.yml +++ b/features/sticky-positioning.yml @@ -1,5 +1,5 @@ name: Sticky positioning description: "The `position: sticky` CSS declaration positions an element in the normal flow until it crosses a specified threshold, at which points it becomes fixed (stuck) at that position." spec: https://drafts.csswg.org/css-position-3/#stickypos-insets -group: layout +group: positioning caniuse: css-sticky diff --git a/groups/positioning.yml b/groups/positioning.yml new file mode 100644 index 00000000000..17243c945a4 --- /dev/null +++ b/groups/positioning.yml @@ -0,0 +1,3 @@ +# CSS positioning property and schemes. +name: Positioning +parent: layout From 4e81a302e6951b890f63a67539c77bf050595936 Mon Sep 17 00:00:00 2001 From: Victor W Allen Date: Tue, 1 Oct 2024 13:17:35 -0700 Subject: [PATCH 5/7] Fixes incorrect key --- features/static-positioning.yml | 2 +- features/static-positioning.yml.dist | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/features/static-positioning.yml b/features/static-positioning.yml index 0ea2beefbe7..1a36bfd789e 100644 --- a/features/static-positioning.yml +++ b/features/static-positioning.yml @@ -3,4 +3,4 @@ description: "The `position: static` CSS declaration positions an element in the spec: https://drafts.csswg.org/css-position-3/#position-property group: positioning compat_features: - - css.properties.position.relative + - css.properties.position.static diff --git a/features/static-positioning.yml.dist b/features/static-positioning.yml.dist index 4947b5dd636..25c71b91848 100644 --- a/features/static-positioning.yml.dist +++ b/features/static-positioning.yml.dist @@ -14,4 +14,4 @@ status: safari: "1" safari_ios: "1" compat_features: - - css.properties.position.relative + - css.properties.position.static From a6c086611a12d75bdc737e1ab10414114695161f Mon Sep 17 00:00:00 2001 From: Victor Allen Date: Wed, 2 Oct 2024 07:15:33 -0700 Subject: [PATCH 6/7] Updates backdrop description Co-authored-by: James Stuckey Weber --- features/backdrop.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/features/backdrop.yml b/features/backdrop.yml index 52815c2e1b6..25dab74a360 100644 --- a/features/backdrop.yml +++ b/features/backdrop.yml @@ -1,5 +1,5 @@ name: "::backdrop" -description: The `::backdrop` CSS pseudo-element is a box underneath an element, such as a ``, that displays in the top layer. It can be used to create obscuring effects distinguishing a modal element from the elements underneath. +description: The `::backdrop` CSS pseudo-element is a box underneath an element in the top layer, such as a ``. It can be used to create obscuring effects distinguishing a modal element from the elements underneath. spec: https://drafts.csswg.org/css-position-4/#backdrop group: selectors compat_features: From afa739e453202c329c86ee4908b288a53439c2f1 Mon Sep 17 00:00:00 2001 From: Victor Allen Date: Wed, 2 Oct 2024 07:20:10 -0700 Subject: [PATCH 7/7] Updates absolute positioning description Co-authored-by: James Stuckey Weber --- features/absolute-positioning.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/features/absolute-positioning.yml b/features/absolute-positioning.yml index c7ba958a321..7f1df7830e7 100644 --- a/features/absolute-positioning.yml +++ b/features/absolute-positioning.yml @@ -1,5 +1,5 @@ name: Absolute positioning -description: "The `position: absolute` CSS declaration removes an element from the normal flow and positions it relative to its containing block or closest positioned ancestor." +description: "The `position: absolute` CSS declaration removes an element from the normal flow and positions it relative to its containing block, which is often the root element, or closest positioned ancestor." spec: https://drafts.csswg.org/css-position-3/#abspos-insets group: positioning compat_features: