Title: [265020] trunk
Revision
265020
Author
obru...@igalia.com
Date
2020-07-28 16:41:05 -0700 (Tue, 28 Jul 2020)

Log Message

[css-grid] Fix 'align-content' in grid containers with small content area
https://bugs.webkit.org/show_bug.cgi?id=214370

Reviewed by Darin Adler.

LayoutTests/imported/w3c:

Create a WPT test and import another one.

* web-platform-tests/css/css-grid/alignment/grid-place-content-001-expected.txt: Added.
* web-platform-tests/css/css-grid/alignment/grid-place-content-001.html: Added.
* web-platform-tests/css/css-sizing/available-height-for-replaced-content-001-expected.txt: Added.
* web-platform-tests/css/css-sizing/available-height-for-replaced-content-001.html: Added.
* web-platform-tests/css/css-sizing/w3c-import.log:

Source/WebCore:

In order to properly obey 'align-content', grid containers need to know
the available grid space for the block axis. But there was a bug when
the sum of border and padding sizes in the block axis were bigger than
the content area. Then the available space was considered to be that sum.

This patch fixes it so that the available grid space is the size of its
content box when that is definite.

Tests: imported/w3c/web-platform-tests/css/css-grid/alignment/grid-place-content-001.html
       imported/w3c/web-platform-tests/css/css-sizing/available-height-for-replaced-content-001.html

* rendering/RenderBox.cpp:
(WebCore::RenderBox::availableLogicalHeight const):

Modified Paths

Added Paths

Diff

Modified: trunk/LayoutTests/imported/w3c/ChangeLog (265019 => 265020)


--- trunk/LayoutTests/imported/w3c/ChangeLog	2020-07-28 23:21:53 UTC (rev 265019)
+++ trunk/LayoutTests/imported/w3c/ChangeLog	2020-07-28 23:41:05 UTC (rev 265020)
@@ -1,3 +1,18 @@
+2020-07-28  Oriol Brufau  <obru...@igalia.com>
+
+        [css-grid] Fix 'align-content' in grid containers with small content area
+        https://bugs.webkit.org/show_bug.cgi?id=214370
+
+        Reviewed by Darin Adler.
+
+        Create a WPT test and import another one.
+
+        * web-platform-tests/css/css-grid/alignment/grid-place-content-001-expected.txt: Added.
+        * web-platform-tests/css/css-grid/alignment/grid-place-content-001.html: Added.
+        * web-platform-tests/css/css-sizing/available-height-for-replaced-content-001-expected.txt: Added.
+        * web-platform-tests/css/css-sizing/available-height-for-replaced-content-001.html: Added.
+        * web-platform-tests/css/css-sizing/w3c-import.log:
+
 2020-07-28  Chris Dumez  <cdu...@apple.com>
 
         [EventSource] WebKit fails to UTF-8 encode the Last-Event-ID HTTP header value

Added: trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/grid-place-content-001-expected.txt (0 => 265020)


--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/grid-place-content-001-expected.txt	                        (rev 0)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/grid-place-content-001-expected.txt	2020-07-28 23:41:05 UTC (rev 265020)
@@ -0,0 +1,66 @@
+
+PASS .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 
+Small content area
+
+box-sizing: content-box
+X
+ 
+X
+ 
+X
+ 
+X
+ 
+X
+ box-sizing: border-box
+X
+ 
+X
+ 
+X
+ 
+X
+ 
+X
+Big content area
+
+box-sizing: content-box
+X
+ 
+X
+ 
+X
+ 
+X
+ 
+X
+ box-sizing: border-box
+X
+ 
+X
+ 
+X
+ 
+X
+ 
+X
+

Added: trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/grid-place-content-001.html (0 => 265020)


--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/grid-place-content-001.html	                        (rev 0)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-grid/alignment/grid-place-content-001.html	2020-07-28 23:41:05 UTC (rev 265020)
@@ -0,0 +1,139 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Grid Layout Test: Grid containers support 'place-content'</title>
+<link rel="author" title="Oriol Brufau" href=""
+<link rel="help" href="" title="10.5. Aligning the Grid: the 'justify-content' and 'align-content' properties">
+<link rel="help" href="" title="5.1. The 'justify-content' and 'align-content' Properties">
+<meta name="assert" content="This test checks that the 'justify-content' and 'align-content' properties, set using their 'place-content' shorthand, work well in grid containers.">
+<link rel="stylesheet" type="text/css" href="" />
+<style>
+.grid {
+  display: inline-grid;
+  position: relative;
+  vertical-align: top;
+  border: 10px solid black;
+  margin: 5px;
+  font: 40px/1 Ahem;
+  color: cyan;
+}
+.small {
+  padding: 40px;
+}
+.big {
+  padding: 0px;
+}
+.content-box.small {
+  width: 0px;
+  height: 0px;
+}
+.content-box.big {
+  width: 80px;
+  height: 80px;
+}
+.border-box {
+  box-sizing: border-box;
+  width: 100px;
+  height: 100px;
+}
+.start {
+  place-content: start;
+}
+.center {
+  place-content: center;
+}
+.end {
+  place-content: end;
+}
+.space-between {
+  place-content: space-between;
+}
+.space-around {
+  place-content: space-around;
+}
+</style>
+<script src=""
+<script src=""
+<script src=""
+<div id="log"></div>
+
+<h3>Small content area</h3>
+
+<pre>box-sizing: content-box</pre>
+
+<div class="grid small content-box start">
+  <div data-offset-x="40" data-offset-y="40">X</div>
+</div>
+<div class="grid small content-box center">
+  <div data-offset-x="20" data-offset-y="20">X</div>
+</div>
+<div class="grid small content-box end">
+  <div data-offset-x="0" data-offset-y="0">X</div>
+</div>
+<div class="grid small content-box space-between">
+  <div data-offset-x="40" data-offset-y="40">X</div>
+</div>
+<div class="grid small content-box space-around">
+  <div data-offset-x="20" data-offset-y="20">X</div>
+</div>
+
+<pre>box-sizing: border-box</pre>
+
+<div class="grid small border-box start">
+  <div data-offset-x="40" data-offset-y="40">X</div>
+</div>
+<div class="grid small border-box center">
+  <div data-offset-x="20" data-offset-y="20">X</div>
+</div>
+<div class="grid small border-box end">
+  <div data-offset-x="0" data-offset-y="0">X</div>
+</div>
+<div class="grid small border-box space-between">
+  <div data-offset-x="40" data-offset-y="40">X</div>
+</div>
+<div class="grid small border-box space-around">
+  <div data-offset-x="20" data-offset-y="20">X</div>
+</div>
+
+<h3>Big content area</h3>
+
+<pre>box-sizing: content-box</pre>
+
+<div class="grid big content-box start">
+  <div data-offset-x="0" data-offset-y="0">X</div>
+</div>
+<div class="grid big content-box center">
+  <div data-offset-x="20" data-offset-y="20">X</div>
+</div>
+<div class="grid big content-box end">
+  <div data-offset-x="40" data-offset-y="40">X</div>
+</div>
+<div class="grid big content-box space-between">
+  <div data-offset-x="0" data-offset-y="0">X</div>
+</div>
+<div class="grid big content-box space-around">
+  <div data-offset-x="20" data-offset-y="20">X</div>
+</div>
+
+<pre>box-sizing: border-box</pre>
+
+<div class="grid border-box start">
+  <div data-offset-x="0" data-offset-y="0">X</div>
+</div>
+<div class="grid big border-box center">
+  <div data-offset-x="20" data-offset-y="20">X</div>
+</div>
+<div class="grid big border-box end">
+  <div data-offset-x="40" data-offset-y="40">X</div>
+</div>
+<div class="grid big border-box space-between">
+  <div data-offset-x="0" data-offset-y="0">X</div>
+</div>
+<div class="grid big border-box space-around">
+  <div data-offset-x="20" data-offset-y="20">X</div>
+</div>
+
+<script>
+document.fonts.ready.then(() => {
+  checkLayout('.grid');
+});
+</script>

Added: trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-sizing/available-height-for-replaced-content-001-expected.txt (0 => 265020)


--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-sizing/available-height-for-replaced-content-001-expected.txt	                        (rev 0)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-sizing/available-height-for-replaced-content-001-expected.txt	2020-07-28 23:41:05 UTC (rev 265020)
@@ -0,0 +1,3 @@
+
+PASS img 1 
+

Added: trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-sizing/available-height-for-replaced-content-001.html (0 => 265020)


--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-sizing/available-height-for-replaced-content-001.html	                        (rev 0)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-sizing/available-height-for-replaced-content-001.html	2020-07-28 23:41:05 UTC (rev 265020)
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>CSS Test: available height for replaced content</title>
+<link rel="help" href=""
+<link rel="help" href=""
+<meta name="assert" content="This test ensures that the available height for replaced content is calculated correctly when the parent has border, padding or min-height."/>
+<style>
+#wrapper {
+  width: 200px;
+  min-height: 1px;
+  height: 20px;
+  border: 1px solid green;
+  padding: 50px;
+}
+img {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  width: 100%;
+  height: 100%;
+  background: silver;
+}
+</style>
+<div id="log"></div>
+<div id="wrapper">
+  <img src="" data-expected-height="20">
+</div>
+<script src=""
+<script src=""
+<script src=""
+<script>
+  checkLayout('img');
+</script>

Modified: trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-sizing/w3c-import.log (265019 => 265020)


--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-sizing/w3c-import.log	2020-07-28 23:21:53 UTC (rev 265019)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-sizing/w3c-import.log	2020-07-28 23:41:05 UTC (rev 265020)
@@ -18,6 +18,7 @@
 /LayoutTests/imported/w3c/web-platform-tests/css/css-sizing/aspect-ratio-affects-container-width-when-height-changes.html
 /LayoutTests/imported/w3c/web-platform-tests/css/css-sizing/auto-scrollbar-inside-stf-abspos-expected.html
 /LayoutTests/imported/w3c/web-platform-tests/css/css-sizing/auto-scrollbar-inside-stf-abspos.html
+/LayoutTests/imported/w3c/web-platform-tests/css/css-sizing/available-height-for-replaced-content-001.html
 /LayoutTests/imported/w3c/web-platform-tests/css/css-sizing/block-fit-content-as-initial-expected.html
 /LayoutTests/imported/w3c/web-platform-tests/css/css-sizing/block-fit-content-as-initial.html
 /LayoutTests/imported/w3c/web-platform-tests/css/css-sizing/block-image-percentage-max-height-inside-inline-expected.xht

Modified: trunk/Source/WebCore/ChangeLog (265019 => 265020)


--- trunk/Source/WebCore/ChangeLog	2020-07-28 23:21:53 UTC (rev 265019)
+++ trunk/Source/WebCore/ChangeLog	2020-07-28 23:41:05 UTC (rev 265020)
@@ -1,3 +1,24 @@
+2020-07-28  Oriol Brufau  <obru...@igalia.com>
+
+        [css-grid] Fix 'align-content' in grid containers with small content area
+        https://bugs.webkit.org/show_bug.cgi?id=214370
+
+        Reviewed by Darin Adler.
+
+        In order to properly obey 'align-content', grid containers need to know
+        the available grid space for the block axis. But there was a bug when
+        the sum of border and padding sizes in the block axis were bigger than
+        the content area. Then the available space was considered to be that sum.
+
+        This patch fixes it so that the available grid space is the size of its
+        content box when that is definite.
+
+        Tests: imported/w3c/web-platform-tests/css/css-grid/alignment/grid-place-content-001.html
+               imported/w3c/web-platform-tests/css/css-sizing/available-height-for-replaced-content-001.html
+
+        * rendering/RenderBox.cpp:
+        (WebCore::RenderBox::availableLogicalHeight const):
+
 2020-07-28  Peng Liu  <peng.l...@apple.com>
 
         Clean up PlaybackSessionInterface[Mac|AVKit]

Modified: trunk/Source/WebCore/rendering/RenderBox.cpp (265019 => 265020)


--- trunk/Source/WebCore/rendering/RenderBox.cpp	2020-07-28 23:21:53 UTC (rev 265019)
+++ trunk/Source/WebCore/rendering/RenderBox.cpp	2020-07-28 23:41:05 UTC (rev 265020)
@@ -3249,7 +3249,7 @@
 
 LayoutUnit RenderBox::availableLogicalHeight(AvailableLogicalHeightType heightType) const
 {
-    return constrainLogicalHeightByMinMax(availableLogicalHeightUsing(style().logicalHeight(), heightType), WTF::nullopt);
+    return constrainContentBoxLogicalHeightByMinMax(availableLogicalHeightUsing(style().logicalHeight(), heightType), WTF::nullopt);
 }
 
 LayoutUnit RenderBox::availableLogicalHeightUsing(const Length& h, AvailableLogicalHeightType heightType) const
_______________________________________________
webkit-changes mailing list
webkit-changes@lists.webkit.org
https://lists.webkit.org/mailman/listinfo/webkit-changes

Reply via email to