mirror of
https://github.com/mozilla/gecko-dev.git
synced 2025-11-11 05:39:41 +02:00
624536a636
Automatic update from web-platform-tests
[css-grid] Fix referencing name of 1st line followed by auto repeat()
When referencing a line name in the grid-placement properties, if the
first track was defined using the auto repeat() syntax, then the code
would assume that the line had to appear after the repeated tracks.
However, it can precede them, e.g.
grid-template-columns: [first] repeat(auto-fill, 10px)
This patch fixes this by removing the special casing for auto repeat()
being the first tracks.
BUG=966090
TEST=external/wpt/css/css-grid/placement/grid-placement-using-named-grid-lines-002.html
Change-Id: Ic9c1199532f8ed06c958b80aef4580b7a318490c
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2071873
Reviewed-by: Javier Fernandez <jfernandez@igalia.com>
Commit-Queue: Oriol Brufau <obrufau@igalia.com>
Cr-Commit-Position: refs/heads/master@{#744426}
--
wpt-commits: a4677f682d251f7c072772973058e77777711564
wpt-pr: 21964
25 lines
930 B
HTML
25 lines
930 B
HTML
<!DOCTYPE html>
|
|
<meta charset="utf-8">
|
|
<title>CSS Grid Layout Test: Grid item placement with named line and auto repeat()</title>
|
|
<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
|
|
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#line-placement">
|
|
<link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
|
|
<meta name="assert" content="Grid placement algorithm is able to select the 1st line by name when the 1st track is defined with auto repeat().">
|
|
<style>
|
|
.grid {
|
|
display: grid;
|
|
width: 100px;
|
|
height: 100px;
|
|
background: red;
|
|
grid-template-columns: [area-start] repeat(auto-fill, 10px) [area-end];
|
|
grid-template-rows: [area-start] repeat(auto-fill, 10px [area-start]) [area-end];
|
|
}
|
|
.grid > div {
|
|
grid-area: area;
|
|
background: green;
|
|
}
|
|
</style>
|
|
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
|
<div class="grid">
|
|
<div></div>
|
|
</div>
|