mirror of
https://github.com/mozilla/gecko-dev.git
synced 2025-11-11 13:48:23 +02:00
Automatic update from web-platform-tests [css-grid] Fix referencing implicit grid line after auto repeat() The indices of both implicit grid lines defined with grid-template-areas and explicit ones defined with grid-template-rows/columns used to be stored together in NamedGridColumnLines and NamedGridRowLines. However, this was problematic, because the former indices already refer to the final explicit grid so they don't have to be increased when expanding an auto repeat(), but the latter ones should. Therefore, this patch stores the indices in separate fields and uses the correct logic for each one. BUG=966090 TEST=external/wpt/css/css-grid/placement/grid-placement-using-named-grid-lines-005.html TEST=external/wpt/css/css-grid/placement/grid-placement-using-named-grid-lines-006.html Change-Id: I6d423148af0e4dd865f130742f7a927a325cef90 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2081823 Reviewed-by: Javier Fernandez <jfernandez@igalia.com> Commit-Queue: Oriol Brufau <obrufau@igalia.com> Cr-Commit-Position: refs/heads/master@{#747669} -- wpt-commits: fa8785321b8e3a1baa7bf08423a2c7df3eea5291 wpt-pr: 22062
25 lines
903 B
HTML
25 lines
903 B
HTML
<!DOCTYPE html>
|
|
<meta charset="utf-8">
|
|
<title>CSS Grid Layout Test: Grid item placement with implicit 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 defined implicitly with grid-template-areas.">
|
|
<style>
|
|
.grid {
|
|
display: grid;
|
|
width: 300px;
|
|
height: 300px;
|
|
grid-template-areas: "area";
|
|
grid-template-columns: repeat(auto-fill, 100px);
|
|
grid-template-rows: repeat(auto-fill, 100px) [area-end] 100px;
|
|
}
|
|
.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>
|