Skip to content

[css-overflow-3] computed value rules for 'overflow' should not depend on whether something is a replaced element #7435

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.

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

Closed
dbaron opened this issue Jun 30, 2022 · 9 comments
Labels
css-overflow-3 Current Work

Comments

@dbaron
Copy link
Member

dbaron commented Jun 30, 2022

css-overflow-3 states rules for determining the computed value of the overflow property that depend on whether something is a replaced element:

On non-replaced elements, the visible/clip values of overflow compute to auto/hidden (respectively) if one of overflow-x or overflow-y is neither visible nor clip.

On replaced elements, all values other than visible compute to clip.

I didn't think computed values could depend on whether something is a replaced element; I don't think that's known at value computation time (e.g., for <object>).

If that's the case, I'd suggest that the non-replaced rule above apply to all elements, and then the replaced rule be handled at used value time. (This is a behavior change in the behavior of combinations of visible on one axis with a value other than visible or clip on the other axis. However, I suspect that behavior matches implementations today (at least Gecko's), in so far as the difference in behavior on replaced elements is observable.)

(Noticed while trying to write edits for #6212.)

@dbaron dbaron added the css-overflow-3 Current Work label Jun 30, 2022
@fantasai fantasai changed the title computed value rules for 'overflow' should not depend on whether something is a replaced element [css-overflow-3] computed value rules for 'overflow' should not depend on whether something is a replaced element Jun 30, 2022
@khushalsagar
Copy link
Member

khushalsagar commented Jun 30, 2022

This behaviour for replaced elements is a recent addition to the spec. See discussion here. Since replaced elements need to be clipped by default, we also have UA CSS which depends on the element type to apply the default behaviour (see change here).

I didn't think computed values could depend on whether something is a replaced element; I don't think that's known at value computation time (e.g., for <object>).

That's interesting. What are the cases where <object> could be a non-replaced element?

@dbaron
Copy link
Member Author

dbaron commented Jul 1, 2022

That's interesting. What are the cases where <object> could be a non-replaced element?

Items one and three in this example. Note that distinguishing items two and three at value computation time is particularly hard, but I think in general it may be difficult to distinguish replaced elements during value computation, just because that's not the sort of information that's expected to be needed during selector matching and value computation.

@Loirooriol
Copy link
Contributor

<img> can also be replaced or not depending on whether src points to a valid image, example.

@khushalsagar
Copy link
Member

Had a discussion with @dbaron today. The current implementation for how overflow is applied to replaced elements is dependent on the element's tag (for example img and object in this case). This is required for any values being supplied by UA CSS and wasn't the part dbaron was concerned about. @Loirooriol please clarify if you disagree.

The concern was with modifying the style at value computation to apply the overrides in the spec. Implementation wise they follow the same pattern as UA CSS and depend on the element's tag. But this runs into the case where the same tag might not be rendered as a replaced element (like when img falls back to alt test).

Given that we need to rely on the element tag to identify a replaced element in UA CSS, it seems reasonable to rely on the element's tag (which is known at value computation time) when applying overrides to its computed value as well. I see some precedent for this in code but I could only trace back to the spec here.

@tabatkins for an opinion too.

@Loirooriol
Copy link
Contributor

@khushalsagar overflow: scroll triggers scrollbars on a non-replaced img in both Firefox and Chromium. https://software.hixie.ch/utilities/js/live-dom-viewer/saved/10447

@khushalsagar
Copy link
Member

Ok. I see the point now. We can avoid regressing the behaviour for img elements by applying the rule for replaced elements at used value time as David suggested. So only when the element is rendered as a replaced element it won't create a scroll container (consistent with the behaviour today).

But <object> would still be affected because the UA CSS rule is marked with !important to keep these elements from generating ink overflow based on the discussion here.

@tabatkins
Copy link
Member

Yeah, it's been years since it's come up, but I remember now that we can't have computed values depending on replaced-ness, due to image fallback and related stuff - we didn't want to have to wait for network responses before we were able to inherit values.

Unfortunate in general, but in this case indeed not a real problem - having the overflow adjust at used-value time works just fine since this isn't an inherited property and it would be very weird to explicitly use inherit on it. I'll go tweak the spec.

chromium-wpt-export-bot pushed a commit to web-platform-tests/wpt that referenced this issue Jul 7, 2022
Replaced elements support only 2 configs for overflow: visible and clip.
Currently we apply this override at style resolution based on the
element tag to identify replaced elements. This misses cases where a
an element (like img) could be rendered as a non-replaced element if
fallback to alt text is used.

Avoid this by applying this override when using the value in
layout/paint when its known whether the element will render as a replaced
element.

See discussion at: w3c/csswg-drafts#7435.

Bug:1321217
Change-Id: Iadf653ea4a531a1ab313e2e797988d082d5ef1c1
chromium-wpt-export-bot pushed a commit to web-platform-tests/wpt that referenced this issue Jul 7, 2022
Replaced elements support only 2 configs for overflow: visible and clip.
Currently we apply this override at style resolution based on the
element tag to identify replaced elements. This misses cases where a
an element (like img) could be rendered as a non-replaced element if
fallback to alt text is used.

Avoid this by applying this override when using the value in
layout/paint when its known whether the element will render as a replaced
element.

See discussion at: w3c/csswg-drafts#7435.

Bug:1321217
Change-Id: Iadf653ea4a531a1ab313e2e797988d082d5ef1c1
@khushalsagar
Copy link
Member

The spec has been updated and the implementation change is landing in chromium soon. Could we close this issue now?

chromium-wpt-export-bot pushed a commit to web-platform-tests/wpt that referenced this issue Jul 8, 2022
Replaced elements support only 2 configs for overflow: visible and clip.
Currently we apply this override at style resolution based on the
element tag to identify replaced elements. This misses cases where a
an element (like img) could be rendered as a non-replaced element if
fallback to alt text is used.

Avoid this by applying this override when using the value in
layout/paint when its known whether the element will render as a replaced
element.

See discussion at: w3c/csswg-drafts#7435.

Bug:1321217
Change-Id: Iadf653ea4a531a1ab313e2e797988d082d5ef1c1
chromium-wpt-export-bot pushed a commit to web-platform-tests/wpt that referenced this issue Jul 8, 2022
Replaced elements support only 2 configs for overflow: visible and clip.
Currently we apply this override at style resolution based on the
element tag to identify replaced elements. This misses cases where a
an element (like img) could be rendered as a non-replaced element if
fallback to alt text is used.

Avoid this by applying the override when using the value in
layout/paint when it's known whether the element will render as a replaced element.

See discussion at: w3c/csswg-drafts#7435.

Bug:1321217
Change-Id: Iadf653ea4a531a1ab313e2e797988d082d5ef1c1
@dbaron
Copy link
Member Author

dbaron commented Jul 8, 2022

Agreed that this can be closed since it was fixed in efa3228.

@dbaron dbaron closed this as completed Jul 8, 2022
chromium-wpt-export-bot pushed a commit to web-platform-tests/wpt that referenced this issue Jul 11, 2022
Replaced elements support only 2 configs for overflow: visible and clip.
Currently we apply this override at style resolution based on the
element tag to identify replaced elements. This misses cases where a
an element (like img) could be rendered as a non-replaced element if
fallback to alt text is used.

Avoid this by applying the override when using the value in
layout/paint when it's known whether the element will render as a replaced element.

See discussion at: w3c/csswg-drafts#7435.

Bug:1321217
Change-Id: Iadf653ea4a531a1ab313e2e797988d082d5ef1c1
aarongable pushed a commit to chromium/chromium that referenced this issue Jul 11, 2022
Replaced elements support only 2 configs for overflow: visible and clip.
Currently we apply this override at style resolution based on the
element tag to identify replaced elements. This misses cases where a
an element (like img) could be rendered as a non-replaced element if
fallback to alt text is used.

Avoid this by applying the override when using the value in
layout/paint when it's known whether the element will render as a replaced element.

See discussion at: w3c/csswg-drafts#7435.

Bug: 1321217
Change-Id: Iadf653ea4a531a1ab313e2e797988d082d5ef1c1
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3750018
Auto-Submit: Khushal Sagar <[email protected]>
Reviewed-by: Chris Harrelson <[email protected]>
Commit-Queue: Khushal Sagar <[email protected]>
Cr-Commit-Position: refs/heads/main@{#1022859}
chromium-wpt-export-bot pushed a commit to web-platform-tests/wpt that referenced this issue Jul 11, 2022
Replaced elements support only 2 configs for overflow: visible and clip.
Currently we apply this override at style resolution based on the
element tag to identify replaced elements. This misses cases where a
an element (like img) could be rendered as a non-replaced element if
fallback to alt text is used.

Avoid this by applying the override when using the value in
layout/paint when it's known whether the element will render as a replaced element.

See discussion at: w3c/csswg-drafts#7435.

Bug: 1321217
Change-Id: Iadf653ea4a531a1ab313e2e797988d082d5ef1c1
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3750018
Auto-Submit: Khushal Sagar <[email protected]>
Reviewed-by: Chris Harrelson <[email protected]>
Commit-Queue: Khushal Sagar <[email protected]>
Cr-Commit-Position: refs/heads/main@{#1022859}
chromium-wpt-export-bot pushed a commit to web-platform-tests/wpt that referenced this issue Jul 11, 2022
Replaced elements support only 2 configs for overflow: visible and clip.
Currently we apply this override at style resolution based on the
element tag to identify replaced elements. This misses cases where a
an element (like img) could be rendered as a non-replaced element if
fallback to alt text is used.

Avoid this by applying the override when using the value in
layout/paint when it's known whether the element will render as a replaced element.

See discussion at: w3c/csswg-drafts#7435.

Bug: 1321217
Change-Id: Iadf653ea4a531a1ab313e2e797988d082d5ef1c1
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3750018
Auto-Submit: Khushal Sagar <[email protected]>
Reviewed-by: Chris Harrelson <[email protected]>
Commit-Queue: Khushal Sagar <[email protected]>
Cr-Commit-Position: refs/heads/main@{#1022859}
moz-v2v-gh pushed a commit to mozilla/gecko-dev that referenced this issue Jul 15, 2022
…laced elements to used value., a=testonly

Automatic update from web-platform-tests
blink: Switch overflow overrides for replaced elements to used value.

Replaced elements support only 2 configs for overflow: visible and clip.
Currently we apply this override at style resolution based on the
element tag to identify replaced elements. This misses cases where a
an element (like img) could be rendered as a non-replaced element if
fallback to alt text is used.

Avoid this by applying the override when using the value in
layout/paint when it's known whether the element will render as a replaced element.

See discussion at: w3c/csswg-drafts#7435.

Bug: 1321217
Change-Id: Iadf653ea4a531a1ab313e2e797988d082d5ef1c1
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3750018
Auto-Submit: Khushal Sagar <[email protected]>
Reviewed-by: Chris Harrelson <[email protected]>
Commit-Queue: Khushal Sagar <[email protected]>
Cr-Commit-Position: refs/heads/main@{#1022859}

--

wpt-commits: e8138dce388f65c12feff54c07d07e5755962799
wpt-pr: 34743
aosmond pushed a commit to aosmond/gecko that referenced this issue Jul 15, 2022
…laced elements to used value., a=testonly

Automatic update from web-platform-tests
blink: Switch overflow overrides for replaced elements to used value.

Replaced elements support only 2 configs for overflow: visible and clip.
Currently we apply this override at style resolution based on the
element tag to identify replaced elements. This misses cases where a
an element (like img) could be rendered as a non-replaced element if
fallback to alt text is used.

Avoid this by applying the override when using the value in
layout/paint when it's known whether the element will render as a replaced element.

See discussion at: w3c/csswg-drafts#7435.

Bug: 1321217
Change-Id: Iadf653ea4a531a1ab313e2e797988d082d5ef1c1
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3750018
Auto-Submit: Khushal Sagar <[email protected]>
Reviewed-by: Chris Harrelson <[email protected]>
Commit-Queue: Khushal Sagar <[email protected]>
Cr-Commit-Position: refs/heads/main@{#1022859}

--

wpt-commits: e8138dce388f65c12feff54c07d07e5755962799
wpt-pr: 34743
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
css-overflow-3 Current Work
Projects
None yet
Development

No branches or pull requests

4 participants