Blitz - WPT: grid-percentage-rows-indefinite-height-001.html

wpt / css / css-grid / grid-definition / grid-percentage-rows-indefinite-height-001.html
Data from commit:
708eb61 WPT runner: support mismatch reftests and multiple rel=match links (#665) (2026-08-09)
Subtest	Status	Message
.grid 1	PASS
.grid 2	PASS
.grid 3	PASS
.grid 4	PASS
.grid 5	PASS
.grid 6	PASS
.grid 7	PASS
.grid 8	PASS
.grid 9	PASS
.grid 10	PASS
.grid 11	PASS
.grid 12	PASS
.grid 13	PASS
.grid 14	PASS
.grid 15	PASS
.grid 16	PASS
.grid 17	PASS
.grid 18	PASS
.grid 19	PASS
.grid 20	PASS
.grid 21	PASS
.grid 22	PASS
.grid 23	PASS
.grid 24	PASS
.grid 25	PASS
.grid 26	PASS
.grid 27	PASS
.grid 28	PASS
.grid 29	PASS
.grid 30	PASS
.grid 31	PASS
.grid 32	PASS
.grid 33	PASS
.grid 34	PASS
.grid 35	PASS
.grid 36	PASS
.grid 37	PASS
.grid 38	PASS
.grid 39	PASS
.grid 40	PASS
.grid 41	PASS
.grid 42	PASS
.grid 43	PASS
.grid 44	PASS
.grid 45	PASS
.grid 46	PASS
.grid 47	PASS
.grid 48	PASS
.grid 49	PASS
.grid 50	PASS
.grid 51	PASS
.grid 52	PASS
.grid 53	PASS
.grid 54	PASS
.grid 55	PASS
.grid 56	PASS
.grid 57	PASS
.grid 58	PASS
.grid 59	PASS
.grid 60	PASS
.grid 61	PASS
.grid 62	PASS
.grid 63	PASS
.grid 64	PASS
.grid 65	PASS
.grid 66	PASS
.grid 67	PASS
.grid 68	PASS
.grid 69	PASS
.grid 70	PASS
.grid 71	PASS
.grid 72	PASS
.grid 73	PASS
.grid 74	PASS
.grid 75	PASS
.grid 76	PASS
.grid 77	PASS
.grid 78	FAIL	assert_equals: data-expected-height expected 30 got 25
.grid 79	PASS
.grid 80	PASS
.grid 81	PASS
.grid 82	PASS
.grid 83	PASS
.grid 84	FAIL	assert_equals: data-expected-height expected 30 got 25
.grid 85	PASS
.grid 86	PASS
.grid 87	PASS
.grid 88	PASS
.grid 89	PASS
.grid 90	FAIL	assert_equals: data-expected-height expected 30 got 25
.grid 91	PASS
.grid 92	PASS
.grid 93	PASS
.grid 94	PASS
.grid 95	PASS
.grid 96	FAIL	assert_equals: data-expected-height expected 30 got 25
.grid 97	PASS
.grid 98	PASS
.grid 99	PASS
.grid 100	PASS
.grid 101	PASS
.grid 102	PASS
.grid 103	PASS
.grid 104	PASS
.grid 105	PASS
.grid 106	PASS
.grid 107	PASS
.grid 108	PASS
.grid 109	PASS
.grid 110	PASS
.grid 111	PASS
.grid 112	PASS
.grid 113	PASS
.grid 114	PASS
.grid 115	PASS
.grid 116	PASS
.grid 117	PASS
.grid 118	PASS
.grid 119	PASS
.grid 120	PASS
Enable JavaScript in test iframe
/css/css-grid/grid-definition/grid-percentage-rows-indefinite-height-001.html
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<title>CSS Grid Layout Test: Percentage rows indefinite height</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#track-sizing">
<meta name="assert" content="This test checks that percentage rows on grid containers with indefinite height are treated as 'auto' to compute the intrinsic height, but are later resolved against the intrinsic height during layout.">
<meta name="flags" content="ahem">
<link rel="stylesheet" href="/css/support/grid.css">
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
<style>
.grid {
  position: relative;
  font: 25px/1 Ahem;
  margin: 50px 0;
}

.border {
  border: 10px solid;
}

.padding {
  padding: 5px;
}
</style>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/check-layout-th.js"></script>
<script type="text/javascript">
  setup({ explicit_done: true });
</script>
<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">

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

<p>grid-template-rows: 60%;</p>

<div class="grid" style="grid-template-rows: 60%;" data-expected-height="0">
  <div class="firstRowFirstColumn" data-expected-height="0"></div>
</div>

<div class="grid" style="grid-template-rows: 60%;" data-expected-height="25">
  <div class="firstRowFirstColumn" data-expected-height="15">X</div>
</div>

<div class="grid" style="grid-template-rows: 60%;" data-expected-height="50">
  <div class="firstRowFirstColumn" data-expected-height="30">X<br>X</div>
</div>

<div class="grid border" style="grid-template-rows: 60%;" data-expected-height="20">
  <div class="firstRowFirstColumn" data-expected-height="0"></div>
</div>

<div class="grid border" style="grid-template-rows: 60%;" data-expected-height="45">
  <div class="firstRowFirstColumn" data-expected-height="15">X</div>
</div>

<div class="grid border" style="grid-template-rows: 60%;" data-expected-height="70">
  <div class="firstRowFirstColumn" data-expected-height="30">X<br>X</div>
</div>

<div class="grid padding" style="grid-template-rows: 60%;" data-expected-height="10">
  <div class="firstRowFirstColumn" data-expected-height="0"></div>
</div>

<div class="grid padding" style="grid-template-rows: 60%;" data-expected-height="35">
  <div class="firstRowFirstColumn" data-expected-height="15">X</div>
</div>

<div class="grid padding" style="grid-template-rows: 60%;" data-expected-height="60">
  <div class="firstRowFirstColumn" data-expected-height="30">X<br>X</div>
</div>

<div class="grid border padding" style="grid-template-rows: 60%;" data-expected-height="30">
  <div class="firstRowFirstColumn" data-expected-height="0"></div>
</div>

<div class="grid border padding" style="grid-template-rows: 60%;" data-expected-height="55">
  <div class="firstRowFirstColumn" data-expected-height="15">X</div>
</div>

<div class="grid border padding" style="grid-template-rows: 60%;" data-expected-height="80">
  <div class="firstRowFirstColumn" data-expected-height="30">X<br>X</div>
</div>

<p>grid-template-rows: 140%;</p>

<div class="grid" style="grid-template-rows: 140%;" data-expected-height="0">
  <div class="firstRowFirstColumn" data-expected-height="0"></div>
</div>

<div class="grid" style="grid-template-rows: 140%;" data-expected-height="25">
  <div class="firstRowFirstColumn" data-expected-height="35">X</div>
</div>

<div class="grid" style="grid-template-rows: 140%;" data-expected-height="50">
  <div class="firstRowFirstColumn" data-expected-height="70">X<br>X</div>
</div>

<div class="grid border" style="grid-template-rows: 140%;" data-expected-height="20">
  <div class="firstRowFirstColumn" data-expected-height="0"></div>
</div>

<div class="grid border" style="grid-template-rows: 140%;" data-expected-height="45">
  <div class="firstRowFirstColumn" data-expected-height="35">X</div>
</div>

<div class="grid border" style="grid-template-rows: 140%;" data-expected-height="70">
  <div class="firstRowFirstColumn" data-expected-height="70">X<br>X</div>
</div>

<div class="grid padding" style="grid-template-rows: 140%;" data-expected-height="10">
  <div class="firstRowFirstColumn" data-expected-height="0"></div>
</div>

<div class="grid padding" style="grid-template-rows: 140%;" data-expected-height="35">
  <div class="firstRowFirstColumn" data-expected-height="35">X</div>
</div>

<div class="grid padding" style="grid-template-rows: 140%;" data-expected-height="60">
  <div class="firstRowFirstColumn" data-expected-height="70">X<br>X</div>
</div>

<div class="grid border padding" style="grid-template-rows: 140%;" data-expected-height="30">
  <div class="firstRowFirstColumn" data-expected-height="0"></div>
</div>

<div class="grid border padding" style="grid-template-rows: 140%;" data-expected-height="55">
  <div class="firstRowFirstColumn" data-expected-height="35">X</div>
</div>

<div class="grid border padding" style="grid-template-rows: 140%;" data-expected-height="80">
  <div class="firstRowFirstColumn" data-expected-height="70">X<br>X</div>
</div>

<p>grid-template-rows: 100px 60%;</p>

<div class="grid" style="grid-template-rows: 100px 60%;" data-expected-height="100">
  <div class="secondRowFirstColumn" data-expected-height="60"></div>
</div>

<div class="grid" style="grid-template-rows: 100px 60%;" data-expected-height="125">
  <div class="secondRowFirstColumn" data-expected-height="75">X</div>
</div>

<div class="grid" style="grid-template-rows: 100px 60%;" data-expected-height="150">
  <div class="secondRowFirstColumn" data-expected-height="90">X<br>X</div>
</div>

<div class="grid" style="grid-template-rows: 100px 60%;" data-expected-height="100">
  <div class="firstRowFirstColumn" data-expected-height="100">X</div>
  <div class="secondRowFirstColumn" data-expected-height="60"></div>
</div>

<div class="grid" style="grid-template-rows: 100px 60%;" data-expected-height="125">
  <div class="firstRowFirstColumn" data-expected-height="100">X</div>
  <div class="secondRowFirstColumn" data-expected-height="75">X</div>
</div>

<div class="grid" style="grid-template-rows: 100px 60%;" data-expected-height="150">
  <div class="firstRowFirstColumn" data-expected-height="100">X</div>
  <div class="secondRowFirstColumn" data-expected-height="90">X<br>X</div>
</div>

<div class="grid border" style="grid-template-rows: 100px 60%;" data-expected-height="120">
  <div class="secondRowFirstColumn" data-expected-height="60"></div>
</div>

<div class="grid border" style="grid-template-rows: 100px 60%;" data-expected-height="145">
  <div class="secondRowFirstColumn" data-expected-height="75">X</div>
</div>

<div class="grid border" style="grid-template-rows: 100px 60%;" data-expected-height="170">
  <div class="secondRowFirstColumn" data-expected-height="90">X<br>X</div>
</div>

<div class="grid border" style="grid-template-rows: 100px 60%;" data-expected-height="120">
  <div class="firstRowFirstColumn" data-expected-height="100">X</div>
  <div class="secondRowFirstColumn" data-expected-height="60"></div>
</div>

<div class="grid border" style="grid-template-rows: 100px 60%;" data-expected-height="145">
  <div class="firstRowFirstColumn" data-expected-height="100">X</div>
  <div class="secondRowFirstColumn" data-expected-height="75">X</div>
</div>

<div class="grid border" style="grid-template-rows: 100px 60%;" data-expected-height="170">
  <div class="firstRowFirstColumn" data-expected-height="100">X</div>
  <div class="secondRowFirstColumn" data-expected-height="90">X<br>X</div>
</div>

<div class="grid padding" style="grid-template-rows: 100px 60%;" data-expected-height="110">
  <div class="secondRowFirstColumn" data-expected-height="60"></div>
</div>

<div class="grid padding" style="grid-template-rows: 100px 60%;" data-expected-height="135">
  <div class="secondRowFirstColumn" data-expected-height="75">X</div>
</div>

<div class="grid padding" style="grid-template-rows: 100px 60%;" data-expected-height="160">
  <div class="secondRowFirstColumn" data-expected-height="90">X<br>X</div>
</div>

<div class="grid padding" style="grid-template-rows: 100px 60%;" data-expected-height="110">
  <div class="firstRowFirstColumn" data-expected-height="100">X</div>
  <div class="secondRowFirstColumn" data-expected-height="60"></div>
</div>

<div class="grid padding" style="grid-template-rows: 100px 60%;" data-expected-height="135">
  <div class="firstRowFirstColumn" data-expected-height="100">X</div>
  <div class="secondRowFirstColumn" data-expected-height="75">X</div>
</div>

<div class="grid padding" style="grid-template-rows: 100px 60%;" data-expected-height="160">
  <div class="firstRowFirstColumn" data-expected-height="100">X</div>
  <div class="secondRowFirstColumn" data-expected-height="90">X<br>X</div>
</div>

<div class="grid border padding" style="grid-template-rows: 100px 60%;" data-expected-height="130">
  <div class="secondRowFirstColumn" data-expected-height="60"></div>
</div>

<div class="grid border padding" style="grid-template-rows: 100px 60%;" data-expected-height="155">
  <div class="secondRowFirstColumn" data-expected-height="75">X</div>
</div>

<div class="grid border padding" style="grid-template-rows: 100px 60%;" data-expected-height="180">
  <div class="secondRowFirstColumn" data-expected-height="90">X<br>X</div>
</div>

<div class="grid border padding" style="grid-template-rows: 100px 60%;" data-expected-height="130">
  <div class="firstRowFirstColumn" data-expected-height="100">X</div>
  <div class="secondRowFirstColumn" data-expected-height="60"></div>
</div>

<div class="grid border padding" style="grid-template-rows: 100px 60%;" data-expected-height="155">
  <div class="firstRowFirstColumn" data-expected-height="100">X</div>
  <div class="secondRowFirstColumn" data-expected-height="75">X</div>
</div>

<div class="grid border padding" style="grid-template-rows: 100px 60%;" data-expected-height="180">
  <div class="firstRowFirstColumn" data-expected-height="100">X</div>
  <div class="secondRowFirstColumn" data-expected-height="90">X<br>X</div>
</div>

<p>grid-template-rows: 100px 140%;</p>

<div class="grid" style="grid-template-rows: 100px 140%;" data-expected-height="100">
  <div class="secondRowFirstColumn" data-expected-height="140"></div>
</div>

<div class="grid" style="grid-template-rows: 100px 140%;" data-expected-height="125">
  <div class="secondRowFirstColumn" data-expected-height="175">X</div>
</div>

<div class="grid" style="grid-template-rows: 100px 140%;" data-expected-height="150">
  <div class="secondRowFirstColumn" data-expected-height="210">X<br>X</div>
</div>

<div class="grid" style="grid-template-rows: 100px 140%;" data-expected-height="100">
  <div class="firstRowFirstColumn" data-expected-height="100">X</div>
  <div class="secondRowFirstColumn" data-expected-height="140"></div>
</div>

<div class="grid" style="grid-template-rows: 100px 140%;" data-expected-height="125">
  <div class="firstRowFirstColumn" data-expected-height="100">X</div>
  <div class="secondRowFirstColumn" data-expected-height="175">X</div>
</div>

<div class="grid" style="grid-template-rows: 100px 140%;" data-expected-height="150">
  <div class="firstRowFirstColumn" data-expected-height="100">X</div>
  <div class="secondRowFirstColumn" data-expected-height="210">X<br>X</div>
</div>

<div class="grid border" style="grid-template-rows: 100px 140%;" data-expected-height="120">
  <div class="secondRowFirstColumn" data-expected-height="140"></div>
</div>

<div class="grid border" style="grid-template-rows: 100px 140%;" data-expected-height="145">
  <div class="secondRowFirstColumn" data-expected-height="175">X</div>
</div>

<div class="grid border" style="grid-template-rows: 100px 140%;" data-expected-height="170">
  <div class="secondRowFirstColumn" data-expected-height="210">X<br>X</div>
</div>

<div class="grid border" style="grid-template-rows: 100px 140%;" data-expected-height="120">
  <div class="firstRowFirstColumn" data-expected-height="100">X</div>
  <div class="secondRowFirstColumn" data-expected-height="140"></div>
</div>

<div class="grid border" style="grid-template-rows: 100px 140%;" data-expected-height="145">
  <div class="firstRowFirstColumn" data-expected-height="100">X</div>
  <div class="secondRowFirstColumn" data-expected-height="175">X</div>
</div>

<div class="grid border" style="grid-template-rows: 100px 140%;" data-expected-height="170">
  <div class="firstRowFirstColumn" data-expected-height="100">X</div>
  <div class="secondRowFirstColumn" data-expected-height="210">X<br>X</div>
</div>

<div class="grid padding" style="grid-template-rows: 100px 140%;" data-expected-height="110">
  <div class="secondRowFirstColumn" data-expected-height="140"></div>
</div>

<div class="grid padding" style="grid-template-rows: 100px 140%;" data-expected-height="135">
  <div class="secondRowFirstColumn" data-expected-height="175">X</div>
</div>

<div class="grid padding" style="grid-template-rows: 100px 140%;" data-expected-height="160">
  <div class="secondRowFirstColumn" data-expected-height="210">X<br>X</div>
</div>

<div class="grid padding" style="grid-template-rows: 100px 140%;" data-expected-height="110">
  <div class="firstRowFirstColumn" data-expected-height="100">X</div>
  <div class="secondRowFirstColumn" data-expected-height="140"></div>
</div>

<div class="grid padding" style="grid-template-rows: 100px 140%;" data-expected-height="135">
  <div class="firstRowFirstColumn" data-expected-height="100">X</div>
  <div class="secondRowFirstColumn" data-expected-height="175">X</div>
</div>

<div class="grid padding" style="grid-template-rows: 100px 140%;" data-expected-height="160">
  <div class="firstRowFirstColumn" data-expected-height="100">X</div>
  <div class="secondRowFirstColumn" data-expected-height="210">X<br>X</div>
</div>

<div class="grid border padding" style="grid-template-rows: 100px 140%;" data-expected-height="130">
  <div class="secondRowFirstColumn" data-expected-height="140"></div>
</div>

<div class="grid border padding" style="grid-template-rows: 100px 140%;" data-expected-height="155">
  <div class="secondRowFirstColumn" data-expected-height="175">X</div>
</div>

<div class="grid border padding" style="grid-template-rows: 100px 140%;" data-expected-height="180">
  <div class="secondRowFirstColumn" data-expected-height="210">X<br>X</div>
</div>

<div class="grid border padding" style="grid-template-rows: 100px 140%;" data-expected-height="130">
  <div class="firstRowFirstColumn" data-expected-height="100">X</div>
  <div class="secondRowFirstColumn" data-expected-height="140"></div>
</div>

<div class="grid border padding" style="grid-template-rows: 100px 140%;" data-expected-height="155">
  <div class="firstRowFirstColumn" data-expected-height="100">X</div>
  <div class="secondRowFirstColumn" data-expected-height="175">X</div>
</div>

<div class="grid border padding" style="grid-template-rows: 100px 140%;" data-expected-height="180">
  <div class="firstRowFirstColumn" data-expected-height="100">X</div>
  <div class="secondRowFirstColumn" data-expected-height="210">X<br>X</div>
</div>

<p>grid-template-rows: auto 60%;</p>

<div class="grid" style="grid-template-rows: auto 60%;" data-expected-height="0">
  <div class="secondRowFirstColumn" data-expected-height="0"></div>
</div>

<div class="grid" style="grid-template-rows: auto 60%;" data-expected-height="25">
  <div class="secondRowFirstColumn" data-expected-height="15">X</div>
</div>

<div class="grid" style="grid-template-rows: auto 60%;" data-expected-height="50">
  <div class="secondRowFirstColumn" data-expected-height="30">X<br>X</div>
</div>

<div class="grid" style="grid-template-rows: auto 60%;" data-expected-height="25">
  <div class="firstRowFirstColumn" data-expected-height="25">X</div>
  <div class="secondRowFirstColumn" data-expected-height="15"></div>
</div>

<div class="grid" style="grid-template-rows: auto 60%;" data-expected-height="50">
  <div class="firstRowFirstColumn" data-expected-height="25">X</div>
  <div class="secondRowFirstColumn" data-expected-height="30">X</div>
</div>

<div class="grid" style="grid-template-rows: auto 60%;" data-expected-height="75">
  <div class="firstRowFirstColumn" data-expected-height="30">X</div>
  <div class="secondRowFirstColumn" data-expected-height="45">X<br>X</div>
</div>

<div class="grid border" style="grid-template-rows: auto 60%;" data-expected-height="20">
  <div class="secondRowFirstColumn" data-expected-height="0"></div>
</div>

<div class="grid border" style="grid-template-rows: auto 60%;" data-expected-height="45">
  <div class="secondRowFirstColumn" data-expected-height="15">X</div>
</div>

<div class="grid border" style="grid-template-rows: auto 60%;" data-expected-height="70">
  <div class="secondRowFirstColumn" data-expected-height="30">X<br>X</div>
</div>

<div class="grid border" style="grid-template-rows: auto 60%;" data-expected-height="45">
  <div class="firstRowFirstColumn" data-expected-height="25">X</div>
  <div class="secondRowFirstColumn" data-expected-height="15"></div>
</div>

<div class="grid border" style="grid-template-rows: auto 60%;" data-expected-height="70">
  <div class="firstRowFirstColumn" data-expected-height="25">X</div>
  <div class="secondRowFirstColumn" data-expected-height="30">X</div>
</div>

<div class="grid border" style="grid-template-rows: auto 60%;" data-expected-height="95">
  <div class="firstRowFirstColumn" data-expected-height="30">X</div>
  <div class="secondRowFirstColumn" data-expected-height="45">X<br>X</div>
</div>

<div class="grid padding" style="grid-template-rows: auto 60%;" data-expected-height="10">
  <div class="secondRowFirstColumn" data-expected-height="0"></div>
</div>

<div class="grid padding" style="grid-template-rows: auto 60%;" data-expected-height="35">
  <div class="secondRowFirstColumn" data-expected-height="15">X</div>
</div>

<div class="grid padding" style="grid-template-rows: auto 60%;" data-expected-height="60">
  <div class="secondRowFirstColumn" data-expected-height="30">X<br>X</div>
</div>

<div class="grid padding" style="grid-template-rows: auto 60%;" data-expected-height="35">
  <div class="firstRowFirstColumn" data-expected-height="25">X</div>
  <div class="secondRowFirstColumn" data-expected-height="15"></div>
</div>

<div class="grid padding" style="grid-template-rows: auto 60%;" data-expected-height="60">
  <div class="firstRowFirstColumn" data-expected-height="25">X</div>
  <div class="secondRowFirstColumn" data-expected-height="30">X</div>
</div>

<div class="grid padding" style="grid-template-rows: auto 60%;" data-expected-height="85">
  <div class="firstRowFirstColumn" data-expected-height="30">X</div>
  <div class="secondRowFirstColumn" data-expected-height="45">X<br>X</div>
</div>

<div class="grid border padding" style="grid-template-rows: auto 60%;" data-expected-height="30">
  <div class="secondRowFirstColumn" data-expected-height="0"></div>
</div>

<div class="grid border padding" style="grid-template-rows: auto 60%;" data-expected-height="55">
  <div class="secondRowFirstColumn" data-expected-height="15">X</div>
</div>

<div class="grid border padding" style="grid-template-rows: auto 60%;" data-expected-height="80">
  <div class="secondRowFirstColumn" data-expected-height="30">X<br>X</div>
</div>

<div class="grid border padding" style="grid-template-rows: auto 60%;" data-expected-height="55">
  <div class="firstRowFirstColumn" data-expected-height="25">X</div>
  <div class="secondRowFirstColumn" data-expected-height="15"></div>
</div>

<div class="grid border padding" style="grid-template-rows: auto 60%;" data-expected-height="80">
  <div class="firstRowFirstColumn" data-expected-height="25">X</div>
  <div class="secondRowFirstColumn" data-expected-height="30">X</div>
</div>

<div class="grid border padding" style="grid-template-rows: auto 60%;" data-expected-height="105">
  <div class="firstRowFirstColumn" data-expected-height="30">X</div>
  <div class="secondRowFirstColumn" data-expected-height="45">X<br>X</div>
</div>

<p>grid-template-rows: auto 140%;</p>

<div class="grid" style="grid-template-rows: auto 140%;" data-expected-height="0">
  <div class="secondRowFirstColumn" data-expected-height="0"></div>
</div>

<div class="grid" style="grid-template-rows: auto 140%;" data-expected-height="25">
  <div class="secondRowFirstColumn" data-expected-height="35">X</div>
</div>

<div class="grid" style="grid-template-rows: auto 140%;" data-expected-height="50">
  <div class="secondRowFirstColumn" data-expected-height="70">X<br>X</div>
</div>

<div class="grid" style="grid-template-rows: auto 140%;" data-expected-height="25">
  <div class="firstRowFirstColumn" data-expected-height="25">X</div>
  <div class="secondRowFirstColumn" data-expected-height="35"></div>
</div>

<div class="grid" style="grid-template-rows: auto 140%;" data-expected-height="50">
  <div class="firstRowFirstColumn" data-expected-height="25">X</div>
  <div class="secondRowFirstColumn" data-expected-height="70">X</div>
</div>

<div class="grid" style="grid-template-rows: auto 140%;" data-expected-height="75">
  <div class="firstRowFirstColumn" data-expected-height="25">X</div>
  <div class="secondRowFirstColumn" data-expected-height="105">X<br>X</div>
</div>

<div class="grid border" style="grid-template-rows: auto 140%;" data-expected-height="20">
  <div class="secondRowFirstColumn" data-expected-height="0"></div>
</div>

<div class="grid border" style="grid-template-rows: auto 140%;" data-expected-height="45">
  <div class="secondRowFirstColumn" data-expected-height="35">X</div>
</div>

<div class="grid border" style="grid-template-rows: auto 140%;" data-expected-height="70">
  <div class="secondRowFirstColumn" data-expected-height="70">X<br>X</div>
</div>

<div class="grid border" style="grid-template-rows: auto 140%;" data-expected-height="45">
  <div class="firstRowFirstColumn" data-expected-height="25">X</div>
  <div class="secondRowFirstColumn" data-expected-height="35"></div>
</div>

<div class="grid border" style="grid-template-rows: auto 140%;" data-expected-height="70">
  <div class="firstRowFirstColumn" data-expected-height="25">X</div>
  <div class="secondRowFirstColumn" data-expected-height="70">X</div>
</div>

<div class="grid border" style="grid-template-rows: auto 140%;" data-expected-height="95">
  <div class="firstRowFirstColumn" data-expected-height="25">X</div>
  <div class="secondRowFirstColumn" data-expected-height="105">X<br>X</div>
</div>

<div class="grid padding" style="grid-template-rows: auto 140%;" data-expected-height="10">
  <div class="secondRowFirstColumn" data-expected-height="0"></div>
</div>

<div class="grid padding" style="grid-template-rows: auto 140%;" data-expected-height="35">
  <div class="secondRowFirstColumn" data-expected-height="35">X</div>
</div>

<div class="grid padding" style="grid-template-rows: auto 140%;" data-expected-height="60">
  <div class="secondRowFirstColumn" data-expected-height="70">X<br>X</div>
</div>

<div class="grid padding" style="grid-template-rows: auto 140%;" data-expected-height="35">
  <div class="firstRowFirstColumn" data-expected-height="25">X</div>
  <div class="secondRowFirstColumn" data-expected-height="35"></div>
</div>

<div class="grid padding" style="grid-template-rows: auto 140%;" data-expected-height="60">
  <div class="firstRowFirstColumn" data-expected-height="25">X</div>
  <div class="secondRowFirstColumn" data-expected-height="70">X</div>
</div>

<div class="grid padding" style="grid-template-rows: auto 140%;" data-expected-height="85">
  <div class="firstRowFirstColumn" data-expected-height="25">X</div>
  <div class="secondRowFirstColumn" data-expected-height="105">X<br>X</div>
</div>

<div class="grid border padding" style="grid-template-rows: auto 140%;" data-expected-height="30">
  <div class="secondRowFirstColumn" data-expected-height="0"></div>
</div>

<div class="grid border padding" style="grid-template-rows: auto 140%;" data-expected-height="55">
  <div class="secondRowFirstColumn" data-expected-height="35">X</div>
</div>

<div class="grid border padding" style="grid-template-rows: auto 140%;" data-expected-height="80">
  <div class="secondRowFirstColumn" data-expected-height="70">X<br>X</div>
</div>

<div class="grid border padding" style="grid-template-rows: auto 140%;" data-expected-height="55">
  <div class="firstRowFirstColumn" data-expected-height="25">X</div>
  <div class="secondRowFirstColumn" data-expected-height="35"></div>
</div>

<div class="grid border padding" style="grid-template-rows: auto 140%;" data-expected-height="80">
  <div class="firstRowFirstColumn" data-expected-height="25">X</div>
  <div class="secondRowFirstColumn" data-expected-height="70">X</div>
</div>

<div class="grid border padding" style="grid-template-rows: auto 140%;" data-expected-height="105">
  <div class="firstRowFirstColumn" data-expected-height="25">X</div>
  <div class="secondRowFirstColumn" data-expected-height="105">X<br>X</div>
</div>

</body>