mirror of
https://github.com/mozilla/gecko-dev.git
synced 2025-11-11 21:58:41 +02:00
f8807693f2
Automatic update from web-platform-tests [css-grid] Fix referencing line both inside and after auto repeat() When referencing a line name appearing both inside and after an auto repeat(), the code used to just take the minim of: - The absolute index of the line inside the auto repeat(), i.e. the local index relative to the auto repeat() plus the insertion point of the auto repeat(). - The index of the line outside the auto repeat(), without expanding repeated tracks. This was correct if the line outside the auto repeat() preceded it. Otherwise it was wrong due to not taking repeated tracks into account. For example, with grid-template-columns: 1px repeat(auto-fill, 2px 3px [a]) [a]; the absolute index of the line inside the auto repeat() is 2 + 1 = 3. And the absolute index of the line outside the auto repeat() is 1 + 2*n. However, the used index wasn't including repeated tracks so it was 2. Therefore, the minimum was 2 but should have been 3. BUG=966090 TEST=external/wpt/css/css-grid/placement/grid-placement-using-named-grid-lines-003.html Change-Id: I1777a64d7e7d39350a327185dcd13f82493adfdb Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2071019 Commit-Queue: Oriol Brufau <obrufau@igalia.com> Reviewed-by: Javier Fernandez <jfernandez@igalia.com> Cr-Commit-Position: refs/heads/master@{#745925} -- wpt-commits: c88c6ad422ab8a5baf8e0018347ddc4e0bdfabe8 wpt-pr: 21984
27 lines
966 B
HTML
27 lines
966 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 right line when there is an auto repeat().">
|
|
<style>
|
|
.grid {
|
|
display: grid;
|
|
width: 300px;
|
|
height: 300px;
|
|
position: relative;
|
|
top: -200px;
|
|
left: -200px;
|
|
grid-template-columns: repeat(auto-fill, 100px 100px) [area-start] 100px [area-end];
|
|
grid-template-rows: repeat(auto-fill, 100px 100px [area-start]) [area-start] 100px [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>
|