Title: [225101] trunk
Revision
225101
Author
r...@igalia.com
Date
2017-11-22 12:37:35 -0800 (Wed, 22 Nov 2017)

Log Message

Available height is wrong for positioned elements with "box-sizing: border-box"
https://bugs.webkit.org/show_bug.cgi?id=178783

Reviewed by Darin Adler.

Source/WebCore:

These methods were returning a wrong value for positioned items
in combination with "box-sizing: border-box".
The problem was that if the height of the element is given
by its offset properties (top and bottom) we don't need to call
adjustContentBoxLogicalHeightForBoxSizing().

Tests: fast/box-sizing/fill-available.html
       fast/box-sizing/replaced.html

* rendering/RenderBox.cpp:
(WebCore::RenderBox::computeReplacedLogicalHeightUsing const):
(WebCore::RenderBox::availableLogicalHeightUsing const):

LayoutTests:

There are some cases failing in fast/box-sizing/fill-available.html,
this is because of a different bug (see https://webkit.org/b/178790)
as noted down in the text comments.

* fast/box-sizing/fill-available-expected.txt: Added.
* fast/box-sizing/fill-available.html: Added.
* fast/box-sizing/replaced-expected.txt: Added.
* fast/box-sizing/replaced.html: Added.

Modified Paths

Added Paths

Diff

Modified: trunk/LayoutTests/ChangeLog (225100 => 225101)


--- trunk/LayoutTests/ChangeLog	2017-11-22 19:44:57 UTC (rev 225100)
+++ trunk/LayoutTests/ChangeLog	2017-11-22 20:37:35 UTC (rev 225101)
@@ -1,3 +1,19 @@
+2017-11-22  Manuel Rego Casasnovas  <r...@igalia.com>
+
+        Available height is wrong for positioned elements with "box-sizing: border-box"
+        https://bugs.webkit.org/show_bug.cgi?id=178783
+
+        Reviewed by Darin Adler.
+
+        There are some cases failing in fast/box-sizing/fill-available.html,
+        this is because of a different bug (see https://webkit.org/b/178790)
+        as noted down in the text comments.
+
+        * fast/box-sizing/fill-available-expected.txt: Added.
+        * fast/box-sizing/fill-available.html: Added.
+        * fast/box-sizing/replaced-expected.txt: Added.
+        * fast/box-sizing/replaced.html: Added.
+
 2017-11-22  Ms2ger  <ms2...@igalia.com>
 
         [WPE] Enable request-animation-frame-disabled.html.

Added: trunk/LayoutTests/fast/box-sizing/fill-available-expected.txt (0 => 225101)


--- trunk/LayoutTests/fast/box-sizing/fill-available-expected.txt	                        (rev 0)
+++ trunk/LayoutTests/fast/box-sizing/fill-available-expected.txt	2017-11-22 20:37:35 UTC (rev 225101)
@@ -0,0 +1,18 @@
+
+FAIL .wrapper 1 assert_equals: 
+<div class="wrapper" data-expected-width="200" data-expected-height="200">
+  <div class="positioned border-box" data-expected-width="200" data-expected-height="200">
+    <div class="fill-available border-box" data-expected-width="180" data-expected-height="180"></div>
+  </div>
+</div>
+height expected 180 but got 140
+PASS .wrapper 2 
+FAIL .wrapper 3 assert_equals: 
+<div class="wrapper" data-expected-width="200" data-expected-height="200">
+  <div class="positioned" data-expected-width="200" data-expected-height="200">
+    <div class="fill-available border-box" data-expected-width="180" data-expected-height="180"></div>
+  </div>
+</div>
+height expected 180 but got 140
+PASS .wrapper 4 
+

Added: trunk/LayoutTests/fast/box-sizing/fill-available.html (0 => 225101)


--- trunk/LayoutTests/fast/box-sizing/fill-available.html	                        (rev 0)
+++ trunk/LayoutTests/fast/box-sizing/fill-available.html	2017-11-22 20:37:35 UTC (rev 225101)
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<meta name="assert" content="This checks that 'box-sizing: border-box' doesn't have any effect on a positioned element when the height is set by the offset properties.">
+<style>
+.wrapper {
+  position: relative;
+  width: 200px;
+  height: 200px;
+}
+
+.positioned {
+  border: 10px solid magenta;
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+}
+
+.fill-available {
+  border: 20px dotted cyan;
+  background: yellow;
+  width: -webkit-fill-available;
+  height: -webkit-fill-available;
+}
+
+.border-box {
+  box-sizing: border-box;
+}
+</style>
+
+<script src=""
+<script src=""
+<script src=""
+
+<body _onload_="checkLayout('.wrapper')">
+
+<div id="log"></div>
+
+<div class="wrapper" data-expected-width="200" data-expected-height="200">
+  <div class="positioned" data-expected-width="200" data-expected-height="200">
+    <div class="fill-available" data-expected-width="180" data-expected-height="180"></div>
+  </div>
+</div>
+
+<!-- This is failing due to bug https://webkit.org/b/178790. -->
+<div class="wrapper" data-expected-width="200" data-expected-height="200">
+  <div class="positioned" data-expected-width="200" data-expected-height="200">
+    <div class="fill-available border-box" data-expected-width="180" data-expected-height="180"></div>
+  </div>
+</div>
+
+<div class="wrapper" data-expected-width="200" data-expected-height="200">
+  <div class="positioned border-box" data-expected-width="200" data-expected-height="200">
+    <div class="fill-available" data-expected-width="180" data-expected-height="180"></div>
+  </div>
+</div>
+
+<!-- This is failing due to bug https://webkit.org/b/178790. -->
+<div class="wrapper" data-expected-width="200" data-expected-height="200">
+  <div class="positioned border-box" data-expected-width="200" data-expected-height="200">
+    <div class="fill-available border-box" data-expected-width="180" data-expected-height="180"></div>
+  </div>
+</div>
+
+</body>

Added: trunk/LayoutTests/fast/box-sizing/replaced-expected.txt (0 => 225101)


--- trunk/LayoutTests/fast/box-sizing/replaced-expected.txt	                        (rev 0)
+++ trunk/LayoutTests/fast/box-sizing/replaced-expected.txt	2017-11-22 20:37:35 UTC (rev 225101)
@@ -0,0 +1,9 @@
+
+PASS .wrapper 1 
+PASS .wrapper 2 
+PASS .wrapper 3 
+PASS .wrapper 4 
+
+
+
+

Added: trunk/LayoutTests/fast/box-sizing/replaced.html (0 => 225101)


--- trunk/LayoutTests/fast/box-sizing/replaced.html	                        (rev 0)
+++ trunk/LayoutTests/fast/box-sizing/replaced.html	2017-11-22 20:37:35 UTC (rev 225101)
@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<meta name="assert" content="This checks that 'box-sizing: border-box' doesn't have any effect on a positioned element that is warpping a replaced element, when the height of the positioned element is set by the offset properties.">
+<style>
+.wrapper {
+  position: relative;
+  width: 200px;
+  height: 200px;
+}
+
+.positioned {
+  border: 10px solid magenta;
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+}
+
+iframe {
+  border: 20px dotted cyan;
+  background: yellow;
+  width: 100%;
+  height: 100%;
+}
+
+.border-box {
+  box-sizing: border-box;
+}
+</style>
+
+<script src=""
+<script src=""
+<script src=""
+
+<body _onload_="checkLayout('.wrapper')">
+
+<div id="log"></div>
+
+<div class="wrapper" data-expected-width="200" data-expected-height="200">
+  <div class="positioned" data-expected-width="200" data-expected-height="200">
+    <iframe data-expected-width="220" data-expected-height="220"></iframe>
+  </div>
+</div>
+
+<div class="wrapper" data-expected-width="200" data-expected-height="200">
+  <div class="positioned" data-expected-width="200" data-expected-height="200">
+    <iframe class="border-box" data-expected-width="180" data-expected-height="180"></iframe>
+  </div>
+</div>
+
+<div class="wrapper" data-expected-width="200" data-expected-height="200">
+  <div class="positioned border-box" data-expected-width="200" data-expected-height="200">
+    <iframe data-expected-width="220" data-expected-height="220"></iframe>
+  </div>
+</div>
+
+<div class="wrapper" data-expected-width="200" data-expected-height="200">
+  <div class="positioned border-box" data-expected-width="200" data-expected-height="200">
+    <iframe class="border-box" data-expected-width="180" data-expected-height="180"></iframe>
+  </div>
+</div>
+
+</body>

Modified: trunk/Source/WebCore/ChangeLog (225100 => 225101)


--- trunk/Source/WebCore/ChangeLog	2017-11-22 19:44:57 UTC (rev 225100)
+++ trunk/Source/WebCore/ChangeLog	2017-11-22 20:37:35 UTC (rev 225101)
@@ -1,3 +1,23 @@
+2017-11-22  Manuel Rego Casasnovas  <r...@igalia.com>
+
+        Available height is wrong for positioned elements with "box-sizing: border-box"
+        https://bugs.webkit.org/show_bug.cgi?id=178783
+
+        Reviewed by Darin Adler.
+
+        These methods were returning a wrong value for positioned items
+        in combination with "box-sizing: border-box".
+        The problem was that if the height of the element is given
+        by its offset properties (top and bottom) we don't need to call
+        adjustContentBoxLogicalHeightForBoxSizing().
+
+        Tests: fast/box-sizing/fill-available.html
+               fast/box-sizing/replaced.html
+
+        * rendering/RenderBox.cpp:
+        (WebCore::RenderBox::computeReplacedLogicalHeightUsing const):
+        (WebCore::RenderBox::availableLogicalHeightUsing const):
+
 2017-11-22  Christopher Reid  <chris.r...@sony.com>
 
         WebCoreObjCExtras.h is being included in too many places

Modified: trunk/Source/WebCore/rendering/RenderBox.cpp (225100 => 225101)


--- trunk/Source/WebCore/rendering/RenderBox.cpp	2017-11-22 19:44:57 UTC (rev 225100)
+++ trunk/Source/WebCore/rendering/RenderBox.cpp	2017-11-22 20:37:35 UTC (rev 225101)
@@ -3081,8 +3081,7 @@
                 auto& block = downcast<RenderBlock>(*container);
                 auto computedValues = block.computeLogicalHeight(block.logicalHeight(), 0);
                 LayoutUnit newContentHeight = computedValues.m_extent - block.borderAndPaddingLogicalHeight() - block.scrollbarLogicalHeight();
-                LayoutUnit newHeight = block.adjustContentBoxLogicalHeightForBoxSizing(newContentHeight);
-                return adjustContentBoxLogicalHeightForBoxSizing(valueForLength(logicalHeight, newHeight));
+                return adjustContentBoxLogicalHeightForBoxSizing(valueForLength(logicalHeight, newContentHeight));
             }
             
             // FIXME: availableLogicalHeight() is wrong if the replaced element's block-flow is perpendicular to the
@@ -3161,8 +3160,7 @@
     if (is<RenderBlock>(*this) && isOutOfFlowPositioned() && style().height().isAuto() && !(style().top().isAuto() || style().bottom().isAuto())) {
         RenderBlock& block = const_cast<RenderBlock&>(downcast<RenderBlock>(*this));
         auto computedValues = block.computeLogicalHeight(block.logicalHeight(), 0);
-        LayoutUnit newContentHeight = computedValues.m_extent - block.borderAndPaddingLogicalHeight() - block.scrollbarLogicalHeight();
-        return adjustContentBoxLogicalHeightForBoxSizing(newContentHeight);
+        return computedValues.m_extent - block.borderAndPaddingLogicalHeight() - block.scrollbarLogicalHeight();
     }
 
     // FIXME: This is wrong if the containingBlock has a perpendicular writing mode.
_______________________________________________
webkit-changes mailing list
webkit-changes@lists.webkit.org
https://lists.webkit.org/mailman/listinfo/webkit-changes

Reply via email to