<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>[215264] trunk/LayoutTests</title>
</head>
<body>
<style type="text/css"><!--
#msg dl.meta { border: 1px #006 solid; background: #369; padding: 6px; color: #fff; }
#msg dl.meta dt { float: left; width: 6em; font-weight: bold; }
#msg dt:after { content:':';}
#msg dl, #msg dt, #msg ul, #msg li, #header, #footer, #logmsg { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; }
#msg dl a { font-weight: bold}
#msg dl a:link { color:#fc3; }
#msg dl a:active { color:#ff0; }
#msg dl a:visited { color:#cc6; }
h3 { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; font-weight: bold; }
#msg pre { overflow: auto; background: #ffc; border: 1px #fa0 solid; padding: 6px; }
#logmsg { background: #ffc; border: 1px #fa0 solid; padding: 1em 1em 0 1em; }
#logmsg p, #logmsg pre, #logmsg blockquote { margin: 0 0 1em 0; }
#logmsg p, #logmsg li, #logmsg dt, #logmsg dd { line-height: 14pt; }
#logmsg h1, #logmsg h2, #logmsg h3, #logmsg h4, #logmsg h5, #logmsg h6 { margin: .5em 0; }
#logmsg h1:first-child, #logmsg h2:first-child, #logmsg h3:first-child, #logmsg h4:first-child, #logmsg h5:first-child, #logmsg h6:first-child { margin-top: 0; }
#logmsg ul, #logmsg ol { padding: 0; list-style-position: inside; margin: 0 0 0 1em; }
#logmsg ul { text-indent: -1em; padding-left: 1em; }#logmsg ol { text-indent: -1.5em; padding-left: 1.5em; }
#logmsg > ul, #logmsg > ol { margin: 0 0 1em 0; }
#logmsg pre { background: #eee; padding: 1em; }
#logmsg blockquote { border: 1px solid #fa0; border-left-width: 10px; padding: 1em 1em 0 1em; background: white;}
#logmsg dl { margin: 0; }
#logmsg dt { font-weight: bold; }
#logmsg dd { margin: 0; padding: 0 0 0.5em 0; }
#logmsg dd:before { content:'\00bb';}
#logmsg table { border-spacing: 0px; border-collapse: collapse; border-top: 4px solid #fa0; border-bottom: 1px solid #fa0; background: #fff; }
#logmsg table th { text-align: left; font-weight: normal; padding: 0.2em 0.5em; border-top: 1px dotted #fa0; }
#logmsg table td { text-align: right; border-top: 1px dotted #fa0; padding: 0.2em 0.5em; }
#logmsg table thead th { text-align: center; border-bottom: 1px solid #fa0; }
#logmsg table th.Corner { text-align: left; }
#logmsg hr { border: none 0; border-top: 2px dashed #fa0; height: 1px; }
#header, #footer { color: #fff; background: #636; border: 1px #300 solid; padding: 6px; }
#patch { width: 100%; }
#patch h4 {font-family: verdana,arial,helvetica,sans-serif;font-size:10pt;padding:8px;background:#369;color:#fff;margin:0;}
#patch .propset h4, #patch .binary h4 {margin:0;}
#patch pre {padding:0;line-height:1.2em;margin:0;}
#patch .diff {width:100%;background:#eee;padding: 0 0 10px 0;overflow:auto;}
#patch .propset .diff, #patch .binary .diff {padding:10px 0;}
#patch span {display:block;padding:0 10px;}
#patch .modfile, #patch .addfile, #patch .delfile, #patch .propset, #patch .binary, #patch .copfile {border:1px solid #ccc;margin:10px 0;}
#patch ins {background:#dfd;text-decoration:none;display:block;padding:0 10px;}
#patch del {background:#fdd;text-decoration:none;display:block;padding:0 10px;}
#patch .lines, .info {color:#888;background:#fff;}
--></style>
<div id="msg">
<dl class="meta">
<dt>Revision</dt> <dd><a href="http://trac.webkit.org/projects/webkit/changeset/215264">215264</a></dd>
<dt>Author</dt> <dd>rego@igalia.com</dd>
<dt>Date</dt> <dd>2017-04-12 03:14:30 -0700 (Wed, 12 Apr 2017)</dd>
</dl>
<h3>Log Message</h3>
<pre>[css-grid] Replaced elements don't properly resolve percentage heights
https://bugs.webkit.org/show_bug.cgi?id=159670
Reviewed by Darin Adler.
The issue was fixed in <a href="http://trac.webkit.org/projects/webkit/changeset/213149">r213149</a> (bug #168657), but the Blink test was not imported.
This patch only adds the test to avoid regressions in the future.
* fast/css-grid-layout/grid-item-with-percent-height-replaced-element-expected.txt: Added.
* fast/css-grid-layout/grid-item-with-percent-height-replaced-element.html: Added.</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunkLayoutTestsChangeLog">trunk/LayoutTests/ChangeLog</a></li>
</ul>
<h3>Added Paths</h3>
<ul>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgriditemwithpercentheightreplacedelementexpectedtxt">trunk/LayoutTests/fast/css-grid-layout/grid-item-with-percent-height-replaced-element-expected.txt</a></li>
<li><a href="#trunkLayoutTestsfastcssgridlayoutgriditemwithpercentheightreplacedelementhtml">trunk/LayoutTests/fast/css-grid-layout/grid-item-with-percent-height-replaced-element.html</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkLayoutTestsChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/ChangeLog (215263 => 215264)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/ChangeLog 2017-04-12 10:09:14 UTC (rev 215263)
+++ trunk/LayoutTests/ChangeLog 2017-04-12 10:14:30 UTC (rev 215264)
</span><span class="lines">@@ -1,3 +1,16 @@
</span><ins>+2017-04-12 Manuel Rego Casasnovas <rego@igalia.com>
+
+ [css-grid] Replaced elements don't properly resolve percentage heights
+ https://bugs.webkit.org/show_bug.cgi?id=159670
+
+ Reviewed by Darin Adler.
+
+ The issue was fixed in r213149 (bug #168657), but the Blink test was not imported.
+ This patch only adds the test to avoid regressions in the future.
+
+ * fast/css-grid-layout/grid-item-with-percent-height-replaced-element-expected.txt: Added.
+ * fast/css-grid-layout/grid-item-with-percent-height-replaced-element.html: Added.
+
</ins><span class="cx"> 2017-04-10 Antti Koivisto <antti@apple.com>
</span><span class="cx">
</span><span class="cx"> Cache small media resources in disk cache
</span></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgriditemwithpercentheightreplacedelementexpectedtxt"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/css-grid-layout/grid-item-with-percent-height-replaced-element-expected.txt (0 => 215264)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-item-with-percent-height-replaced-element-expected.txt (rev 0)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-item-with-percent-height-replaced-element-expected.txt 2017-04-12 10:14:30 UTC (rev 215264)
</span><span class="lines">@@ -0,0 +1,23 @@
</span><ins>+
+PASS .grid 1
+PASS .grid 2
+PASS .grid 3
+PASS .grid 4
+PASS .grid 5
+This test checks that percentage heights are properly resolved for grid items that are replaced elements. You shouldn't see any red if the test is working as expected.
+
+1) 100% height on the image (grid item) should be resolved against the height of the grid area (200px). Actually we don't need the 100% height in this case as the grid items are stretched by default.
+
+
+2) 100% height on the image (grid item's child) should be resolved against the height of the grid item, which is stretched by default to the height of the grid area (200px).
+
+
+3) 100% height on the image (grid item) should be resolved against the height of the grid area (200px). The grid item is not stretched in this case but the height percentage can be resolved anyway.
+
+
+4) 100% height on the image (grid item's child) should be resolved against the height of the grid item, as it's not stretched the grid item's height is indefinite, so the percentage cannot be resolved.
+
+
+5) 100% height on the image (grid item's child) should be resolved against the height of the grid item, which also has a 100% height that is resolved against the height of the grid area (200px).
+
+
</ins></span></pre></div>
<a id="trunkLayoutTestsfastcssgridlayoutgriditemwithpercentheightreplacedelementhtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/css-grid-layout/grid-item-with-percent-height-replaced-element.html (0 => 215264)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css-grid-layout/grid-item-with-percent-height-replaced-element.html (rev 0)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-item-with-percent-height-replaced-element.html 2017-04-12 10:14:30 UTC (rev 215264)
</span><span class="lines">@@ -0,0 +1,87 @@
</span><ins>+<!DOCTYPE html>
+
+<link href="resources/grid.css" rel="stylesheet">
+<link href="resources/grid-alignment.css" rel="stylesheet">
+<link href="../css-intrinsic-dimensions/resources/width-keyword-classes.css" rel="stylesheet">
+
+<style>
+ .grid {
+ grid: 200px / 200px;
+ width: 200px;
+ }
+
+ .red {
+ background-color: red;
+ }
+
+ img {
+ height: 100%;
+ display: block;
+ }
+
+ .height100 {
+ height: 100%;
+ }
+</style>
+
+<script src="../../resources/testharness.js"></script>
+<script src="../../resources/testharnessreport.js"></script>
+<script src="../../resources/check-layout-th.js"></script>
+
+<body onload="checkLayout('.grid')">
+<div id="log"></div>
+
+<p>This test checks that percentage heights are properly resolved for grid items that are replaced elements.
+You shouldn't see any red if the test is working as expected.</p>
+
+<p>1) 100% height on the image (grid item) should be resolved against the height of the grid area (200px).
+Actually we don't need the 100% height in this case as the grid items are stretched by default.</p>
+
+<div class="grid red">
+ <img src="../css/resources/greenbox-100px.png"
+ data-expected-width="200" data-expected-height="200">
+</div>
+
+<p>2) 100% height on the image (grid item's child) should be resolved against the height of the grid item,
+which is stretched by default to the height of the grid area (200px).</p>
+
+
+<div class="grid red">
+ <div data-expected-width="200" data-expected-height="200">
+ <img src="../css/resources/greenbox-100px.png"
+ data-expected-width="200" data-expected-height="200">
+ </div>
+</div>
+
+<p>3) 100% height on the image (grid item) should be resolved against the height of the grid area (200px).
+The grid item is not stretched in this case but the height percentage can be resolved anyway.</p>
+
+<div class="grid red alignItemsStart">
+ <img src="../css/resources/greenbox-100px.png"
+ data-expected-width="200" data-expected-height="200">
+</div>
+
+<p>4) 100% height on the image (grid item's child) should be resolved against the height of the grid item,
+as it's not stretched the grid item's height is indefinite, so the percentage cannot be resolved.</p>
+
+<div class="grid alignItemsStart justifyItemsStart">
+ <div class="firstRowFirstColumn red" style="width: 100px; height: 100px;"
+ data-expected-width="100" data-expected-height="100">
+ </div>
+ <div class="firstRowFirstColumn">
+ <img src="../css/resources/greenbox-100px.png"
+ data-expected-width="100" data-expected-height="100">
+ </div>
+</div>
+
+<p>5) 100% height on the image (grid item's child) should be resolved against the height of the grid item,
+which also has a 100% height that is resolved against the height of the grid area (200px).</p>
+
+<div class="grid red">
+ <div class="height100" data-expected-width="200" data-expected-height="200">
+ <img src="../css/resources/greenbox-100px.png"
+ data-expected-width="200" data-expected-height="200">
+ </div>
+</div>
+
+</body>
</ins></span></pre>
</div>
</div>
</body>
</html>