Skip to content

Commit

Permalink
Tweak flexbox_justifycontent-center-overflow.html to match implementa…
Browse files Browse the repository at this point in the history
…tions (#26256)

The offsets -2.85em and 4.95em in the ref perhaps (at a guess) initially
matched precisely the Presto behavior, but now look like magic
constants, and is slightly off in all implementations:
https://wpt.fyi/results/css/css-flexbox/flexbox_justifycontent-center-overflow.html?run_id=711240001&run_id=697770002&run_id=737900001&run_id=715540002&run_id=705490001

Control the width of the boxes more explicitly, so that the ref can be
written in a more straightforward way.

Also replaces "dam" (lady in Norwegian) with "x" to make the text much
shorter than the span widths, and matching an earlier rewrite:
#16820
  • Loading branch information
foolip authored Oct 23, 2020
1 parent 0c6b6ed commit a10802c
Show file tree
Hide file tree
Showing 2 changed files with 14 additions and 13 deletions.
20 changes: 11 additions & 9 deletions css/css-flexbox/flexbox_justifycontent-center-overflow-ref.html
Original file line number Diff line number Diff line change
Expand Up @@ -12,24 +12,26 @@
position: relative;
}
span {
background: yellow;
margin: 1em 0 0 -2.85em;
background: white;
margin: 1em;
width: 2em;
height: 6em;
display: inline-block;
display: block;
position: absolute;
}
span:nth-child(1) {
background: yellow;
left: -4em;
}
span:nth-child(2) {
background: pink;
margin-left: 2em;
}
span:nth-child(3) {
background: lightblue;
margin-left: 0;
position: relative;
top: -7em;
left: 4.95em
left: 4em;
}
</style>

<div>
<span>dam</span><span>dam</span><span>dam</span>
<span>x</span><span>x</span><span>x</span>
</div>
7 changes: 3 additions & 4 deletions css/css-flexbox/flexbox_justifycontent-center-overflow.html
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,6 @@
div {
font-family: monospace;
background: blue;
padding: 0;
margin: 1em 0 0 10em;
border: 1px solid black;
height: 8em;
Expand All @@ -20,8 +19,8 @@
span {
background: white;
margin: 1em;
width: 5em;
max-width: 6em;
min-width: 2em;
max-width: 2em;
display: inline-block;

flex: 1 0 0%;
Expand All @@ -32,5 +31,5 @@
</style>

<div>
<span>dam</span><span>dam</span><span>dam</span>
<span>x</span><span>x</span><span>x</span>
</div>

0 comments on commit a10802c

Please sign in to comment.