third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-align-baseline-vertical.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-vertical.html

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

Patch Set: Improving the skipped tesst by solving some rounding issues Created 3 years, 8 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-align-baseline.html ('k') | third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-baseline.html » ('j') | no next file with comments »
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 <link href="resources/grid-alignment.css" rel="stylesheet">

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

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

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

	9 <style>

	10 body {

	11 margin: 0;

	12 }

	13

	14 .grid {

	15 height: 600px;

	16 grid-auto-columns: 1fr;

	17 margin-bottom: 20px;

	18 position: relative;

	19 writing-mode: vertical-rl;

	20 text-orientation: sideways-right;

	21 }

	22

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

	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 .grid > div {

	48 min-width: 0px;

	49 }

	50 </style>

	51 </head>

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

	53

	54 <div class="grid">

	55 <div data-expected-width="20" data-offset-x="70" class="firstRowFirstColumn alignSelfBaseline" style="width: 20px;"></div>

	56 <div data-expected-width="10" data-offset-x="70" class="firstRowSecondColumn alignSelfBaseline" style="width: 10px; margin: 0 20px 0 10px;"></div>

	57 <div data-expected-width="10" data-offset-x="70" class="firstRowThirdColumn alignSelfBaseline" style="width: 10px; margin: 0 20px 0 0;"></div>

	58 <div data-expected-width="100" data-offset-x="0" class="firstRowFourthColumn " style="width: 100px;"></div>

	59 </div>

	60

	61 <div class="grid">

	62 <div id="baseline1" class="firstRowFirstColumn alignSelfBaseline">ahem</div>

	63 <div id="baseline2" class="firstRowSecondColumn-one alignSelfBaseline"><img sr c="../../fast/replaced/resources/1x1-blue.png" style="width: 50px;"></div>

	64 <div data-expected-width="50" data-offset-x="25" class="firstRowThirdColumn al ignSelfCenter"><img src="../../fast/replaced/resources/1x1-blue.png" style="widt h: 50px; vertical-align: middle"></div>

	65 <div id="baseline3" data-expected-width="50" class="firstRowFourthColumn align SelfBaseline"><img src="../../fast/replaced/resources/1x1-blue.png" style="width : 50px; vertical-align: middle"></div>

	66 <div data-expected-width="100" data-offset-x="0" class="firstRowFifthColumn" s tyle="width: 100px;"></div>

	67 </div>

	68

	69 <div class="grid">

	70 <div id="baseline4" class="firstRowFirstColumn alignSelfBaseline">ahem</div>

	71 <div id="baseline5" class="firstRowSecondColumn alignSelfBaseline"><br><img sr c="../../fast/replaced/resources/1x1-blue.png" style="width: 50px;"></div>

	72 <div data-expected-width="50" data-offset-x="50" class="firstRowThirdColumn al ignSelfBaseline"><img src="../../fast/replaced/resources/1x1-blue.png" style="wi dth: 50px; vertical-align: middle"></div>

	73 <div data-expected-width="100" data-offset-x="0" class="firstRowFourthColumn" style="width: 100px;"></div>

	74 </div>

	75

	76 <div class="grid" style="-webkit-writing-mode: vertical-lr">

	77 <div id="baseline6" data-offset-x="18" class="firstRowFirstColumn alignSelfBas eline">ahem</div>

	78 <div id="baseline7" data-offset-x="18" class="firstRowSecondColumn alignSelfBa seline"><img src="../../fast/replaced/resources/1x1-blue.png" style="width: 50px ;"></div>

	79 <div data-expected-width="50" data-offset-x="25" class="firstRowThirdColumn al ignSelfCenter"><img src="../../fast/replaced/resources/1x1-blue.png" style="widt h: 50px; vertical-align: middle"></div>

	80 <div data-expected-width="50" data-offset-x="0" class="firstRowFourthColumn al ignSelfBaseline"><img src="../../fast/replaced/resources/1x1-blue.png" style="wi dth: 50px; vertical-align: middle"></div>

	81 <div data-expected-width="100" data-offset-x="0" class="firstRowFifthColumn" s tyle="width: 100px;"></div>

	82 </div>

	83

	84 <div class="grid" style="-webkit-writing-mode: vertical-lr">

	85 <div id="baseline8" class="firstRowFirstColumn alignSelfBaseline">ahem</div>

	86 <div id="baseline9" class="firstRowSecondColumn alignSelfBaseline"><br><img sr c="../../fast/replaced/resources/1x1-blue.png" style="width: 50px;"></div>

	87 <div data-expected-width="50" data-offset-x="0" class="firstRowThirdColumn ali gnSelfBaseline"><img src="../../fast/replaced/resources/1x1-blue.png" style="wid th: 50px; vertical-align: middle"></div>

	88 <div data-expected-width="100" data-offset-x="0" class="firstRowFourthColumn" style="width: 100px;"></div>

	89 </div>

	90

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

	92

	93 <script>

	94 function additionalBaselineChecks()

	95 {

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

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

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

	99 logIfFalse(baseline1.offsetLeft == baseline2.offsetLeft,

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

	101 logIfFalse(baseline3.offsetLeft + baseline3.offsetWidth > 75,

	102 "baseline3 should be above the center align-itemsed item.");

	103

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

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

	106 logIfFalse(baseline4.offsetLeft + baseline4.offsetWidth == baseline5.offsetL eft + baseline5.offsetWidth,

	107 "baseline4 and baseline5 should be right aligned with each other. ");

	108 logIfFalse(baseline4.offsetLeft + baseline4.offsetWidth < 100,

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

	110

	111 var baseline6 = document.getElementById("baseline6");

	112 var baseline7 = document.getElementById("baseline7");

	113 logIfFalse(baseline6.offsetLeft == baseline7.offsetLeft,

	114 "baseline6 and baseline7 should have the same baseline.");

	115

	116 var baseline8 = document.getElementById("baseline8");

	117 var baseline9 = document.getElementById("baseline9");

	118 logIfFalse(baseline8.offsetLeft == baseline9.offsetLeft,

	119 "baseline8 and baseline9 should be left aligned with each other." );

	120

	121 }

	122

	123 function logIfFalse(condition, msg)

	124 {

	125 if (!condition)

	126 document.getElementById("results").innerHTML += msg + "<br/>";

	127 }

	128

	129 additionalBaselineChecks();

	130 </script>

	131

	132 </body>

	133 </html>

OLD	NEW