<!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>[170895] trunk</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/170895">170895</a></dd>
<dt>Author</dt> <dd>bjonesbe@adobe.com</dd>
<dt>Date</dt> <dd>2014-07-08 15:10:43 -0700 (Tue, 08 Jul 2014)</dd>
</dl>
<h3>Log Message</h3>
<pre>Ensure we compute the height of replaced elements to 'auto' when appropriate.
https://bugs.webkit.org/show_bug.cgi?id=134700
Reviewed by David Hyatt.
Source/WebCore:
This fixes two issues:
1) If a replaced element has a percentage height specified then its
height should compute to 'auto' when its containing block does not
have a height 'specified explicitly'. We were taking this to mean when
its containing block's specified height value is 'auto' - in fact it
means when the containing block's computed height is auto.
2) Top and bottom on the containing block should only affect the
height of the block if that block has absolute or fixed position.
This brings us into line with IE, Firefox, and Chrome.
This is a port of Blink patches by Rob Hogan and David Vest.
Tests: css2.1/20110323/height-percentage-005.htm
fast/css/replaced-element-ignore-top-bottom.html
* rendering/RenderBoxModelObject.cpp:
(WebCore::RenderBoxModelObject::hasAutoHeightOrContainingBlockWithAutoHeight):
LayoutTests:
* css2.1/20110323/height-percentage-005-expected.html: Added.
* css2.1/20110323/height-percentage-005.htm: Added.
* css2.1/20110323/support/black96x96.png: Added.
* fast/css/replaced-element-ignore-top-bottom-expected.txt: Added.
* fast/css/replaced-element-ignore-top-bottom.html: Added.</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunkLayoutTestsChangeLog">trunk/LayoutTests/ChangeLog</a></li>
<li><a href="#trunkSourceWebCoreChangeLog">trunk/Source/WebCore/ChangeLog</a></li>
<li><a href="#trunkSourceWebCorerenderingRenderBoxModelObjectcpp">trunk/Source/WebCore/rendering/RenderBoxModelObject.cpp</a></li>
</ul>
<h3>Added Paths</h3>
<ul>
<li><a href="#trunkLayoutTestscss2120110323heightpercentage005expectedhtml">trunk/LayoutTests/css2.1/20110323/height-percentage-005-expected.html</a></li>
<li><a href="#trunkLayoutTestscss2120110323heightpercentage005htm">trunk/LayoutTests/css2.1/20110323/height-percentage-005.htm</a></li>
<li><a href="#trunkLayoutTestscss2120110323supportblack96x96png">trunk/LayoutTests/css2.1/20110323/support/black96x96.png</a></li>
<li><a href="#trunkLayoutTestsfastcssreplacedelementignoretopbottomexpectedtxt">trunk/LayoutTests/fast/css/replaced-element-ignore-top-bottom-expected.txt</a></li>
<li><a href="#trunkLayoutTestsfastcssreplacedelementignoretopbottomhtml">trunk/LayoutTests/fast/css/replaced-element-ignore-top-bottom.html</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkLayoutTestsChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/LayoutTests/ChangeLog (170894 => 170895)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/ChangeLog 2014-07-08 21:47:51 UTC (rev 170894)
+++ trunk/LayoutTests/ChangeLog 2014-07-08 22:10:43 UTC (rev 170895)
</span><span class="lines">@@ -1,3 +1,16 @@
</span><ins>+2014-07-08 Bem Jones-Bey <bjonesbe@adobe.com>
+
+ Ensure we compute the height of replaced elements to 'auto' when appropriate.
+ https://bugs.webkit.org/show_bug.cgi?id=134700
+
+ Reviewed by David Hyatt.
+
+ * css2.1/20110323/height-percentage-005-expected.html: Added.
+ * css2.1/20110323/height-percentage-005.htm: Added.
+ * css2.1/20110323/support/black96x96.png: Added.
+ * fast/css/replaced-element-ignore-top-bottom-expected.txt: Added.
+ * fast/css/replaced-element-ignore-top-bottom.html: Added.
+
</ins><span class="cx"> 2014-07-07 Zalan Bujtas <zalan@apple.com>
</span><span class="cx">
</span><span class="cx"> Subpixel rendering: icloud.com password arrow has clipped circle at some window sizes.
</span></span></pre></div>
<a id="trunkLayoutTestscss2120110323heightpercentage005expectedhtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/css2.1/20110323/height-percentage-005-expected.html (0 => 170895)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/css2.1/20110323/height-percentage-005-expected.html (rev 0)
+++ trunk/LayoutTests/css2.1/20110323/height-percentage-005-expected.html 2014-07-08 22:10:43 UTC (rev 170895)
</span><span class="lines">@@ -0,0 +1,11 @@
</span><ins>+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+ <body>
+ <p>Test passes if there is a filled black square.</p>
+
+ <div id="grandparent">
+ <img src="support/black96x96.png" alt="Image download support must be enabled">
+ </div>
+
+ </body>
+</html>
</ins></span></pre></div>
<a id="trunkLayoutTestscss2120110323heightpercentage005htm"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/css2.1/20110323/height-percentage-005.htm (0 => 170895)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/css2.1/20110323/height-percentage-005.htm (rev 0)
+++ trunk/LayoutTests/css2.1/20110323/height-percentage-005.htm 2014-07-08 22:10:43 UTC (rev 170895)
</span><span class="lines">@@ -0,0 +1,47 @@
</span><ins>+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
+<html>
+
+ <head>
+
+ <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+
+ <title>CSS Test: height percentage - inline replaced element inside an auto-height container</title>
+
+ <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
+
+ <!--
+ Original post:
+ Image % sizing interoperability
+ from Bogdan Brinza who deserves credit for reporting this
+ http://lists.w3.org/Archives/Public/www-style/2014Jun/0079.html
+ -->
+
+ <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#the-height-property" title="10.5 Content height: the 'height' property">
+ <link rel="bookmark" href="http://lists.w3.org/Archives/Public/www-style/2014Jun/0079.html" title="Image % sizing interoperability">
+ <link rel="match" href="reference/ref-filled-black-96px-square.htm">
+
+ <meta content="image" name="flags">
+ <meta content="This test checks that an height percentage is calculated with respect to the height of the generated box's containing block only if and only when such containing block's height is specified explicitly (i.e., it depends on content height; its specified height is not 'auto'). In this test, the div#parent has an 'auto' height; therefore the height percentage specified on div#child is treated as 'auto' and so the image should be rendered (entirely visible) inside that div#child. Note that div#grandparent's initial overflow value is 'visible'." name="assert">
+
+ <style type="text/css">
+ div#grandparent {height: 0px;}
+
+ div#child, img {height: 100%;}
+ </style>
+
+ </head>
+
+ <body>
+
+ <p>Test passes if there is a filled black square.</p>
+
+ <div id="grandparent">
+ <div id="parent">
+ <div id="child">
+ <img src="support/black96x96.png" alt="Image download support must be enabled">
+ </div>
+ </div>
+ </div>
+
+ </body>
+</html>
</ins></span></pre></div>
<a id="trunkLayoutTestscss2120110323supportblack96x96png"></a>
<div class="binary"><h4>Added: trunk/LayoutTests/css2.1/20110323/support/black96x96.png</h4>
<pre class="diff"><span>
<span class="cx">(Binary files differ)
</span></span></pre></div>
<span class="cx">Property changes on: trunk/LayoutTests/css2.1/20110323/support/black96x96.png
</span><span class="cx">___________________________________________________________________
</span><a id="svnmimetype"></a>
<div class="addfile"><h4>Added: svn:mime-type</h4></div>
<a id="trunkLayoutTestsfastcssreplacedelementignoretopbottomexpectedtxt"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/css/replaced-element-ignore-top-bottom-expected.txt (0 => 170895)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css/replaced-element-ignore-top-bottom-expected.txt (rev 0)
+++ trunk/LayoutTests/fast/css/replaced-element-ignore-top-bottom-expected.txt 2014-07-08 22:10:43 UTC (rev 170895)
</span><span class="lines">@@ -0,0 +1,4 @@
</span><ins>+
+
+PASS Inapplicable |top| and |bottom| specified style shouldn't affect height calculation
+
</ins></span></pre></div>
<a id="trunkLayoutTestsfastcssreplacedelementignoretopbottomhtml"></a>
<div class="addfile"><h4>Added: trunk/LayoutTests/fast/css/replaced-element-ignore-top-bottom.html (0 => 170895)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/LayoutTests/fast/css/replaced-element-ignore-top-bottom.html (rev 0)
+++ trunk/LayoutTests/fast/css/replaced-element-ignore-top-bottom.html 2014-07-08 22:10:43 UTC (rev 170895)
</span><span class="lines">@@ -0,0 +1,15 @@
</span><ins>+<!doctype html>
+<script src="../../resources/testharness.js"></script>
+<script src="../../resources/testharnessreport.js"></script>
+<div>
+ <div style="top: 0; bottom: 0">
+ <img style="height: 100%" src="data:image/gif;base64,R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQABAAACAkQBADs=">
+ </div>
+</div>
+<script>
+ async_test(function(t) {
+ window.onload = function() {
+ t.step(function () {assert_equals(document.querySelector("img").offsetHeight, 1); t.done();});
+ };
+ }, "Inapplicable |top| and |bottom| specified style shouldn't affect height calculation");
+</script>
</ins></span></pre></div>
<a id="trunkSourceWebCoreChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/ChangeLog (170894 => 170895)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/ChangeLog 2014-07-08 21:47:51 UTC (rev 170894)
+++ trunk/Source/WebCore/ChangeLog 2014-07-08 22:10:43 UTC (rev 170895)
</span><span class="lines">@@ -1,3 +1,31 @@
</span><ins>+2014-07-08 Bem Jones-Bey <bjonesbe@adobe.com>
+
+ Ensure we compute the height of replaced elements to 'auto' when appropriate.
+ https://bugs.webkit.org/show_bug.cgi?id=134700
+
+ Reviewed by David Hyatt.
+
+ This fixes two issues:
+
+ 1) If a replaced element has a percentage height specified then its
+ height should compute to 'auto' when its containing block does not
+ have a height 'specified explicitly'. We were taking this to mean when
+ its containing block's specified height value is 'auto' - in fact it
+ means when the containing block's computed height is auto.
+
+ 2) Top and bottom on the containing block should only affect the
+ height of the block if that block has absolute or fixed position.
+
+ This brings us into line with IE, Firefox, and Chrome.
+
+ This is a port of Blink patches by Rob Hogan and David Vest.
+
+ Tests: css2.1/20110323/height-percentage-005.htm
+ fast/css/replaced-element-ignore-top-bottom.html
+
+ * rendering/RenderBoxModelObject.cpp:
+ (WebCore::RenderBoxModelObject::hasAutoHeightOrContainingBlockWithAutoHeight):
+
</ins><span class="cx"> 2014-07-08 Alex Christensen <achristensen@webkit.org>
</span><span class="cx">
</span><span class="cx"> Added css jit profiler, disabled by default.
</span></span></pre></div>
<a id="trunkSourceWebCorerenderingRenderBoxModelObjectcpp"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/rendering/RenderBoxModelObject.cpp (170894 => 170895)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Source/WebCore/rendering/RenderBoxModelObject.cpp 2014-07-08 21:47:51 UTC (rev 170894)
+++ trunk/Source/WebCore/rendering/RenderBoxModelObject.cpp 2014-07-08 22:10:43 UTC (rev 170895)
</span><span class="lines">@@ -254,10 +254,11 @@
</span><span class="cx"> if (cb->isRenderView())
</span><span class="cx"> return false;
</span><span class="cx">
</span><del>- if (!cb->style().logicalHeight().isAuto() || (!cb->style().logicalTop().isAuto() && !cb->style().logicalBottom().isAuto()))
</del><ins>+ if (cb->isOutOfFlowPositioned() && !cb->style().logicalTop().isAuto() && !cb->style().logicalBottom().isAuto())
</ins><span class="cx"> return false;
</span><span class="cx">
</span><del>- return true;
</del><ins>+ // If the height of the containing block computes to 'auto', then it hasn't been 'specified explictly'.
+ return cb->hasAutoHeightOrContainingBlockWithAutoHeight();
</ins><span class="cx"> }
</span><span class="cx">
</span><span class="cx"> LayoutSize RenderBoxModelObject::relativePositionOffset() const
</span></span></pre>
</div>
</div>
</body>
</html>