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.

Side by Side 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: Patch for landing. Created 4 years, 1 month ago

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

Jump to:

« third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-baseline-margins.html ('K') | « 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')
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')

OLD	NEW
(Empty)
	1 <!DOCTYPE html>

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

	3 <style>

	4 body { margin: 0; }

	5 .container {

	6 position: relative;

	7 font: 10px/1 Ahem;

	8 border: 1px solid;

	9 width: 470px;

	10 }

	11 .grid {

	12 display: inline-grid;

	13 grid-template-columns: 50px;

	14 width: 150px;

	15 height: 100px;

	16 background-color: transparent;

	17 position: relative;

	18 }

	19 .item {

	20 width: 50px;

	21 height: 50px;

	22 }

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

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

	25 </style>

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

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

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

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

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

	31 <p>

	32 The test shows 3 grids each of them with 3 items sorted differently in t he DOM.<br>

	33 Each grid container must use its first (grid order) item to compute its baseline, hence they might be baseline aligned each other accordingly.
	Manuel Rego 2016/10/25 19:42:08 As @svillar said, this is probably wrong as we sho As @svillar said, this is probably wrong as we should use the grid-modified document order. Which means that the item in the first row and first column would be the one defining the baseline, independently on its position on the DOM. jfernandez 2016/10/26 14:22:31 Done. Show quoted text On 2016/10/25 19:42:08, Manuel Rego wrote: > As @svillar said, this is probably wrong as we should use > the grid-modified document order. > Which means that the item in the first row and first column > would be the one defining the baseline, independently on its > position on the DOM. Done.
	34 </p>

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

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

	37 <div class="item firstRowFirstColumn" data-offset-x="0" data-offs et-y="0"></div>

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

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

	40 </div>

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

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

	43 <div class="item firstRowFirstColumn" data-offset-x="0" data-offs et-y="0"></div>

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

	45 </div>

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

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

	48 <div class="item firstRowFirstColumn" data-offset-x="0" data-offs et-y="0"></div>

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

	50 </div>

	51 </div>

	52 </body>

OLD	NEW