third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-baseline-must-respect-grid-order.html - Issue 2417853002: [css-grid] Implementing the grid's first line baseline.

Unified Diff: third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-baseline-must-respect-grid-order.html

Issue 2417853002: [css-grid] Implementing the grid's first line baseline. (Closed)

Patch Set: Created 4 years, 2 months ago

Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.

Jump to:

View side-by-side diff with in-line comments

« no previous file with comments | « third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-baseline-margins-expected.html ('k') | third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-painting-respect-dom-order.html » ('j') | third_party/WebKit/Source/core/layout/LayoutGrid.cpp » ('J')
Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')

Index: third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-baseline-must-respect-grid-order.html

diff --git a/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-baseline-must-respect-grid-order.html b/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-baseline-must-respect-grid-order.html

new file mode 100644

index 0000000000000000000000000000000000000000..3ba5d4f4048d15f3237e91976d382cb05606577f

--- /dev/null

+++ b/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-baseline-must-respect-grid-order.html

@@ -0,0 +1,52 @@

+<!DOCTYPE html>

+<link href="resources/grid.css" rel="stylesheet">

+<style>

+body { margin: 0; }

+.container {

+ position: relative;

+ font: 10px/1 Ahem;

+ border: 1px solid;

+ width: 470px;

+.grid {

+ display: inline-grid;

+ grid-template-columns: 50px;

+ width: 150px;

+ height: 100px;

+ background-color: transparent;

+ position: relative;

+.item {

+ width: 50px;

+ height: 50px;

+.firstRowSecondColumn { margin-top: 20px; }

+.firstRowThirdColumn { margin-top: 30px; }

+</style>

+<script src="../../resources/testharness.js"></script>

+<script src="../../resources/testharnessreport.js"></script>

+<script src="../../resources/check-layout-th.js"></script>

+<body onload="checkLayout('.grid, container')">

+<div id="log"></div>

+ <p>

+ The test shows 3 grids each of them with 3 items sorted differently in the DOM.<br>

+ Each grid container must use its first (grid order) item to compute its baseline, hence they might be baseline aligned each other accordingly.

+ </p>

+ <div class="container" data-expected-width="472" data-expected-height="132">

+ <div class="grid" data-offset-x="0" data-offset-y="30">

+ <div class="item firstRowFirstColumn" data-offset-x="0" data-offset-y="0"></div>

+ <div class="item firstRowSecondColumn" data-offset-x="50" data-offset-y="20"></div>

+ <div class="item firstRowThirdColumn" data-offset-x="100" data-offset-y="30"></div>

+ </div>

+ <div class="grid" data-offset-x="160" data-offset-y="0">

+ <div class="item firstRowThirdColumn" data-offset-x="100" data-offset-y="30"></div>

+ <div class="item firstRowFirstColumn" data-offset-x="0" data-offset-y="0"></div>

+ <div class="item firstRowSecondColumn" data-offset-x="50" data-offset-y="20"></div>

+ </div>

+ <div class="grid" data-offset-x="320" data-offset-y="10">

+ <div class="item firstRowSecondColumn" data-offset-x="50" data-offset-y="20"></div>

+ <div class="item firstRowFirstColumn" data-offset-x="0" data-offset-y="0"></div>

+ <div class="item firstRowThirdColumn" data-offset-x="100" data-offset-y="30"></div>

+ </div>

+</body>