Skip to content
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

"Align descendants" believes used margins are altered in overconstrained cases, but that's no longer the case #10149

Open
Loirooriol opened this issue Feb 20, 2024 · 2 comments
Open

"Align descendants" believes used margins are altered in overconstrained cases, but that's no longer the case #10149

Loirooriol opened this issue Feb 20, 2024 · 2 comments
Labels
topic: rendering

Comments

@Loirooriol
Copy link
Contributor

What is the issue with the HTML Standard?

https://html.spec.whatwg.org/multipage/rendering.html#align-descendants

that are over-constrained and that have one of those two margins with a used value forced to a greater value

This used to happen in CSS2 (https://drafts.csswg.org/css2/#blockwidth).

However, that's no longer the case as per CSS Align (https://drafts.csswg.org/css-align/#justify-block)

In terms of CSS2.1 block-level formatting [CSS2], the rules for “over-constrained” computations in section 10.3.3 are ignored in favor of alignment as specified here and the used value of the margin properties are therefore not adjusted to correct for the over-constraint.

Gecko, Blink and WebKit follow CSS Align instead of CSS2, it can be observed via getComputedStyle:

<!DOCTYPE html>
<div style="width: 100px">
  <div id="target" style="width: 50px; padding: 0; border: none; margin: 0"></div>
</div>
<script>
document.body.append(getComputedStyle(target).marginRight);
</script>

It should be 50px as per CSS2, but major browsers say 0px as per CSS Align.

Then the HTML spec goes on with

Aligned elements are expected to be aligned by having the used values of their margins on the line-left and line-right sides be set accordingly.

Again, this doesn't happen on browsers:

<!DOCTYPE html>
<center style="width: 100px; border: solid">
  <div id="target" style="width: 50px; padding: 0; border: none; margin: 0; background: cyan">a</div>
</center>
<script>
document.body.append(getComputedStyle(target).marginLeft);
</script>

Gecko, WebKit and Blink say 0px, not 25px.
@annevk
Copy link
Member

annevk commented Feb 21, 2024

Do you see a way where HTML can have less "magical" CSS language and instead rely on concepts that will stand the test of time?

@Loirooriol
Copy link
Contributor Author

I believe the idea is that:

  • <center> and <div align="center"> should get justify-items: legacy center
  • <div align="left"> should get justify-items: legacy left
  • <div align="right"> should get justify-items: legacy right

This should make justify-self: auto on the contents resolve to the right value, see https://drafts.csswg.org/css-align/#justify-items-property

However, this is not what browsers are doing, because they haven't implemented justify-self for block boxes. Also, the legacy keyword is at-risk.

Loirooriol added a commit to Loirooriol/servo that referenced this issue Feb 23, 2024
@Loirooriol
Support <div align="..."> and <center> in block layout
e07d8bf 
As per HTML [1], <div align="..."> and <center> should align descendants
to the left/center/right. This is similar to having 'auto' margins [2],
but without changing their used values [3].

[1]: https://html.spec.whatwg.org/multipage/rendering.html#flow-content-3
[2]: https://html.spec.whatwg.org/multipage/rendering.html#align-descendants
[3]: whatwg/html#10149
Loirooriol added a commit to Loirooriol/servo that referenced this issue Feb 23, 2024
@Loirooriol
Support <div align="..."> and <center> in block layout
f35dd52 
As per HTML [1], <div align="..."> and <center> should align descendants
to the left/center/right. This is similar to having 'auto' margins [2],
but without changing their used values [3].

[1]: https://html.spec.whatwg.org/multipage/rendering.html#flow-content-3
[2]: https://html.spec.whatwg.org/multipage/rendering.html#align-descendants
[3]: whatwg/html#10149
@Loirooriol Loirooriol mentioned this issue Feb 23, 2024
Merged
3 tasks
Loirooriol added a commit to Loirooriol/servo that referenced this issue Feb 23, 2024
@Loirooriol
Support <div align="..."> and <center> in block layout
2039603 
As per HTML [1], <div align="..."> and <center> should align descendants
to the left/center/right. This is similar to having 'auto' margins [2],
but without changing their used values [3].

[1]: https://html.spec.whatwg.org/multipage/rendering.html#flow-content-3
[2]: https://html.spec.whatwg.org/multipage/rendering.html#align-descendants
[3]: whatwg/html#10149
Loirooriol added a commit to Loirooriol/servo that referenced this issue Feb 26, 2024
@Loirooriol
Support <div align="..."> and <center> in block layout
c9496b6 
As per HTML [1], <div align="..."> and <center> should align descendants
to the left/center/right. This is similar to having 'auto' margins [2],
but without changing their used values [3].

[1]: https://html.spec.whatwg.org/multipage/rendering.html#flow-content-3
[2]: https://html.spec.whatwg.org/multipage/rendering.html#align-descendants
[3]: whatwg/html#10149
github-merge-queue bot pushed a commit to servo/servo that referenced this issue Feb 26, 2024
@Loirooriol
Support <div align="..."> and <center> in block layout (#31423)
3b80b04 
As per HTML [1], <div align="..."> and <center> should align descendants
to the left/center/right. This is similar to having 'auto' margins [2],
but without changing their used values [3].

[1]: https://html.spec.whatwg.org/multipage/rendering.html#flow-content-3
[2]: https://html.spec.whatwg.org/multipage/rendering.html#align-descendants
[3]: whatwg/html#10149
github-merge-queue bot pushed a commit to servo/servo that referenced this issue Feb 26, 2024
@Loirooriol
Support <div align="..."> and <center> in block layout (#31423)
98f06d8 
As per HTML [1], <div align="..."> and <center> should align descendants
to the left/center/right. This is similar to having 'auto' margins [2],
but without changing their used values [3].

[1]: https://html.spec.whatwg.org/multipage/rendering.html#flow-content-3
[2]: https://html.spec.whatwg.org/multipage/rendering.html#align-descendants
[3]: whatwg/html#10149
github-merge-queue bot pushed a commit to servo/servo that referenced this issue Feb 26, 2024
@Loirooriol
Support <div align="..."> and <center> in block layout (#31423)
32102f8 
As per HTML [1], <div align="..."> and <center> should align descendants
to the left/center/right. This is similar to having 'auto' margins [2],
but without changing their used values [3].

[1]: https://html.spec.whatwg.org/multipage/rendering.html#flow-content-3
[2]: https://html.spec.whatwg.org/multipage/rendering.html#align-descendants
[3]: whatwg/html#10149
github-merge-queue bot pushed a commit to servo/servo that referenced this issue Feb 26, 2024
@Loirooriol
Support <div align="..."> and <center> in block layout (#31423)
a97a04d 
As per HTML [1], <div align="..."> and <center> should align descendants
to the left/center/right. This is similar to having 'auto' margins [2],
but without changing their used values [3].

[1]: https://html.spec.whatwg.org/multipage/rendering.html#flow-content-3
[2]: https://html.spec.whatwg.org/multipage/rendering.html#align-descendants
[3]: whatwg/html#10149
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
topic: rendering
Milestone
No milestone
Development

No branches or pull requests
2 participants
@annevk @Loirooriol