Commit 846c7391 authored by Abhijeet Kandalkar's avatar Abhijeet Kandalkar Committed by Commit Bot

[css-grid] Migrate grid-template-areas-must-keep-named-columns-order.html test to WPT

Migrate this test out of t_p/blink/web_tests/fast/css-grid-layout and
into the WPT-specific directory, adding links to the relevant specs
and a test assertion describing its purpose.

This test verifies the positioning of named columns inside grid
template areas.

Bug: 1063749
Change-Id: I0bbecc79db855a06bdb8235dd73e32e15beba20b
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2143182Reviewed-by: default avatarChristian Biesinger <cbiesinger@chromium.org>
Reviewed-by: default avatarManuel Rego <rego@igalia.com>
Reviewed-by: default avatarJavier Fernandez <jfernandez@igalia.com>
Commit-Queue: Abhijeet Kandalkar <abhijeet@igalia.com>
Cr-Commit-Position: refs/heads/master@{#759018}
parent c34431a5
<!DOCTYPE html>
<link rel="author" title="Javier Fernandez" href="mailto:jfernandez@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-grid/#grid-placement-slot">
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#propdef-grid-template-columns">
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#propdef-grid-auto-rows">
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#propdef-grid-template-areas">
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#propdef-grid-column">
<link rel="help" href="https://crbug.com/733577">
<link rel="match" href="../reference/grid-template-areas-must-keep-named-columns-order-001-ref.html">
<meta name="assert" content="A grid item located in a named line will be placed in the first one associated to that name"/>
<style>
.grid {
display: inline-grid;
......@@ -11,9 +20,9 @@
.grid > :nth-child(2) { background: blue; }
.grid > :nth-child(3) { background: yellow; }
.grid > :nth-child(4) { background: green; }
.grid > :nth-child(5) { background: red; }
.grid > :nth-child(5) { background: black; }
</style>
<p>This is a regression test for the issue crbug.com/733577 and it passes if the red item is positioned in the first column of the second row, since the spec states that we must select the first one among several equally named grid lines.</p>
<p>This test passes if the black item is positioned in the first column of the second row, since the spec states that we must select the first one among several equally named grid lines.</p>
<div class="grid">
<div></div>
<div></div>
......
......@@ -10,9 +10,9 @@
.grid > :nth-child(2) { background: blue; }
.grid > :nth-child(3) { background: yellow; }
.grid > :nth-child(4) { background: green; }
.grid > :nth-child(5) { background: red; }
.grid > :nth-child(5) { background: black; }
</style>
<p>This is a regression test for the issue crbug.com/733577 and it passes if the red item is positioned in the first column of the second row, since the spec states that we must select the first one among several equally named grid lines.</p>
<p>This test passes if the black item is positioned in the first column of the second row, since the spec states that we must select the first one among several equally named grid lines.</p>
<div class="grid">
<div style="grid-row: 1; grid-column: 1"></div>
<div style="grid-row: 1; grid-column: 2"></div>
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment