Changeset 278605 in webkit

Timestamp:

Jun 8, 2021, 7:02:56 AM (5 years ago)

Author:

Alan Bujtas

Message:

[LFC][TFC] Add initial percent value support for columns
​https://bugs.webkit.org/show_bug.cgi?id=226751

Reviewed by Simon Fraser.

Source/WebCore:

This patch adds the initial support for content like this:
<table>

<tr>

<td style="width: 10%"></td><td style="width: 90%"></td>

</tr>

</table>

Percent values work in mysterious ways in cases when the table has no fixed width.

1. The smaller the percent value is, the wider the table may become.

Percent values are resolved against the cell's border box (so essentially they are resolved
against their own content as opposed to the table/containing block) and the formula is slightly different.

<td style="padding: 5px; width: 20%;"></td> : produces a 10px wide border box (horizontal border: 0px, padding: 10px, content: 0px).

The maximum constraint is resolved to 50px (width / percent * 100)

<td style="padding: 5px; width: 100%;"></td> : produces a 10px wide border box and the maximum constraint is resolved to 10px.

This maximum constraint value turns into the available width for the table content and becomes the final table width.

2. With multiple rows, we pick the highest _percent_ value for each column (as opposed to the resolved values).

<tr><td style="width: 20%"></td></tr> (assum same 5px padding on both sides)
<tr><td style="width: 80%"></td></tr>

While the second row's cell has a higher maximum constraint value (50px see #1) since we only look at the raw percent values,
this content only produces a 12.5px wide table.

3. The percent values do not accumulate across columns but instead we pick the largest one to represent the entire table's max constraint width.

<tr><td style="width: 60%"></td><td style="width: 40%"></td></tr>

60% resolves to 16.6px
40% resolves to 25px and we use the 25px value as the width for the entire table (and not 16.6px + 25px).

4. Since we pick the highest percent values across rows for each columns, we may end up with > 100%. In such cases we start dropping percent values for subsequent columns:

<tr><td style="width: 20%;"></td><td style="width: 80%;"></td></tr>
<tr><td style="width: 60%;"></td><td style="width: 10%;"></td></tr>

First column width is max(20%, 60%) -> 60%
Second column width is max(80%, 10%) -> 80%
As we limit the accumulated percent value to 100%, the final column percent values are 60% and 40% (and not 80%).
Now the 60% is resolved to 16.6px and the 40% is resolved to 25px and since we don't accumulate these values (see #3)
the final table width is 25px (based on a percent value which is not even in the markup).

5. While the smaller percent values produce wider tables (see #1), during the available space distribution columns with smaller percent values get assigned less space.

<tr><td style="width: 1%"></td><td style="width: 99%"></td></tr>

This content produces a 1000px wide table due to the small (1%) percent value (see #1 #2 and #3).
When we distribute the available space (1000px), the first cell gets only 10px (1%) while the second cell ends up with 990px (99%).

(and this is the cherry on top (not included in this patch):

Imagine the following scenario:

1. the accumulated column percent value > 100% (let's say 80% and 30%)
2. as we reach the 100% while walking the columns one by one (see #4), the remaining percent value becomes 0%.
3. In order to avoid division by 0, we pick a very small epsilon value to run the formula.
4. Now this very small percent value produces a large resolved value (see #2) which means

<tr><td style="width: 100%"></td></tr>

produces a 10px wide table

<tr><td style="width: 100%"></td><td style="width: 1%"></td></tr> <- note the 1%

produces a very very very wide table.

)

Test: fast/layoutformattingcontext/table-with-percent-columns-only-no-content.html

• layout/formattingContexts/table/TableFormattingContext.cpp:

(WebCore::Layout::TableFormattingContext::computedIntrinsicWidthConstraints):
(WebCore::Layout::TableFormattingContext::computedPreferredWidthForColumns):

• layout/formattingContexts/table/TableGrid.h:

(WebCore::Layout::TableGrid::Column::percent const):
(WebCore::Layout::TableGrid::Column::setFixedWidth):
(WebCore::Layout::TableGrid::Column::setPercent):

• layout/formattingContexts/table/TableLayout.cpp:

(WebCore::Layout::TableFormattingContext::TableLayout::distributedHorizontalSpace):

LayoutTests:

• fast/layoutformattingcontext/table-with-percent-columns-only-no-content-expected.html: Added.
• fast/layoutformattingcontext/table-with-percent-columns-only-no-content.html: Added.

Location:

trunk

Files:

• LayoutTests/ChangeLog (modified) (1 diff)
• LayoutTests/fast/layoutformattingcontext/table-with-percent-columns-only-no-content-expected.html (added)
• LayoutTests/fast/layoutformattingcontext/table-with-percent-columns-only-no-content.html (added)
• Source/WebCore/ChangeLog (modified) (1 diff)
• Source/WebCore/layout/formattingContexts/table/TableFormattingContext.cpp (modified) (5 diffs)
• Source/WebCore/layout/formattingContexts/table/TableGrid.h (modified) (3 diffs)
• Source/WebCore/layout/formattingContexts/table/TableLayout.cpp (modified) (1 diff)

trunk/LayoutTests/ChangeLog

@@ +1 @@
+2021-06-08  Alan Bujtas  <zalan@apple.com>
+
+        [LFC][TFC] Add initial percent value support for columns
+        https://bugs.webkit.org/show_bug.cgi?id=226751
+
+        Reviewed by Simon Fraser.
+
+        * fast/layoutformattingcontext/table-with-percent-columns-only-no-content-expected.html: Added.
+        * fast/layoutformattingcontext/table-with-percent-columns-only-no-content.html: Added.
+
 2021-06-08  Diego Pino Garcia  <dpino@igalia.com>
 

trunk/Source/WebCore/ChangeLog

@@ +1 @@
+2021-06-08  Alan Bujtas  <zalan@apple.com>
+
+        [LFC][TFC] Add initial percent value support for columns
+        https://bugs.webkit.org/show_bug.cgi?id=226751
+
+        Reviewed by Simon Fraser.
+
+        This patch adds the initial support for content like this:
+        <table>
+          <tr>
+            <td style="width: 10%"></td><td style="width: 90%"></td>
+          </tr>
+        </table>
+
+        Percent values work in mysterious ways in cases when the table has no fixed width.
+
+        1. The smaller the percent value is, the wider the table may become.
+
+         Percent values are resolved against the cell's border box (so essentially they are resolved
+         against their own content as opposed to the table/containing block) and the formula is slightly different.
+
+            <td style="padding: 5px; width: 20%;"></td> : produces a 10px wide border box (horizontal border: 0px, padding: 10px, content: 0px).
+              The maximum constraint is resolved to 50px (width / percent * 100)
+            <td style="padding: 5px; width: 100%;"></td> : produces a 10px wide border box and the maximum constraint is resolved to 10px. 
+
+          This maximum constraint value turns into the available width for the table content and becomes the final table width.
+
+        2. With multiple rows, we pick the highest _percent_ value for each column (as opposed to the resolved values).
+
+              <tr><td style="width: 20%"></td></tr> (assum same 5px padding on both sides)
+              <tr><td style="width: 80%"></td></tr>
+
+          While the second row's cell has a higher maximum constraint value (50px see #1) since we only look at the raw percent values,
+          this content only produces a 12.5px wide table.
+
+        3. The percent values do not accumulate across columns but instead we pick the largest one to represent the entire table's max constraint width.
+
+            <tr><td style="width: 60%"></td><td style="width: 40%"></td></tr>
+
+          60% resolves to 16.6px
+          40% resolves to 25px and we use the 25px value as the width for the entire table (and not 16.6px + 25px).
+
+        4. Since we pick the highest percent values across rows for each columns, we may end up with > 100%.
+          In such cases we start dropping percent values for subsequent columns:
+
+            <tr><td style="width: 20%;"></td><td style="width: 80%;"></td></tr>
+            <tr><td style="width: 60%;"></td><td style="width: 10%;"></td></tr>
+
+          First column width is max(20%, 60%) -> 60%
+          Second column width is max(80%, 10%) -> 80%
+          As we limit the accumulated percent value to 100%, the final column percent values are 60% and 40% (and not 80%).
+          Now the 60% is resolved to 16.6px and the 40% is resolved to 25px and since we don't accumulate these values (see #3)
+          the final table width is 25px (based on a percent value which is not even in the markup).
+
+        5. While the smaller percent values produce wider tables (see #1), during the available space distribution
+          columns with smaller percent values get assigned less space.
+
+            <tr><td style="width: 1%"></td><td style="width: 99%"></td></tr>
+
+          This content produces a 1000px wide table due to the small (1%) percent value (see #1 #2 and #3).
+          When we distribute the available space (1000px), the first cell gets only 10px (1%) while the second cell ends up with 990px (99%).
+
+        (and this is the cherry on top (not included in this patch):
+         Imagine the following scenario:
+           1. the accumulated column percent value > 100% (let's say 80% and 30%)
+           2. as we reach the 100% while walking the columns one by one (see #4), the remaining percent value becomes 0%.
+           3. In order to avoid division by 0, we pick a very small epsilon value to run the formula.
+           4. Now this very small percent value produces a large resolved value (see #2) which means
+
+            <tr><td style="width: 100%"></td></tr>
+
+            produces a 10px wide table
+
+            <tr><td style="width: 100%"></td><td style="width: 1%"></td></tr> <- note the 1%
+
+            produces a very very very wide table.
+        )
+
+        Test: fast/layoutformattingcontext/table-with-percent-columns-only-no-content.html
+
+        * layout/formattingContexts/table/TableFormattingContext.cpp:
+        (WebCore::Layout::TableFormattingContext::computedIntrinsicWidthConstraints):
+        (WebCore::Layout::TableFormattingContext::computedPreferredWidthForColumns):
+        * layout/formattingContexts/table/TableGrid.h:
+        (WebCore::Layout::TableGrid::Column::percent const):
+        (WebCore::Layout::TableGrid::Column::setFixedWidth):
+        (WebCore::Layout::TableGrid::Column::setPercent):
+        * layout/formattingContexts/table/TableLayout.cpp:
+        (WebCore::Layout::TableFormattingContext::TableLayout::distributedHorizontalSpace):
+
 2021-06-08  Jean-Yves Avenard  <jya@apple.com>
 

trunk/Source/WebCore/layout/formattingContexts/table/TableFormattingContext.cpp

@@ -297 +297 @@
 {
     ASSERT(!root().isSizeContainmentBox());
-    // Tables have a slighty different concept of shrink to fit. It's really only different with non-auto "width" values, where
+    // Tables have a slightly different concept of shrink to fit. It's really only different with non-auto "width" values, where
     // a generic shrink-to fit block level box like a float box would be just sized to the computed value of "width", tables
-    // can actually be streched way over.
+    // can actually be stretched way over.
     auto& grid = formattingState().tableGrid();
     if (auto computedWidthConstraints = grid.widthConstraints())
@@ -329 +329 @@
             auto* columnBox = column.box();
             if (!columnBox) {
-                // Anoynmous columns don't have associated layout boxes and can't have fixed col size.
+                // Anonymous columns don't have associated layout boxes and can't have fixed col size.
                 return { };
             }
@@ -340 +340 @@
     }
 
+    Vector<std::optional<float>> columnPercentList(columnList.size());
     for (auto& cell : grid.cells()) {
         auto& cellBox = cell->box();
@@ -360 +361 @@
             *fixedWidth += horizontalBorderAndPaddingWidth;
             columnList[cellPosition.column].setFixedWidth(std::max(*fixedWidth, columnList[cellPosition.column].fixedWidth().value_or(0)));
+        }
+        // Collect the percent values so that we can compute the maximum values per column.
+        auto& cellLogicalWidth = cellBox.style().logicalWidth();
+        if (cellLogicalWidth.isPercent()) {
+            // FIXME: Add support for column spanning distribution.
+            columnPercentList[cellPosition.column] = std::max(cellLogicalWidth.percent(), columnPercentList[cellPosition.column].value_or(0.0f));
         }
     }
@@ -412 +419 @@
     }
 
-    // 5. The final table min/max widths is just the accumulated column constraints.
+    // 5. Resolve the percent values.
+    auto remainingPercent = 100.0f;
+    auto percentMaximumConstraint = LayoutUnit { };
+    for (size_t columnIndex = 0; columnIndex < columnList.size(); ++columnIndex) {
+        auto percent = columnPercentList[columnIndex];
+        // FIXME: Add support for mixed content with and without percent values.
+        if (!percent)
+            continue;
+        ASSERT(*percent > 0);
+        columnList[columnIndex].setPercent(std::min(remainingPercent, *percent));
+        percentMaximumConstraint = std::max(percentMaximumConstraint, LayoutUnit { columnIntrinsicWidths[columnIndex].maximum * 100.0f / *columnList[columnIndex].percent() });
+        remainingPercent -= *columnList[columnIndex].percent();
+    }
+
+    // 6. The final table min/max widths is just the accumulated column constraints.
     auto tableWidthConstraints = IntrinsicWidthConstraints { };
     for (auto& columnIntrinsicWidth : columnIntrinsicWidths)
         tableWidthConstraints += columnIntrinsicWidth;
-    // Exapand the preferred width with leading and trailing cell spacing (note that column spanners count as one cell).
+    tableWidthConstraints.maximum = std::max(tableWidthConstraints.maximum, percentMaximumConstraint);
+    // Expand the preferred width with leading and trailing cell spacing (note that column spanners count as one cell).
     tableWidthConstraints += (numberOfActualColumns + 1) * grid.horizontalSpacing();
     return tableWidthConstraints;

trunk/Source/WebCore/layout/formattingContexts/table/TableGrid.h

@@ -74 +74 @@
         LayoutUnit logicalWidth() const;
 
-        void setFixedWidth(LayoutUnit fixedValue) { m_fixedWidth = fixedValue; }
+        void setFixedWidth(LayoutUnit fixedValue);
         std::optional<LayoutUnit> fixedWidth() const { return m_fixedWidth; }
+
+        void setPercent(float);
+        std::optional<float> percent() const { return m_percent; }
 
         const ContainerBox* box() const { return m_layoutBox.get(); }
@@ -83 +86 @@
         LayoutUnit m_computedLogicalLeft;
         std::optional<LayoutUnit> m_fixedWidth;
+        std::optional<float> m_percent;
         WeakPtr<const ContainerBox> m_layoutBox;
 
@@ -231 +235 @@
 };
 
+
+inline void TableGrid::Column::setFixedWidth(LayoutUnit fixedValue)
+{
+    ASSERT(!m_percent);
+    m_fixedWidth = fixedValue;
+}
+
+inline void TableGrid::Column::setPercent(float percent)
+{
+    ASSERT(!m_fixedWidth);
+    m_percent = percent;
+}
+
 }
 }

trunk/Source/WebCore/layout/formattingContexts/table/TableLayout.cpp

@@ -248 +248 @@
         float maximumWidth = slot.widthConstraints().maximum;
 
-        if (auto fixedWidth = m_grid.columns().list()[columnIndex].fixedWidth())
+        auto& column = m_grid.columns().list()[columnIndex];
+        if (auto fixedWidth = column.fixedWidth())
             maximumWidth = std::max<float>(minimumWidth, *fixedWidth);
+        else if (auto percent = column.percent())
+            maximumWidth = std::max(minimumWidth, *percent * availableHorizontalSpace / 100.0f);
 
         if (columnWidthBalancingBase == ColumnWidthBalancingBase::MinimumWidth) {