Commit 624536a6 authored by Oriol Brufau's avatar Oriol Brufau Committed by moz-wptsync-bot
Browse files

Bug 1617980 [wpt PR 21964] - [css-grid] Fix referencing name of 1st line... 

Bug 1617980 [wpt PR 21964] - [css-grid] Fix referencing name of 1st line followed by auto repeat(), a=testonly

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: default avatarJavier Fernandez <jfernandez@igalia.com>
Commit-Queue: Oriol Brufau <obrufau@igalia.com>
Cr-Commit-Position: refs/heads/master@{#744426}

--

wpt-commits: a4677f682d251f7c072772973058e77777711564
wpt-pr: 21964
parent 5d3a4e28

testing/web-platform/tests/css/css-grid/placement/grid-placement-using-named-grid-lines-002.html

0 → 100644
+25 −0
Original line number Diff line number Diff line 
<!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>