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

[css-align-3] Specifying justiy-self on block-level boxes wrt floats #9963

Open
fantasai opened this issue Feb 14, 2024 · 2 comments
Open

[css-align-3] Specifying justiy-self on block-level boxes wrt floats #9963

fantasai opened this issue Feb 14, 2024 · 2 comments
Labels
css-align-3 Current Work

Comments

@fantasai
Copy link
Collaborator

Discussing how to spec the alignment of block-level boxes in the presence of floats...

Notes:

  • If we have a border-box that avoids floats, then attach the margins to the containing block, calculate float intrusions, and then align in the remaining space.
  • Maybe can define it that way for all margins, even without floats? Should still have the visual effect of aligning the margin box within the container.
  • Should alignment cause non-BFCs to avoid floats?
@fantasai fantasai added the css-align-3 Current Work label Feb 14, 2024
@Loirooriol
Copy link
Contributor

@bfgeek I don't understand how -webkit-center is behaving here: https://software.hixie.ch/utilities/js/live-dom-viewer/saved/12378

<!DOCTYPE html>
<label>margin-left<input id="margin-left" value="0" type="range" min="0" max="50" list="markers"></label><br>
<label>margin-right<input id="margin-right" value="0" type="range" min="0" max="50" list="markers"></label><br>
<datalist id="markers">
  <option value="0"></option>
  <option value="10"></option>
  <option value="20"></option>
  <option value="30"></option>
  <option value="40"></option>
  <option value="50"></option>
</datalist>
<div style="border: solid; overflow: hidden; width: 300px; text-align: -webkit-center">
  <div style="float: left; height: 100px; width: 100px; background: cyan"></div>
  <div style="float: right; height: 100px; width: 100px; background: magenta"></div>
  <div id="target" style="overflow: hidden; width: 50px; height: 50px; background: orange; margin-left:0; margin-right: 0;"></div>
</div>
<script>
var target = document.getElementById("target");
for (let prop of ["margin-left", "margin-right"]) {
  document.getElementById(prop).addEventListener("input", e => target.style.setProperty(prop, e.target.value + "px"));
}
</script>
@Loirooriol
Copy link
Contributor

Loirooriol commented Feb 17, 2024 •
edited
Loading

Testing with <center>:

  • Gecko safely centers the border box within the intersection of:

    • the containing block shrunken to avoid floats
    • the containing block shrunken by the margins

    That is, margins only prevent the border box from going too close to the original containing block, they don't enforce any extra separation between the border box and the floats.

  • WebKit safely centers the margin box within the containing block. And then moves the margin box to the right so that it doesn't overlap left floats. Right floats can be overlapped due to the centering or due to the movement to avoid left floats.

  • Blink treats margin-left in a nonsensical way. When only using margin-right, it seems to safely center the margin box within the containing block shrunken to avoid floats.

Since WebKit and Blink are broken, I plan to align Servo with Gecko.
@Loirooriol Loirooriol mentioned this issue Feb 26, 2024
Merged
3 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
css-align-3 Current Work
2 participants
@fantasai @Loirooriol