third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-baseline-margins.html - Issue 1407633003: [css-grid] Implementation of Baseline Self-Alignment

Side by Side Diff: third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-baseline-margins.html

Issue 1407633003: [css-grid] Implementation of Baseline Self-Alignment (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master

Patch Set: Preliminary approach. Created 5 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 unified diff | Download patch

« no previous file with comments | « third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-baseline.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 <html>

	3 <head>

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

	5 <style>

	6 .grid, .inline-grid {

	7 background-color: lightgrey;

	8 }

	9

	10 .inline-block {

	11 display: inline-block;

	12 }

	13

	14 .border {

	15 border: 11px solid pink;

	16 }

	17

	18 .padding {

	19 padding: 13px;

	20 }

	21

	22 .margin {

	23 margin: 8px 0;

	24 }

	25

	26 .grid > div {

	27 min-width: 0;

	28 min-height: 0;

	29 }

	30

	31 .column {

	32 grid-auto-flow: column;

	33 }

	34 </style>

	35 </head>

	36 <body>

	37

	38 <div>

	39 before text

	40 <div class="border" style="display: inline-block; background-color: lightgrey">

	41 <div class="grid" style="height: 30px; margin-top: 7px; padding-top: 10px;">

	42 baseline

	43 </div>

	44 </div>

	45 after text

	46 </div>

	47

	48 <div>

	49 Should align

	50 <div class="inline-block border">

	51 <div class="grid column padding" style="grid-auto-columns: 50px; grid-auto-row s: 50px; background-color: pink">

	52 <div style="background-color: lightgrey"></div>

	53 </div>

	54 </div>

	55 with the

	56 <div class="inline-block margin">

	57 <div class="grid column border" style="grid-auto-columns: 50px; grid-auto-rows : 50px; background-color: pink">

	58 <div style="background-color: lightgrey"></div>

	59 </div>

	60 </div>

	61 bottom of

	62 <div class="inline-block padding" style="padding-left: 0; padding-right: 0">

	63 <div class="grid column margin border" style="grid-auto-columns: 50px; grid-au to-rows: 50px; background-color: pink">

	64 <div style="background-color: lightgrey;"></div>

	65 </div>

	66 </div>

	67 the grey

	68 <div class="inline-grid column margin border" style="grid-auto-columns: 30px; gr id-auto-rows: 30px;"></div>

	69 box.

	70 </div>

	71

	72 <div>

	73 Should align

	74 with the

	75 <div class="inline-block">

	76 <div class="grid column" style="background-color: pink">

	77 <div class="border padding margin" style="background-color: lightgrey;"></ div>

	78 </div>

	79 </div>

	80 middle of

	81 <div class="inline-grid column margin border padding"></div>

	82 the grey box.

	83 </div>

	84

	85 <div>

	86 Should align with the top

	87 <div class="inline-block border margin padding" style="background-color: pink">

	88 <div class="grid column border margin padding" style="grid-auto-columns: 50px; grid-auto-rows: 50px; background-color: pink">

	89 <div style="overflow: scroll; margin-top: 4px; border-top: 9px solid pink; ">

	90 <div style="width: 200px; height: 200px; background-color: lightgrey;" ></div>

	91 </div>

	92 </div>

	93 </div>

	94 of the horizontal scrollbar.

	95 </div>

	96

	97 <div>

	98 Should align 10px above the

	99 <div class="inline-block" style="background-color: pink">

	100 <div class="grid column" style="width: 50px; grid-auto-columns: 50px; height: 50px; grid-auto-rows: 50px; background-color: pink">

	101 <div style="overflow: scroll; padding-bottom: 10px">

	102 <div style="width: 200px; height: 200px; background-color: lightgrey; padding-bottom: 10px"></div>

	103 </div>

	104 </div>

	105 </div>

	106 horizontal scrollbar, if one is visible.

	107 </div>

	108

	109 </body>

	110 </html>

OLD	NEW