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

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

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

Patch Set: Fixed several bug and added new tests. 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:

View unified diff | Download patch

« no previous file with comments | « no previous file | third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-align-baseline-expected.txt » ('j') | third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-align-baseline-vertical.html » ('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 <script src="../../resources/check-layout.js"></script>

	6 <style>

	7 body {

	8 margin: 0;

	9 }

	10

	11 .grid {

	12 width: 600px;

	13 grid-auto-columns: 1fr;

	14 position: relative;

	15 margin-bottom: 20px;

	16 font: 20px/1 Ahem;

	17 }

	18

	19 .itemsBaseline {

	20 align-items: baseline;

	21 }

	22

	23 .grid :nth-child(1) { background-color: blue; }

	24 .grid :nth-child(2) { background-color: green; }

	25 .grid :nth-child(3) { background-color: red; }

	26 .grid :nth-child(4) { background-color: yellow; }

	27 .grid :nth-child(5) { background-color: purple; }

	28 .grid :nth-child(6) { background-color: orange; }

	29 .grid :nth-child(7) { background-color: lime; }

	30 .grid :nth-child(8) { background-color: lightblue; }

	31 .grid :nth-child(9) { background-color: darkred; }

	32 .grid :nth-child(10) { background-color: gold; }

	33 .grid :nth-child(11) { background-color: salmon; }

	34

	35 .firstRowThirdColumn {

	36 grid-row: 1;

	37 grid-column: 3;

	38 }

	39 .firstRowFourthColumn {

	40 grid-row: 1;

	41 grid-column: 4;

	42 }

	43 .firstRowFifthColumn {

	44 grid-row: 1;

	45 grid-column: 5;

	46 }

	47 </style>

	48 </head>

	49 <body onload="checkLayout('.grid')">

	50

	51 <div class="grid itemsBaseline">

	52 <div style="margin: 40px 0px;" class="firstRowFirstColumn" data-offset-x="0" data-offset-y="40" data-expected-width="200" data-expected-height="20"><div sty le="display:inline-block;"></div></div>

	53 <div style="margin: auto 0px 0px;" class="firstRowSecondColumn" data-offset- x="200" data-offset-y="80" data-expected-width="200" data-expected-height="20">< div style="display:inline-block;"></div></div>

	54 <div style="margin: 20px 0px;" class="firstRowThirdColumn" data-offset-x="40 0" data-offset-y="40" data-expected-width="200" data-expected-height="20"><div s tyle="display:inline-block;"></div></div>

	55 </div>

	56

	57 <div class="grid">

	58 <div data-expected-height="20" data-offset-y="20" class="firstRowFirstColumn " style="align-self: baseline; height: 20px;"></div>

	59 <div data-expected-height="10" data-offset-y="30" class="firstRowSecondColum n" style="align-self: baseline; height: 10px; margin: 30px 0 10px;"></div>

	60 <div data-expected-height="10" data-offset-y="30" class="firstRowThirdColumn " style="align-self: baseline; height: 10px; margin: 20px 0 0;"></div>

	61 <div data-expected-height="100" data-offset-y="0" class="firstRowFourthColum n" style="height: 100px;"></div>

	62 </div>

	63

	64 <div class="grid">

	65 <div id="baseline1" class="firstRowFirstColumn" style="align-self: baseline; ">ahem</div>

	66 <div id="baseline2" data-offset-y="0" class="firstRowSecondColumn" style="al ign-self: baseline;"><img src="../../fast/replaced/resources/1x1-blue.png" style ="height: 50px;"></div>

	67 <div data-expected-height="50" data-offset-y="25" class="firstRowThirdColumn " style="align-self: center;"><img src="../../fast/replaced/resources/1x1-blue.p ng" style="height: 50px; vertical-align: middle"></div>

	68 <div id="baseline3" data-expected-height="50" class="firstRowFourthColumn" s tyle="align-self: baseline;"><img src="../../fast/replaced/resources/1x1-blue.pn g" style="height: 50px; vertical-align: middle"></div>

	69 <div data-expected-height="100" data-offset-y="0" class="firstRowFifthColumn " style="height: 100px;"></div>

	70 </div>

	71

	72 <div class="grid">

	73 <div id="baseline4" class="firstRowFirstColumn" style="align-self: baseline; ">ahem</div>

	74 <div id="baseline5" class="firstRowSecondColumn" style="align-self: baseline ;"><br><img src="../../fast/replaced/resources/1x1-blue.png" style="height: 50px ;"></div>

	75 <div data-expected-height="50" data-offset-y="0" class="firstRowThirdColumn" style="align-self: baseline;"><img src="../../fast/replaced/resources/1x1-blue. png" style="height: 50px; vertical-align: middle"></div>

	76 <div data-expected-height="100" data-offset-y="0" class="firstRowFourthColum n" style="height: 100px;"></div>

	77 </div>

	78

	79 <div id="results"></div>

	80

	81 <script>

	82 function additionalBaselineChecks()

	83 {

	84 var baseline1 = document.getElementById("baseline1");

	85 var baseline2 = document.getElementById("baseline2");

	86 var baseline3 = document.getElementById("baseline3");

	87 logIfFalse(baseline1.offsetTop + baseline1.offsetHeight == baseline2.offsetT op + baseline2.offsetHeight,

	88 "baseline1 and baseline2 should have the same baseline.");

	89 logIfFalse(baseline3.offsetTop < 25,

	90 "baseline3 should be above the center align-selfed item.");

	91

	92 var baseline4 = document.getElementById("baseline4");

	93 var baseline5 = document.getElementById("baseline5");

	94 logIfFalse(baseline4.offsetTop == baseline5.offsetTop,

	95 "baseline4 and baseline5 should be top aligned with each other.") ;

	96 logIfFalse(baseline4.offsetTop > 0,

	97 "baseline4 and baseline5 should be below baseline6.");

	98 }

	99

	100 function logIfFalse(condition, msg)

	101 {

	102 if (!condition)

	103 document.getElementById("results").innerText += msg;

	104 }

	105

	106 additionalBaselineChecks();

	107 </script>

	108

	109 </body>

	110 </html>

OLD	NEW