Skip to content

[css-conditional-5] Add inline/block/x/y values to overflowing scroll-state query? #11183

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Closed
fantasai opened this issue Nov 12, 2024 · 6 comments
Closed

[css-conditional-5] Add inline/block/x/y values to overflowing scroll-state query? #11183

fantasai opened this issue Nov 12, 2024 · 6 comments
Labels
css-conditional-5 Current Work

Comments

@fantasai
Copy link
Collaborator

fantasai commented Nov 12, 2024 •
edited by Loirooriol
Loading

The overflowing scroll-state query has the values none | top | right | bottom | left | block-start | inline-start | block-end | inline-end , which indicate each of the sides of the box. But sometimes people want to know about an axis, not one side of it specifically.

Would it make sense to add x/y/inline/block values to this query as well? They would be true if there is scrollable overflow in either direction along the named axis.
@tabatkins
Copy link
Member

Yeah, I think this makes sense as a shorthand for having to write overflowing(left) or overflowing(right)

@yisibl
Copy link
Contributor

yisibl commented Nov 13, 2024

Yes, that makes perfect sense. I've found in my practice that many times I want to know if there are horizontal or vertical scrollbars.

lilles added a commit to lilles/csswg-drafts that referenced this issue Nov 14, 2024
@lilles
[css-conditional-5] Add axis keywords for overflowing w3c#11183
6e0fc0b
@lilles lilles added the Async Resolution: Proposed Candidate for auto-resolve with stated time limit label Nov 20, 2024
@lilles
Copy link
Member

lilles commented Nov 20, 2024

Proposed async resolution: add inline/block/x/y values to scrollable scroll-state() query

@astearns
Copy link
Member

The CSSWG will automatically accept this resolution one week from now if no objections are raised here. Anyone can add an emoji to this comment to express support. If you do not support this resolution, please add a new comment.

Proposed Resolution: add inline/block/x/y values to scrollable scroll-state() query

@astearns astearns added Async Resolution: Call For Consensus Resolution will be called after time limit expires and removed Async Resolution: Proposed Candidate for auto-resolve with stated time limit labels Nov 20, 2024
aarongable pushed a commit to chromium/chromium that referenced this issue Nov 21, 2024
@lilles
[@container] Add support for scroll-state(overflowing) axis
d0d3010 
Add new values for matching axis instead of edge for overflowing: block,
inline, x, y.

These are convenience keywords. For instance:

  scroll-state(overflowing: x)

is the same as:

  scroll-state((overflowing: left) or (overflowing: right))

Based on request in [1]

[1] w3c/csswg-drafts#11183

Bug: 367764865
Change-Id: I125db5e5eced86da6404aa0bc5469830278d0ca9
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/6022915
Reviewed-by: Anders Hartvoll Ruud <andruud@chromium.org>
Commit-Queue: Rune Lillesveen <futhark@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1386111}
chromium-wpt-export-bot pushed a commit to web-platform-tests/wpt that referenced this issue Nov 21, 2024
@lilles @chromium-wpt-export-bot
[@container] Add support for scroll-state(overflowing) axis
af2b6f9 
Add new values for matching axis instead of edge for overflowing: block,
inline, x, y.

These are convenience keywords. For instance:

  scroll-state(overflowing: x)

is the same as:

  scroll-state((overflowing: left) or (overflowing: right))

Based on request in [1]

[1] w3c/csswg-drafts#11183

Bug: 367764865
Change-Id: I125db5e5eced86da6404aa0bc5469830278d0ca9
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/6022915
Reviewed-by: Anders Hartvoll Ruud <andruud@chromium.org>
Commit-Queue: Rune Lillesveen <futhark@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1386111}
Merged
chromium-wpt-export-bot pushed a commit to web-platform-tests/wpt that referenced this issue Nov 21, 2024
@lilles @chromium-wpt-export-bot
[@container] Add support for scroll-state(overflowing) axis
d486856 
Add new values for matching axis instead of edge for overflowing: block,
inline, x, y.

These are convenience keywords. For instance:

  scroll-state(overflowing: x)

is the same as:

  scroll-state((overflowing: left) or (overflowing: right))

Based on request in [1]

[1] w3c/csswg-drafts#11183

Bug: 367764865
Change-Id: I125db5e5eced86da6404aa0bc5469830278d0ca9
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/6022915
Reviewed-by: Anders Hartvoll Ruud <andruud@chromium.org>
Commit-Queue: Rune Lillesveen <futhark@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1386111}
@astearns
Copy link
Member

RESOLVED: add inline/block/x/y values to scrollable scroll-state() query

@astearns astearns added Needs Edits and removed Agenda+ Async Resolution: Call For Consensus Resolution will be called after time limit expires labels Nov 28, 2024
@mozilla-apprentice mozilla-apprentice mentioned this issue Nov 28, 2024
Open
@chromium-helper chromium-helper mentioned this issue Nov 28, 2024
Closed
moz-v2v-gh pushed a commit to mozilla/gecko-dev that referenced this issue Nov 28, 2024
@lilles @moz-wptsync-bot
Bug 1932571 [wpt PR 49304] - [@container] Add support for scroll-stat…
09e2423 
…e(overflowing) axis, a=testonly

Automatic update from web-platform-tests
[@container] Add support for scroll-state(overflowing) axis

Add new values for matching axis instead of edge for overflowing: block,
inline, x, y.

These are convenience keywords. For instance:

  scroll-state(overflowing: x)

is the same as:

  scroll-state((overflowing: left) or (overflowing: right))

Based on request in [1]

[1] w3c/csswg-drafts#11183

Bug: 367764865
Change-Id: I125db5e5eced86da6404aa0bc5469830278d0ca9
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/6022915
Reviewed-by: Anders Hartvoll Ruud <andruud@chromium.org>
Commit-Queue: Rune Lillesveen <futhark@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1386111}

--

wpt-commits: d486856789206e72535e8a0c2d341bd2d39b4af1
wpt-pr: 49304
@lilles lilles mentioned this issue Nov 29, 2024
Merged
lilles added a commit that referenced this issue Nov 29, 2024
@lilles
[css-conditional-5] Add axis keywords for overflowing #11183 (#11295)
5ba2d12 
Co-authored-by: Rune Lillesveen <futhark@google.com>
@lilles
Copy link
Member

lilles commented Nov 29, 2024

Test coverage:

http://wpt.live/css/css-conditional/container-queries/scroll-state/at-container-scrollable-parsing.html
http://wpt.live/css/css-conditional/container-queries/scroll-state/scroll-state-scrollable-axis.html

@lilles lilles closed this as completed Nov 29, 2024
i3roly pushed a commit to i3roly/firefox-dynasty that referenced this issue Nov 30, 2024
@lilles @moz-wptsync-bot
Bug 1932571 [wpt PR 49304] - [@container] Add support for scroll-stat…
d571874 
…e(overflowing) axis, a=testonly

Automatic update from web-platform-tests
[@container] Add support for scroll-state(overflowing) axis

Add new values for matching axis instead of edge for overflowing: block,
inline, x, y.

These are convenience keywords. For instance:

  scroll-state(overflowing: x)

is the same as:

  scroll-state((overflowing: left) or (overflowing: right))

Based on request in [1]

[1] w3c/csswg-drafts#11183

Bug: 367764865
Change-Id: I125db5e5eced86da6404aa0bc5469830278d0ca9
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/6022915
Reviewed-by: Anders Hartvoll Ruud <andruud@chromium.org>
Commit-Queue: Rune Lillesveen <futhark@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1386111}

--

wpt-commits: d486856789206e72535e8a0c2d341bd2d39b4af1
wpt-pr: 49304
gecko-dev-updater pushed a commit to marco-c/gecko-dev-wordified-and-comments-removed that referenced this issue Dec 1, 2024
@marco-c
Bug 1932571 [wpt PR 49304] - [container] Add support for scroll-state…
ece1a1d 
…(overflowing) axis, a=testonly

Automatic update from web-platform-tests
[container] Add support for scroll-state(overflowing) axis

Add new values for matching axis instead of edge for overflowing: block,
inline, x, y.

These are convenience keywords. For instance:

  scroll-state(overflowing: x)

is the same as:

  scroll-state((overflowing: left) or (overflowing: right))

Based on request in [1]

[1] w3c/csswg-drafts#11183

Bug: 367764865
Change-Id: I125db5e5eced86da6404aa0bc5469830278d0ca9
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/6022915
Reviewed-by: Anders Hartvoll Ruud <andruudchromium.org>
Commit-Queue: Rune Lillesveen <futharkchromium.org>
Cr-Commit-Position: refs/heads/main{#1386111}

--

wpt-commits: d486856789206e72535e8a0c2d341bd2d39b4af1
wpt-pr: 49304

UltraBlame original commit: 9ed5d61e8851988edf3eb21e4495ad379184b728
gecko-dev-updater pushed a commit to marco-c/gecko-dev-comments-removed that referenced this issue Dec 1, 2024
@marco-c
Bug 1932571 [wpt PR 49304] - [container] Add support for scroll-state…
f75e55f 
…(overflowing) axis, a=testonly

Automatic update from web-platform-tests
[container] Add support for scroll-state(overflowing) axis

Add new values for matching axis instead of edge for overflowing: block,
inline, x, y.

These are convenience keywords. For instance:

  scroll-state(overflowing: x)

is the same as:

  scroll-state((overflowing: left) or (overflowing: right))

Based on request in [1]

[1] w3c/csswg-drafts#11183

Bug: 367764865
Change-Id: I125db5e5eced86da6404aa0bc5469830278d0ca9
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/6022915
Reviewed-by: Anders Hartvoll Ruud <andruudchromium.org>
Commit-Queue: Rune Lillesveen <futharkchromium.org>
Cr-Commit-Position: refs/heads/main{#1386111}

--

wpt-commits: d486856789206e72535e8a0c2d341bd2d39b4af1
wpt-pr: 49304

UltraBlame original commit: 9ed5d61e8851988edf3eb21e4495ad379184b728
gecko-dev-updater pushed a commit to marco-c/gecko-dev-wordified that referenced this issue Dec 1, 2024
@marco-c
Bug 1932571 [wpt PR 49304] - [container] Add support for scroll-state…
f535432 
…(overflowing) axis, a=testonly

Automatic update from web-platform-tests
[container] Add support for scroll-state(overflowing) axis

Add new values for matching axis instead of edge for overflowing: block,
inline, x, y.

These are convenience keywords. For instance:

  scroll-state(overflowing: x)

is the same as:

  scroll-state((overflowing: left) or (overflowing: right))

Based on request in [1]

[1] w3c/csswg-drafts#11183

Bug: 367764865
Change-Id: I125db5e5eced86da6404aa0bc5469830278d0ca9
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/6022915
Reviewed-by: Anders Hartvoll Ruud <andruudchromium.org>
Commit-Queue: Rune Lillesveen <futharkchromium.org>
Cr-Commit-Position: refs/heads/main{#1386111}

--

wpt-commits: d486856789206e72535e8a0c2d341bd2d39b4af1
wpt-pr: 49304

UltraBlame original commit: 9ed5d61e8851988edf3eb21e4495ad379184b728
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
css-conditional-5 Current Work
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
5 participants
@tabatkins @fantasai @lilles @astearns @yisibl