Ian Kilpatrick
5717ea3a3d
Automatic update from web-platform-tests
[wpt] Fix css/css-align/self-alignment/block-justify-self.html WPT.
This test had two issues:
1. It was assuming that float:left etc was supported directly within
grid layout. It is not, add a wrapper <div> to the float tests.
2. It was also assuming that "width:auto" would shrink to fit when we
have auto margins in block layout. It does not.
Making the top "grid" reference stretch would hide any failures so
just delete this subtest.
There should be no behaviour change.
Fixed: 355683658
Change-Id: Ifb593dd057312b10fae5fa8879c35c68c19f3267
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/7758927
Auto-Submit: Ian Kilpatrick <ikilpatrick@chromium.org>
Commit-Queue: Ian Kilpatrick <ikilpatrick@chromium.org>
Reviewed-by: David Grogan <dgrogan@chromium.org>
Commit-Queue: David Grogan <dgrogan@chromium.org>
Cr-Commit-Position: refs/heads/main@{#1614026}
--
wpt-commits: b97d3cf78856749e794a28457575dc8cf57ba018
wpt-pr: 59161
85 lines
3.5 KiB
HTML
85 lines
3.5 KiB
HTML
<!doctype html>
|
|
<meta charset="UTF-8">
|
|
<title>Self-Alignment: justify-self - block-level elements reference</title>
|
|
<link rel="author" title="David Tran" href="mailto:davidtranhq+wpt@gmail.com" />
|
|
<style>
|
|
.grid-container div {
|
|
width: 100px;
|
|
background-color: green;
|
|
}
|
|
|
|
.stack {
|
|
display: grid;
|
|
}
|
|
|
|
.stack > * {
|
|
grid-row: 1;
|
|
grid-column: 1;
|
|
}
|
|
|
|
body {
|
|
width: 700px;
|
|
}
|
|
|
|
</style>
|
|
<p>Test passes if <strong>no red</strong> is visible</p>
|
|
|
|
<div class="stack" style="float: left;">
|
|
<article class="grid-container" style="display: grid; grid-template-columns: 1fr; width: 300px">
|
|
<div style="justify-self: auto;">auto</div>
|
|
<div style="justify-self: normal;">normal</div>
|
|
<div style="justify-self: stretch; width: auto; margin: 0;">stretch</div>
|
|
<div style="justify-self: stretch; margin: 0;">stretch</div>
|
|
<div style="justify-self: left;">left</div>
|
|
<div style="justify-self: right;">right</div>
|
|
<div style="justify-self: start;">start</div>
|
|
<div style="justify-self: center;">center</div>
|
|
<div style="justify-self: end;">end</div>
|
|
<div style="justify-self: self-start;">self-start</div>
|
|
<div style="justify-self: self-end;">self-end</div>
|
|
<div style="justify-self: flex-start;">flex-start</div>
|
|
<div style="justify-self: flex-end;">flex-end</div>
|
|
<div style="width: auto;">
|
|
<div style="float: left; justify-self: center;">float left</div>
|
|
<div style="float: right; justify-self: center;">float right</div>
|
|
</div>
|
|
<div style="justify-self: self-start; direction: rtl">self-start (rtl)</div>
|
|
<div style="justify-self: self-end; direction: rtl">self-end (rtl)</div>
|
|
<div style="justify-self: start; direction: rtl">start (rtl)</div>
|
|
<div style="justify-self: end; direction: rtl">end (rtl)</div>
|
|
<div style="justify-self: end">end parent
|
|
<div style="position: absolute;">absolute child</div>
|
|
</div>
|
|
<div style="justify-self: end; position: absolute;">absolute parent</div>
|
|
</article>
|
|
</div>
|
|
<div class="stack" style="float: right; direction: rtl">
|
|
<article class="grid-container" style="display: grid; grid-template-columns: 1fr; width: 300px">
|
|
<div style="justify-self: auto;">auto</div>
|
|
<div style="justify-self: normal;">normal</div>
|
|
<div style="justify-self: stretch; width: auto; margin: 0;">stretch</div>
|
|
<div style="justify-self: stretch; margin: 0;">stretch</div>
|
|
<div style="justify-self: left;">left</div>
|
|
<div style="justify-self: right;">right</div>
|
|
<div style="justify-self: start;">start</div>
|
|
<div style="justify-self: center;">center</div>
|
|
<div style="justify-self: end;">end</div>
|
|
<div style="justify-self: self-start;">self-start</div>
|
|
<div style="justify-self: self-end;">self-end</div>
|
|
<div style="justify-self: flex-start;">flex-start</div>
|
|
<div style="justify-self: flex-end;">flex-end</div>
|
|
<div style="width: auto;">
|
|
<div style="float: left; justify-self: center;">float left</div>
|
|
<div style="float: right; justify-self: center;">float right</div>
|
|
</div>
|
|
<div style="justify-self: self-start; direction: ltr">self-start (ltr)</div>
|
|
<div style="justify-self: self-end; direction: ltr">self-end (ltr)</div>
|
|
<div style="justify-self: start; direction: ltr">start (ltr)</div>
|
|
<div style="justify-self: end; direction: ltr">end (ltr)</div>
|
|
<div style="justify-self: end">end parent
|
|
<div style="position: absolute;">absolute child</div>
|
|
</div>
|
|
<div style="justify-self: end; position: absolute;">absolute parent</div>
|
|
</article>
|
|
</div>
|