Title: [287063] trunk
Revision
287063
Author
[email protected]
Date
2021-12-14 22:53:53 -0800 (Tue, 14 Dec 2021)

Log Message

Fix that height is calculated incorrectly when using display:table, box-sizing:border-box and padding.
https://bugs.webkit.org/show_bug.cgi?id=196175

Reviewed by Darin Adler.

Currently, box sizing type check is missing, so the height of display:table element's percent height child
is subtracted by its border and padding even when its 'box-sizing' is not 'content-box'.

This patch adds the missing box sizing type check.

LayoutTests/imported/w3c:

* web-platform-tests/css/css-sizing/table-child-percentage-height-with-border-box-expected.html: Added.
* web-platform-tests/css/css-sizing/table-child-percentage-height-with-border-box.html: Added.

Source/WebCore:

Test: imported/w3c/web-platform-tests/css/css-sizing/table-child-percentage-height-with-border-box.html

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

LayoutTests:

* platform/gtk/fast/table/003-expected.txt:
* platform/gtk/tables/mozilla/bugs/bug30692-expected.txt:
* platform/ios/tables/mozilla/bugs/bug30692-expected.txt:
* platform/mac-catalina/tables/mozilla/bugs/bug30692-expected.txt:
* platform/mac-mojave/tables/mozilla/bugs/bug30692-expected.txt:
* platform/mac/fast/table/003-expected.txt:
* platform/mac/tables/mozilla/bugs/bug30692-expected.txt:

Modified Paths

Added Paths

Diff

Modified: trunk/LayoutTests/ChangeLog (287062 => 287063)


--- trunk/LayoutTests/ChangeLog	2021-12-15 05:44:52 UTC (rev 287062)
+++ trunk/LayoutTests/ChangeLog	2021-12-15 06:53:53 UTC (rev 287063)
@@ -1,3 +1,23 @@
+2021-12-14  Joonghun Park  <[email protected]>
+
+        Fix that height is calculated incorrectly when using display:table, box-sizing:border-box and padding.
+        https://bugs.webkit.org/show_bug.cgi?id=196175
+
+        Reviewed by Darin Adler.
+
+        Currently, box sizing type check is missing, so the height of display:table element's percent height child
+        is subtracted by its border and padding even when its 'box-sizing' is not 'content-box'.
+
+        This patch adds the missing box sizing type check.
+
+        * platform/gtk/fast/table/003-expected.txt:
+        * platform/gtk/tables/mozilla/bugs/bug30692-expected.txt:
+        * platform/ios/tables/mozilla/bugs/bug30692-expected.txt:
+        * platform/mac-catalina/tables/mozilla/bugs/bug30692-expected.txt:
+        * platform/mac-mojave/tables/mozilla/bugs/bug30692-expected.txt:
+        * platform/mac/fast/table/003-expected.txt:
+        * platform/mac/tables/mozilla/bugs/bug30692-expected.txt:
+
 2021-12-14  Ryan Haddad  <[email protected]>
 
         REGRESSION (r286982): ASSERTION FAILED: clipRectsContext.rootLayer == m_clipRectsCache->m_clipRectsRoot[clipRectsType]

Modified: trunk/LayoutTests/imported/w3c/ChangeLog (287062 => 287063)


--- trunk/LayoutTests/imported/w3c/ChangeLog	2021-12-15 05:44:52 UTC (rev 287062)
+++ trunk/LayoutTests/imported/w3c/ChangeLog	2021-12-15 06:53:53 UTC (rev 287063)
@@ -1,3 +1,18 @@
+2021-12-14  Joonghun Park  <[email protected]>
+
+        Fix that height is calculated incorrectly when using display:table, box-sizing:border-box and padding.
+        https://bugs.webkit.org/show_bug.cgi?id=196175
+
+        Reviewed by Darin Adler.
+
+        Currently, box sizing type check is missing, so the height of display:table element's percent height child
+        is subtracted by its border and padding even when its 'box-sizing' is not 'content-box'.
+
+        This patch adds the missing box sizing type check.
+
+        * web-platform-tests/css/css-sizing/table-child-percentage-height-with-border-box-expected.html: Added.
+        * web-platform-tests/css/css-sizing/table-child-percentage-height-with-border-box.html: Added.
+
 2021-12-14  Alex Christensen  <[email protected]>
 
         Revert r284816

Added: trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-sizing/table-child-percentage-height-with-border-box-expected.html (0 => 287063)


--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-sizing/table-child-percentage-height-with-border-box-expected.html	                        (rev 0)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-sizing/table-child-percentage-height-with-border-box-expected.html	2021-12-15 06:53:53 UTC (rev 287063)
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Test if percentage height of table's child element with box-sizing: border-box is calculated correctly</title>
+<link rel="help" href=""
+<style>
+  html {
+    height: 100%;
+    width: 100%;
+  }
+  body {
+    box-sizing: border-box;
+    display: table;
+    margin: 0 auto;
+    width: 100%;
+    height: 100%;
+  }
+  .content {
+    box-sizing: border-box;
+    display: table-row;
+    width: 100%;
+    height: 100%;
+    background-color: red;
+  }
+  .wrapper {
+    box-sizing: content-box;
+    width: 100%;
+    height: 100%;
+    background-color: green;
+    padding-top: 100px;
+  }
+</style>
+<body>
+  <div class="content">
+    <div class="wrapper">
+      wrapped content (height: 100%)
+    </div>
+  </div>
+</body>

Added: trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-sizing/table-child-percentage-height-with-border-box.html (0 => 287063)


--- trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-sizing/table-child-percentage-height-with-border-box.html	                        (rev 0)
+++ trunk/LayoutTests/imported/w3c/web-platform-tests/css/css-sizing/table-child-percentage-height-with-border-box.html	2021-12-15 06:53:53 UTC (rev 287063)
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Test if percentage height of table's child element with box-sizing: border-box is calculated correctly</title>
+<link rel="help" href=""
+<link rel="match" href=""
+<style>
+  html {
+    height: 100%;
+    width: 100%;
+  }
+  body {
+    box-sizing: border-box;
+    display: table;
+    margin: 0 auto;
+    width: 100%;
+    height: 100%;
+  }
+  .content {
+    box-sizing: border-box;
+    display: table-row;
+    width: 100%;
+    height: 100%;
+    background-color: red;
+  }
+  .wrapper {
+    box-sizing: border-box;
+    width: 100%;
+    height: 100%;
+    background-color: green;
+    padding-top: 100px;
+  }
+</style>
+<body>
+  <div class="content">
+    <div class="wrapper">
+      wrapped content (height: 100%)
+    </div>
+  </div>
+</body>

Modified: trunk/LayoutTests/platform/gtk/fast/table/003-expected.txt (287062 => 287063)


--- trunk/LayoutTests/platform/gtk/fast/table/003-expected.txt	2021-12-15 05:44:52 UTC (rev 287062)
+++ trunk/LayoutTests/platform/gtk/fast/table/003-expected.txt	2021-12-15 06:53:53 UTC (rev 287063)
@@ -34,7 +34,7 @@
               RenderText {#text} at (2,2) size 37x17
                 text run at (2,2) width 37: "world"
           RenderTableRow {TR} at (0,74) size 213x46
-            RenderTableCell {TD} at (2,77) size 209x40 [border: (1px inset #808080)] [r=3 c=0 rs=1 cs=1]
+            RenderTableCell {TD} at (2,74) size 209x46 [border: (1px inset #808080)] [r=3 c=0 rs=1 cs=1]
               RenderText {#text} at (0,0) size 0x0
       RenderTable {TABLE} at (0,282) size 106x78
         RenderTableSection {TBODY} at (0,0) size 106x78
@@ -76,6 +76,6 @@
                   text run at (243,0) width 119: "Definitely. Should."
 layer at (58,16) size 728x18
   RenderBlock {DIV} at (3,3) size 728x18
-layer at (16,245) size 201x36 clip at (17,246) size 199x34
-  RenderTextControl {TEXTAREA} at (4,2) size 201x36 [bgcolor=#FFFFFF] [border: (1px solid #000000)]
+layer at (16,242) size 201x42 clip at (17,243) size 199x40
+  RenderTextControl {TEXTAREA} at (4,2) size 201x42 [bgcolor=#FFFFFF] [border: (1px solid #000000)]
     RenderBlock {DIV} at (3,3) size 195x18

Modified: trunk/LayoutTests/platform/gtk/tables/mozilla/bugs/bug30692-expected.txt (287062 => 287063)


--- trunk/LayoutTests/platform/gtk/tables/mozilla/bugs/bug30692-expected.txt	2021-12-15 05:44:52 UTC (rev 287062)
+++ trunk/LayoutTests/platform/gtk/tables/mozilla/bugs/bug30692-expected.txt	2021-12-15 06:53:53 UTC (rev 287063)
@@ -20,7 +20,7 @@
         RenderTable {TABLE} at (0,36) size 784x100
           RenderTableSection {TBODY} at (0,0) size 784x100
             RenderTableRow {TR} at (0,2) size 784x96
-              RenderTableCell {TD} at (2,14) size 780x72 [bgcolor=#FF0000] [r=0 c=0 rs=1 cs=1]
+              RenderTableCell {TD} at (2,11) size 780x78 [bgcolor=#FF0000] [r=0 c=0 rs=1 cs=1]
                 RenderText {#text} at (0,0) size 0x0
         RenderBlock {HR} at (0,144) size 784x2 [border: (1px inset #000000)]
         RenderTable {TABLE} at (0,154) size 784x100
@@ -44,8 +44,8 @@
                 RenderBlock {P} at (1,1) size 623x80 [bgcolor=#FFFFE0]
                   RenderText {#text} at (0,0) size 222x17
                     text run at (0,0) width 222: "OK: the height of the P is 80 pixels"
-layer at (11,96) size 622x69 clip at (12,97) size 620x67
-  RenderTextControl {TEXTAREA} at (1,1) size 623x70 [bgcolor=#FFFFFF] [border: (1px solid #000000)]
+layer at (11,93) size 622x75 clip at (12,94) size 620x73
+  RenderTextControl {TEXTAREA} at (1,1) size 623x76 [bgcolor=#FFFFFF] [border: (1px solid #000000)]
     RenderBlock {DIV} at (3,3) size 617x18
       RenderText {#text} at (0,0) size 295x17
         text run at (0,0) width 295: "BUG: the height of the textarea is not 80%"

Modified: trunk/LayoutTests/platform/ios/tables/mozilla/bugs/bug30692-expected.txt (287062 => 287063)


--- trunk/LayoutTests/platform/ios/tables/mozilla/bugs/bug30692-expected.txt	2021-12-15 05:44:52 UTC (rev 287062)
+++ trunk/LayoutTests/platform/ios/tables/mozilla/bugs/bug30692-expected.txt	2021-12-15 06:53:53 UTC (rev 287063)
@@ -20,7 +20,7 @@
         RenderTable {TABLE} at (0,38) size 784x100
           RenderTableSection {TBODY} at (0,0) size 784x100
             RenderTableRow {TR} at (0,2) size 784x96
-              RenderTableCell {TD} at (2,14) size 780x72 [bgcolor=#FF0000] [r=0 c=0 rs=1 cs=1]
+              RenderTableCell {TD} at (2,11) size 780x78 [bgcolor=#FF0000] [r=0 c=0 rs=1 cs=1]
                 RenderText {#text} at (0,0) size 0x0
         RenderBlock {HR} at (0,146) size 784x2 [border: (1px inset #000000)]
         RenderTable {TABLE} at (0,156) size 784x100
@@ -44,8 +44,8 @@
                 RenderBlock {P} at (1,1) size 623x80 [bgcolor=#FFFFE0]
                   RenderText {#text} at (0,0) size 226x19
                     text run at (0,0) width 226: "OK: the height of the P is 80 pixels"
-layer at (11,102) size 622x69 clip at (12,103) size 620x67
-  RenderTextControl {TEXTAREA} at (1,1) size 623x70 [bgcolor=#FFFFFF] [border: (1px solid #3C3C4399)]
+layer at (11,99) size 622x75 clip at (12,100) size 620x73
+  RenderTextControl {TEXTAREA} at (1,1) size 623x76 [bgcolor=#FFFFFF] [border: (1px solid #3C3C4399)]
     RenderBlock {DIV} at (6,3) size 610x14
       RenderText {#text} at (0,0) size 223x14
         text run at (0,0) width 223: "BUG: the height of the textarea is not 80%"

Modified: trunk/LayoutTests/platform/mac/fast/table/003-expected.txt (287062 => 287063)


--- trunk/LayoutTests/platform/mac/fast/table/003-expected.txt	2021-12-15 05:44:52 UTC (rev 287062)
+++ trunk/LayoutTests/platform/mac/fast/table/003-expected.txt	2021-12-15 06:53:53 UTC (rev 287063)
@@ -34,7 +34,7 @@
               RenderText {#text} at (2,2) size 38x18
                 text run at (2,2) width 38: "world"
           RenderTableRow {TR} at (0,74) size 173x40
-            RenderTableCell {TD} at (2,77) size 169x34 [border: (1px inset #808080)] [r=3 c=0 rs=1 cs=1]
+            RenderTableCell {TD} at (2,74) size 169x40 [border: (1px inset #808080)] [r=3 c=0 rs=1 cs=1]
               RenderText {#text} at (0,0) size 0x0
       RenderTable {TABLE} at (0,271) size 106x78
         RenderTableSection {TBODY} at (0,0) size 106x78
@@ -76,6 +76,6 @@
                   text run at (246,0) width 121: "Definitely. Should."
 layer at (69,16) size 717x13
   RenderBlock {DIV} at (3,3) size 718x13
-layer at (16,240) size 161x30 clip at (17,241) size 159x28
-  RenderTextControl {TEXTAREA} at (4,2) size 161x30 [bgcolor=#FFFFFF] [border: (1px solid #000000)]
+layer at (16,237) size 161x36 clip at (17,238) size 159x34
+  RenderTextControl {TEXTAREA} at (4,2) size 161x36 [bgcolor=#FFFFFF] [border: (1px solid #000000)]
     RenderBlock {DIV} at (3,3) size 155x13

Modified: trunk/LayoutTests/platform/mac/tables/mozilla/bugs/bug30692-expected.txt (287062 => 287063)


--- trunk/LayoutTests/platform/mac/tables/mozilla/bugs/bug30692-expected.txt	2021-12-15 05:44:52 UTC (rev 287062)
+++ trunk/LayoutTests/platform/mac/tables/mozilla/bugs/bug30692-expected.txt	2021-12-15 06:53:53 UTC (rev 287063)
@@ -20,7 +20,7 @@
         RenderTable {TABLE} at (0,36) size 784x100
           RenderTableSection {TBODY} at (0,0) size 784x100
             RenderTableRow {TR} at (0,2) size 784x96
-              RenderTableCell {TD} at (2,14) size 780x72 [bgcolor=#FF0000] [r=0 c=0 rs=1 cs=1]
+              RenderTableCell {TD} at (2,11) size 780x78 [bgcolor=#FF0000] [r=0 c=0 rs=1 cs=1]
                 RenderText {#text} at (0,0) size 0x0
         RenderBlock {HR} at (0,144) size 784x2 [border: (1px inset #000000)]
         RenderTable {TABLE} at (0,154) size 784x100
@@ -44,8 +44,8 @@
                 RenderBlock {P} at (1,1) size 623x80 [bgcolor=#FFFFE0]
                   RenderText {#text} at (0,0) size 226x18
                     text run at (0,0) width 226: "OK: the height of the P is 80 pixels"
-layer at (11,96) size 622x69 clip at (12,97) size 620x67
-  RenderTextControl {TEXTAREA} at (1,1) size 623x70 [bgcolor=#FFFFFF] [border: (1px solid #000000)]
+layer at (11,93) size 622x75 clip at (12,94) size 620x73
+  RenderTextControl {TEXTAREA} at (1,1) size 623x76 [bgcolor=#FFFFFF] [border: (1px solid #000000)]
     RenderBlock {DIV} at (3,3) size 617x13
       RenderText {#text} at (0,0) size 223x13
         text run at (0,0) width 223: "BUG: the height of the textarea is not 80%"

Modified: trunk/LayoutTests/platform/mac-catalina/tables/mozilla/bugs/bug30692-expected.txt (287062 => 287063)


--- trunk/LayoutTests/platform/mac-catalina/tables/mozilla/bugs/bug30692-expected.txt	2021-12-15 05:44:52 UTC (rev 287062)
+++ trunk/LayoutTests/platform/mac-catalina/tables/mozilla/bugs/bug30692-expected.txt	2021-12-15 06:53:53 UTC (rev 287063)
@@ -20,7 +20,7 @@
         RenderTable {TABLE} at (0,36) size 784x100
           RenderTableSection {TBODY} at (0,0) size 784x100
             RenderTableRow {TR} at (0,2) size 784x96
-              RenderTableCell {TD} at (2,14) size 780x72 [bgcolor=#FF0000] [r=0 c=0 rs=1 cs=1]
+              RenderTableCell {TD} at (2,11) size 780x78 [bgcolor=#FF0000] [r=0 c=0 rs=1 cs=1]
                 RenderText {#text} at (0,0) size 0x0
         RenderBlock {HR} at (0,144) size 784x2 [border: (1px inset #000000)]
         RenderTable {TABLE} at (0,154) size 784x100
@@ -44,8 +44,8 @@
                 RenderBlock {P} at (1,1) size 623x80 [bgcolor=#FFFFE0]
                   RenderText {#text} at (0,0) size 226x18
                     text run at (0,0) width 226: "OK: the height of the P is 80 pixels"
-layer at (11,96) size 622x69 clip at (12,97) size 620x67
-  RenderTextControl {TEXTAREA} at (1,1) size 623x70 [bgcolor=#FFFFFF] [border: (1px solid #000000)]
+layer at (11,93) size 622x75 clip at (12,94) size 620x73
+  RenderTextControl {TEXTAREA} at (1,1) size 623x76 [bgcolor=#FFFFFF] [border: (1px solid #000000)]
     RenderBlock {DIV} at (3,3) size 617x13
       RenderText {#text} at (0,0) size 222x13
         text run at (0,0) width 222: "BUG: the height of the textarea is not 80%"

Modified: trunk/LayoutTests/platform/mac-mojave/tables/mozilla/bugs/bug30692-expected.txt (287062 => 287063)


--- trunk/LayoutTests/platform/mac-mojave/tables/mozilla/bugs/bug30692-expected.txt	2021-12-15 05:44:52 UTC (rev 287062)
+++ trunk/LayoutTests/platform/mac-mojave/tables/mozilla/bugs/bug30692-expected.txt	2021-12-15 06:53:53 UTC (rev 287063)
@@ -20,7 +20,7 @@
         RenderTable {TABLE} at (0,36) size 784x100
           RenderTableSection {TBODY} at (0,0) size 784x100
             RenderTableRow {TR} at (0,2) size 784x96
-              RenderTableCell {TD} at (2,14) size 780x72 [bgcolor=#FF0000] [r=0 c=0 rs=1 cs=1]
+              RenderTableCell {TD} at (2,11) size 780x78 [bgcolor=#FF0000] [r=0 c=0 rs=1 cs=1]
                 RenderText {#text} at (0,0) size 0x0
         RenderBlock {HR} at (0,144) size 784x2 [border: (1px inset #000000)]
         RenderTable {TABLE} at (0,154) size 784x100
@@ -44,8 +44,8 @@
                 RenderBlock {P} at (1,1) size 623x80 [bgcolor=#FFFFE0]
                   RenderText {#text} at (0,0) size 226x18
                     text run at (0,0) width 226: "OK: the height of the P is 80 pixels"
-layer at (11,96) size 622x69 clip at (12,97) size 620x67
-  RenderTextControl {TEXTAREA} at (1,1) size 623x70 [bgcolor=#FFFFFF] [border: (1px solid #000000)]
+layer at (11,93) size 622x75 clip at (12,94) size 620x73
+  RenderTextControl {TEXTAREA} at (1,1) size 623x76 [bgcolor=#FFFFFF] [border: (1px solid #000000)]
     RenderBlock {DIV} at (3,3) size 617x13
       RenderText {#text} at (0,0) size 222x13
         text run at (0,0) width 222: "BUG: the height of the textarea is not 80%"

Modified: trunk/Source/WebCore/ChangeLog (287062 => 287063)


--- trunk/Source/WebCore/ChangeLog	2021-12-15 05:44:52 UTC (rev 287062)
+++ trunk/Source/WebCore/ChangeLog	2021-12-15 06:53:53 UTC (rev 287063)
@@ -1,3 +1,20 @@
+2021-12-14  Joonghun Park  <[email protected]>
+
+        Fix that height is calculated incorrectly when using display:table, box-sizing:border-box and padding.
+        https://bugs.webkit.org/show_bug.cgi?id=196175
+
+        Reviewed by Darin Adler.
+
+        Currently, box sizing type check is missing, so the height of display:table element's percent height child
+        is subtracted by its border and padding even when its 'box-sizing' is not 'content-box'.
+
+        This patch adds the missing box sizing type check.
+
+        Test: imported/w3c/web-platform-tests/css/css-sizing/table-child-percentage-height-with-border-box.html
+
+        * rendering/RenderBox.cpp:
+        (WebCore::RenderBox::computePercentageLogicalHeight const):
+
 2021-12-14  Alan Bujtas  <[email protected]>
 
         [IFC][Integration] Use logical margin/border/padding values in layout

Modified: trunk/Source/WebCore/rendering/RenderBox.cpp (287062 => 287063)


--- trunk/Source/WebCore/rendering/RenderBox.cpp	2021-12-15 05:44:52 UTC (rev 287062)
+++ trunk/Source/WebCore/rendering/RenderBox.cpp	2021-12-15 06:53:53 UTC (rev 287063)
@@ -3346,7 +3346,7 @@
     // then we must subtract the border and padding from the cell's
     // |availableHeight| (given by |overridingLogicalHeight|) to arrive
     // at the child's computed height.
-    bool subtractBorderAndPadding = isTable() || (is<RenderTableCell>(*cb) && !skippedAutoHeightContainingBlock && cb->hasOverridingLogicalHeight());
+    bool subtractBorderAndPadding = isTable() || (is<RenderTableCell>(*cb) && !skippedAutoHeightContainingBlock && cb->hasOverridingLogicalHeight() && style().boxSizing() == BoxSizing::ContentBox);
     if (subtractBorderAndPadding) {
         result -= borderAndPaddingLogicalHeight();
         return std::max(0_lu, result);
_______________________________________________
webkit-changes mailing list
[email protected]
https://lists.webkit.org/mailman/listinfo/webkit-changes

Reply via email to