From 26a029d407be480d791972afb5975cf62c9360a6 Mon Sep 17 00:00:00 2001 From: Daniel Baumann Date: Fri, 19 Apr 2024 02:47:55 +0200 Subject: Adding upstream version 124.0.1. Signed-off-by: Daniel Baumann --- .../css/css-tables/tentative/baseline-table.html | 179 ++++++ .../css/css-tables/tentative/baseline-td.html | 124 ++++ .../tests/css/css-tables/tentative/caption.html | 137 +++++ .../tentative/col-collapse-table-size.html | 88 +++ .../css/css-tables/tentative/colgroup-col.html | 122 ++++ .../tentative/colspan-redistribution.html | 621 +++++++++++++++++++++ .../css/css-tables/tentative/column-widths.html | 300 ++++++++++ .../css/css-tables/tentative/element-sizing.html | 34 ++ .../background-image-column-collapsed-ref.html | 30 + .../paint/background-image-column-collapsed.html | 68 +++ .../paint/background-image-column-ref.html | 44 ++ .../tentative/paint/background-image-column.html | 56 ++ .../paint/background-image-row-collapsed-ref.html | 60 ++ .../paint/background-image-row-collapsed.html | 53 ++ .../tentative/paint/background-image-row-ref.html | 68 +++ .../tentative/paint/background-image-row.html | 55 ++ .../paint/collapsed-border-large-cell-ref.html | 33 ++ .../paint/collapsed-border-large-cell.html | 39 ++ .../tentative/paint/overflow-hidden-table-ref.html | 32 ++ .../tentative/paint/overflow-hidden-table.html | 37 ++ .../tentative/position-sticky-container.html | 170 ++++++ .../tentative/rowspan-height-redistribution.html | 503 +++++++++++++++++ .../section-no-tbody-fixed-distribution.html | 9 + .../section-no-tbody-percent-distribution.html | 9 + .../tests/css/css-tables/tentative/support/README | 13 + .../tentative/support/table-tentative.css | 34 ++ .../css-tables/tentative/table-fixed-minmax.html | 146 +++++ .../tentative/table-height-redistribution.html | 317 +++++++++++ .../css/css-tables/tentative/table-minmax.html | 144 +++++ .../css/css-tables/tentative/table-quirks.html | 76 +++ .../table-width-redistribution-fixed-padding.html | 267 +++++++++ .../table-width-redistribution-fixed.html | 374 +++++++++++++ .../tentative/table-width-redistribution.html | 351 ++++++++++++ .../tentative/tbody-height-redistribution.html | 144 +++++ .../css-tables/tentative/td-box-sizing-001.html | 197 +++++++ .../css-tables/tentative/td-box-sizing-002.html | 123 ++++ .../css-tables/tentative/td-box-sizing-003.html | 148 +++++ 37 files changed, 5205 insertions(+) create mode 100644 testing/web-platform/tests/css/css-tables/tentative/baseline-table.html create mode 100644 testing/web-platform/tests/css/css-tables/tentative/baseline-td.html create mode 100644 testing/web-platform/tests/css/css-tables/tentative/caption.html create mode 100644 testing/web-platform/tests/css/css-tables/tentative/col-collapse-table-size.html create mode 100644 testing/web-platform/tests/css/css-tables/tentative/colgroup-col.html create mode 100644 testing/web-platform/tests/css/css-tables/tentative/colspan-redistribution.html create mode 100644 testing/web-platform/tests/css/css-tables/tentative/column-widths.html create mode 100644 testing/web-platform/tests/css/css-tables/tentative/element-sizing.html create mode 100644 testing/web-platform/tests/css/css-tables/tentative/paint/background-image-column-collapsed-ref.html create mode 100644 testing/web-platform/tests/css/css-tables/tentative/paint/background-image-column-collapsed.html create mode 100644 testing/web-platform/tests/css/css-tables/tentative/paint/background-image-column-ref.html create mode 100644 testing/web-platform/tests/css/css-tables/tentative/paint/background-image-column.html create mode 100644 testing/web-platform/tests/css/css-tables/tentative/paint/background-image-row-collapsed-ref.html create mode 100644 testing/web-platform/tests/css/css-tables/tentative/paint/background-image-row-collapsed.html create mode 100644 testing/web-platform/tests/css/css-tables/tentative/paint/background-image-row-ref.html create mode 100644 testing/web-platform/tests/css/css-tables/tentative/paint/background-image-row.html create mode 100644 testing/web-platform/tests/css/css-tables/tentative/paint/collapsed-border-large-cell-ref.html create mode 100644 testing/web-platform/tests/css/css-tables/tentative/paint/collapsed-border-large-cell.html create mode 100644 testing/web-platform/tests/css/css-tables/tentative/paint/overflow-hidden-table-ref.html create mode 100644 testing/web-platform/tests/css/css-tables/tentative/paint/overflow-hidden-table.html create mode 100644 testing/web-platform/tests/css/css-tables/tentative/position-sticky-container.html create mode 100644 testing/web-platform/tests/css/css-tables/tentative/rowspan-height-redistribution.html create mode 100644 testing/web-platform/tests/css/css-tables/tentative/section-no-tbody-fixed-distribution.html create mode 100644 testing/web-platform/tests/css/css-tables/tentative/section-no-tbody-percent-distribution.html create mode 100644 testing/web-platform/tests/css/css-tables/tentative/support/README create mode 100644 testing/web-platform/tests/css/css-tables/tentative/support/table-tentative.css create mode 100644 testing/web-platform/tests/css/css-tables/tentative/table-fixed-minmax.html create mode 100644 testing/web-platform/tests/css/css-tables/tentative/table-height-redistribution.html create mode 100644 testing/web-platform/tests/css/css-tables/tentative/table-minmax.html create mode 100644 testing/web-platform/tests/css/css-tables/tentative/table-quirks.html create mode 100644 testing/web-platform/tests/css/css-tables/tentative/table-width-redistribution-fixed-padding.html create mode 100644 testing/web-platform/tests/css/css-tables/tentative/table-width-redistribution-fixed.html create mode 100644 testing/web-platform/tests/css/css-tables/tentative/table-width-redistribution.html create mode 100644 testing/web-platform/tests/css/css-tables/tentative/tbody-height-redistribution.html create mode 100644 testing/web-platform/tests/css/css-tables/tentative/td-box-sizing-001.html create mode 100644 testing/web-platform/tests/css/css-tables/tentative/td-box-sizing-002.html create mode 100644 testing/web-platform/tests/css/css-tables/tentative/td-box-sizing-003.html (limited to 'testing/web-platform/tests/css/css-tables/tentative') diff --git a/testing/web-platform/tests/css/css-tables/tentative/baseline-table.html b/testing/web-platform/tests/css/css-tables/tentative/baseline-table.html new file mode 100644 index 0000000000..1507bf656f --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/tentative/baseline-table.html @@ -0,0 +1,179 @@ + + + + + +TABLE baseline + + + + + +
+

<TABLE> baseline tests

+ +

Empty table's baseline is bottom of table's border box.

+
+ Xp +
+
+ +

Empty body's baseline is bottom of table's border box.

+
+ Xp + + +
+
+ +

Empty row's baseline is center of the row.

+
+ Xp + + + +
+
+ +

First row defines baseline even if empty.

+
+ Xp + + + + +
1,0
+
+ +

Cell's baseline defined row's baseline only if cell is vertical-align:baseline.

+
+ Xp + + + +
Xp
+ +
+ Xp + + + +
Xp
+
+ + +

Table's vertical-align: top.

+
+ Xp
+
+ +

Table's vertical-align: middle.

+
+ Xp
+
+ +

Table's vertical-align: bottom.

+
+ Xp
+
+ +

Table's top/middle/bottom combined.

+
+ Xp
+
+
+
+ +

Two rows empty, 1st row has css height.

+
+ Xp + + +
+
+ +

First row empty with css height, 2 row has content,

+
+ Xp + + +
X
+
+ +

Empty rowspanned cells should not set baseline. This test might not be per-spec, distribution of empty cells over empty rows differs between browsers.

+
+ Xp + + + + + + + +
pX
+
+ +

Block level table inside inline block does not produce a baseline.

+
+ Xp
Xp
Xp
+
+
X
+
X
+
X
+
+ + +

Anonymous tables should not generate baselines

+
Xp +
+
 
+
+
+
> 
 
+
+
+
+ diff --git a/testing/web-platform/tests/css/css-tables/tentative/baseline-td.html b/testing/web-platform/tests/css/css-tables/tentative/baseline-td.html new file mode 100644 index 0000000000..4090c5db64 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/tentative/baseline-td.html @@ -0,0 +1,124 @@ + + + + + +TD baseline + + + + + + +
+

<TD> baseline tests

+ +

All the baseline values. +Many text values map to plain baseline.

+ + + + + + + + + + + + + +
Xp
Xp
Xp
Xp
Xp
Xp
Xp
Xp
Xp
Xp
Xp
Xp
+ +

All the baseline values. +Same as test before, but use display:table/table-cell. Default td alignment is baseline, not middle.

+
+
Xp
+
Xp
+
Xp
+
Xp
+
Xp
+
Xp
+
Xp
+
Xp
+
Xp
+
Xp
+
Xp
+
Xp
+
+ + +

Baselines with %ge children

+

FF/Edge fails here

+
+ inline table + + + +
+
+ 		+
+
+
+

Baseline and td height +If td is baseline aligned, and has a height, how tall should the td be? +

+

Legacy/FF apply height to below baseline?. With baseline alignment, this makes the cell taller.

+ + + + + +
base +
+
+ +

Baseline of rowspanned cell +rowspanned td's should contribute to baseline, but not to the row height.

+ + + + + + + + +
Xp
Xp

Xp
Xp
Xp
+ +
+ + diff --git a/testing/web-platform/tests/css/css-tables/tentative/caption.html b/testing/web-platform/tests/css/css-tables/tentative/caption.html new file mode 100644 index 0000000000..e733285901 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/tentative/caption.html @@ -0,0 +1,137 @@ + + + + +caption + + + + + + + +

Caption sizing and positioning

+

There is a fundamental disagreement between Chrome Legacy and Firefox on caption size influence on table width. Chrome uses caption min width as lower limit of table's grid box, FF does not. Firefox also does not support multiple captions.

+ +
+ +

Caption width limits

+ +

Caption minmax and grid width +caption.min is lower limit of grid min.

+ + + +
auto
+ +

Caption.min vs caption.css_width +Caption.css_width is upper limit of caption.min +Caption.css_width is lower limit of caption.min +

+ + + +
auto
+ + + +
auto
+ + +

Caption width:50% +Percent width is resolved wrt to table width.

+ + + +
auto
+ + + + +
auto
+ +

Caption and size of empty table + Larger of table borders, and caption min size.

+ + +
c
c
+ +

Caption height:80% +github spec issue. +TablesNG will not resolve percentage heights per spec. FF agrees. +

+ + + +
auto
+ +

Multiple captions +Do we allow multiple captions? There are 4 in this test.

+ + + + + + +
over1over2under1under2
2 above me, 2 below me?
+

Caption margins +Margins between captions do not collapse

+ + + +
20px margins
1 caption
+ + + + +
20px margins20px margins
2 captions
+ + +

Caption margins auto +auto margins center captions that are less wide than the table. +

+ + + +
auto margins
1 caption
+ + + +
auto margins
1 caption
+ + +

Vertical writing mode caption +

+ + + + + +
vertical
caption bigger than table
vertical!
+ +
+ diff --git a/testing/web-platform/tests/css/css-tables/tentative/col-collapse-table-size.html b/testing/web-platform/tests/css/css-tables/tentative/col-collapse-table-size.html new file mode 100644 index 0000000000..a28a1e204a --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/tentative/col-collapse-table-size.html @@ -0,0 +1,88 @@ + + + + +col visibility:collapse and minmax sizes + + + + + +

Interactions between <COL> visiblity:collapse, and table inline size

+

What happens to the table size when column collapses? Should the space taken up by the table + remain the same, but the table iteslf should shrink?

+

Hovering over tables will turn off column collapsing

+
+ +

+Tables to the right are absolutely positioned

+ + + + +
absolute, right:0
+ + + + + + +
caption
absolute, right:0
+ +

Inline tables

+ + + + + +
caption
after +

+ + + + + +
td
after + +

Table as a flex item

+ +
+ + + + + +
td
+
+
+
+ + diff --git a/testing/web-platform/tests/css/css-tables/tentative/colgroup-col.html b/testing/web-platform/tests/css/css-tables/tentative/colgroup-col.html new file mode 100644 index 0000000000..40fbefee20 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/tentative/colgroup-col.html @@ -0,0 +1,122 @@ + + + + +COLGROUP/COL + + + + + + + + +
+

Colgroup col widths

+
    +
  1. colgroup's purpose is to "group" cols
    2. +
  2. one can think of colgroup as always generating max(colgroup.span,1) cols, unless it has <col> children.
    3. +
  3. colgroup css_width specifies width of generated cols.
    4. +
  4. col.css_width can override colgroup width
    5. +
+

colgroups with spans

+ + + + + + + + +
cg1cg2cg2cg2
50px
+ +

cols with spans

+ + + + + + + + +
col1col2col2col2
50px
+ +

colgroups with cols

+ + + + + + + + + + +
cgcol1col2
50px
+ +

colgroups with cols with spans

+

Legacy fails col with span inside colgroup test.

+ + + + + + + + + + + + + + +
cg1col1col1cg2cg2
50px
+ +

0% cols are ignored

+ + + + + + + + + +
+
01234
+ 		+
+
+ + + + + + + + + +
+
01234
+ 		+
+
+ +
+ + diff --git a/testing/web-platform/tests/css/css-tables/tentative/colspan-redistribution.html b/testing/web-platform/tests/css/css-tables/tentative/colspan-redistribution.html new file mode 100644 index 0000000000..3c4d57c142 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/tentative/colspan-redistribution.html @@ -0,0 +1,621 @@ + +COLSPAN redistribution + + + + + + + +
+

Colspan>1 width redistribution

+

TD with colspan>1 redistributes its min/max/percent widths to the spanned cells.

+

Creating explainable tests with percentage cells is complicated. Cell's percentage cannot be observed directly, but must be inferred from td+table widths. Rules that govern relationship between table grid width and percentage cell width are:

+
    +
  1. Rule#1, Each percentage column sets the floor for maximum table width. That table width is column.min_width / column.percent * 100.
    Ex: 20px wide column, with 20% width, implies that the entire table must be at least 100px wide.
    2. +
  2. Rule#2, Sum of all percentages, combined with sum of widths of all non-percentages sets the floor maximum table widths.
    Let P% be sum of all percentages, and Fpx sum of widths of all non-percentage columns. Maximum table width = Fpx * (1 + (100-P%)/P%).
    + Ex: if percentage columns are 20%, and non-percentage columns are 100px, implies that that 80% is at least 100px, and that the entire table is at least 125px. +
    3. +
+

Test design

+

All examples have border-spacing:8, td.padding:0.

+

Tests are mostly tables with 2 rows. 1st row are the columns, 2nd row is the colspan>1 column being distributed. Most test's colspan>1 cell colspan encloses all cells except the last one. Each test is accompanied by test description. Test description contains:

+
    +
  1. First line describes the test geometry: cell:css/min/max. C1:20%/20px means width:20%, intrinsic min width 20px. If max is omitted, min == max.
    2. +
  2. Second line describes algorithm being tested in detail
    3. +
  3. Third line describes computation that generates the result.
    4. +
  4. Red paragraphs are major browser disagreements
    5. +
+ +

Colspan>1 cell's percentage distribution auto tables

+

Rules

+
    +
  • Percentages can only be redistributed to non-percentage cells.
    • +
  • If percentage does not get redistributed, treat colspan>1 cell width as Auto
    • +
  • If all columns are empty (no max width), redistribute percentage evenly.
    • +
+ +

C0:10%/20px C1:10%/20px C2:auto +No colspan>1 cells, shows what table looks like without colspan>1 cell distribution. +Table width by rule#1, 20px/0.1(10%) + 4*8 => 232px. Excess table width is distributed to auto cell.

+ + + + + + +
x
x
x
+ +

Colspan>1:40%/Auto C0:10%/20px C1:10%/20px C2:auto +Percentage does not get redistributed because all columns are percentages. +Table width by rule#1 same as previous example.

+ + + + + + + + + +
x
x
x
40%
+ +

Colspan>1:20%/100px C0:Auto/0 C1:Auto/0 C2:Auto/Auto +Percentage gets redistributed evenly to empty cells. +Each cell gets 10%, then (100-8)/2=>46px min width. Table min width is 46/0.1(10%) + 4*8 => 460 + 32 => 492

+

Chrome Legacy is wrong, 1st span cell gets all the width. FF/Edge agree.

+ + + + + + + + +
x
100px
+ +

Colspan>1: 19%/200px colspan>1 cell, C0: 20%.20px, C1: 80px/80px +Percentage is not getting redistributed, because column% > colspan>1%

+ + + + + + + + +
20
80
208
+ +

Colspan>1 cell's percentage distribution fixed tables

+

Colspan cells distribute width over col widths. +

Rules

+
    +
  • Percentages are not distributed to fixed columns.
    • +
  • Percentages are not distributed to percentage columns.
    • +
  • Percentages are distributed to auto columns, each column gets distributed%/colspan percent.
    • +
+

Auto column distribution +auto colums get percentage widths distributed evenly. +C0/C1 become 25% columns. +Assignable table size is 400-4*8=368. Column size is 25% of 368 = 92px

+

FF disagrees in how border-spacing is handled and ends up with slightly different cell widths.

+ + + + + + + + + + + + +
50%a
aaaa
+ +

Fixed column distribution +fixed columns do not get percentage distribution.

+ + + + + + + + + + + + +
50%a
aaa
+ +

Percentage column distribution +percentage columns do not get percentage distribution.

+ + + + + + + + + + + + +
50%a
aaa
+ +

Distribute over percentage/auto/fixed mix cells +Collspanned TD distributes 50%. Auto TD gets 50%/(colspanned span = 4): 12.5% +12.5%* 400px is 50. +

+ + + + + + + + + + + + + + + + +
50%a
aaaa
+ +

Colspan>1 cell's minimum width distribution

+

All unconstrained columns

+ +

Colspan>1: Auto/300px C0:Auto/75pxpx C1:Auto:25px; C2:20px/Auto +Basic distribution over auto columns, cells grow evenly. +Distribute 300-8=292 proportional to maxwidth. C0 gets 75/100*292=219.

+ + + + + + + + + +
75px
25px
x
300px min
+ +

Colspan>1: 260px/300px C0:Auto/100px C1:Auto/100px C2:Auto/Auto +Colspan>1 cell min width wins over css width. +Table width same as previous example.

+ + + + + + + + + +
100px
100px
x
300px min
+ +

All fixed columns

+
  • column gets min_width proportional to its max width. + +

    Colspan>1: 260/300 C0:100/50/100 C1:100/100 C2:20/Auto +Distribute surplus proportional to max width. +Colspan>1 is distributing 292, surplus 92, each column gets 46. +

    + + + + + + + + + +
    50
    50
    100px
    		x
    300px min
    + +

    Colspan>1: 300/300 C0:100/25 C1:100/75 C2:20/Auto +Column minimum width is less than its CSS width. +Just like last example, both columns get 46. + + + + + + + + + +
    25px
    75px
    x
    300px min
    + +

    Colspan>1: 300/300 C0:20/100 C1:100/75 C2:20/Auto +First column's min width > css width. +Like last example, each column minimum width increases in proportion to the max.

    +

    Chrome differs from FF/Edge. It distributes min-width in proportion to css width, not max width

    + + + + + + + + + +
    20/100px
    40/100px
    		x
    300px min
    + +

    All percent columns

    +
      +
    • min width never gets smaller than it started. +
    • min width becomes cell.percent/cells.percent * colspan>1_cell.min_width
      • +
    • max width becomes cell.percent/cells.percent * colspan>1_cell.max_width
      • +
    + +

    Colspan>1:Auto/300px C0:25%/50 C1:25%/30 C2:20/Auto +Colspan>1 min width gets distributed proportional to percentage (not min/max width). +Columns get min_width = 146, causes table width of 146/0.25 + 4*8 = 616. + + + + + + + + + +
    25%/50
    25%/30
    		x
    300px min
    + +

    Colspan>1:Auto/400px C0:20%/50 C1:60%/50 C2:20/Auto. +Colspan>1 min width gets distributed proportional to percentage (not min/max width). +Cells get 98/294, table by rule#1 98px/0.2 + 32 = 522

    +

    Edge disagrees, table is 870

    +
    + + + + + + + + + +
    20%/50px
    60%/50px
    		x
    400px min
    +
    + +

    Colspan>1:Auto/468 C0:50%/150 C1:30%/150 C2:20/Auto +This tests conflict resolution where min-width > redistributed min width. +Colspanned redistribution: distributed 468-8 = 460 over C0/C1 +Colspanned 468px needs to distribute 460px over C0/C1. +C0 percent size is 50% * 460 = 230 +C1 percent size is 30% * 460 = 138, defaults to min size of 150 +Column 1 size is 230 + 50%/80% * 80 = 280px +Column 2 size is 150 + 30%/80% * 80 = 180px +Column 3 remains 20px +Assignable table inline size +C1 dominates estimate: 180/30% + 4*8 = 632 +Compute final column widths from assignable table size: +C0 = 50% of 600 = 300 C1 = 30% of 600 = 180 , C2 gets the remaining 120

    + + + + + + + + + +
    50%/150px
    30%/150px
    		x
    408px min
    + + +

    Colspan>1:Auto/400px C0:50%/75px/125px, C1:30%/75px/125px C2:20px/Auto +Colspan>1 cell distribution over different percentages. +400-8px min width gets redistributed as 245/147 (no min width limits) +

    +

    Edge is different, table is 685 instead of 522.

    + + + + + + + + + +
    50%/75
    /125
    30%/75
    /125
    		x
    400px min
    + +

    Auto/fixed mix columns

    +

    Colspan>1: Auto/500; C0: Auto/40 C1:150/100 +Colspan>1 excess min: 500-140-8=352; excess max: 500-190-8=302 +Initial min/max C0:40/40, C1:100/150 +Excess is distributed to Auto C0:392/342, C1:100/150 +Assignable width is 492. C0 gets 342, C1 get max:150 +Chrome Legacy does something very different to arrive at the same answer. +Initial min/max is the same. +Min gets distributed to C0 and C1 in proportion to max_width: C0:342/40 C1:150/150, +Min also gets clamped to css width. This is the key difference betweeen NG +and Legacy code. NG cannot clamp to css width, because it is not available. +Max gets distributed to both in proportion to max_width: C0:342/103 C1:150/389 +Assignable table width is: 492 (sum of min), min gets used as final width. + +Analysis: colspan>1 cell distribution over fixed/auto. +Legacy incorrectly distributes minmax over both fixed and auto cells +in proportion to max width,and clamps min to css width. + +This width becomes final width for auto tables without any further distribution. +FF distributes min only over auto, and max over auto. +Final distribution uses Guess 2 rules: start off with Auto(min), Fixed(max), +distribute excess to Auto. Ends up with the same result as Legacy.

    + + + + + + + + +
    +
    Auto
    		 +
    150
    +
    500
    +

    C0:70/Auto C1:70/Auto C2:Auto/50 +This testcase demonstrates how Legacy Chrome handling of min widths is broken. +There are 2 fixed columns, and 1 auto. The width of fixed columns should be +the same, but is not. The problem happens when min-width of fixed columns is +less than fixed width, and there are auto columns.

    + +

    Chrome Legacy incorrectly assigns minimum width to C0/C1 +to css width of 70. It does compute assignable table width correctly +as 166 px. This violates the invariant: +assignable table width >= sum of min widths. +Chrome resolves invariant violation by truncating one fixed width column +below its minimum width.

    + + + + + + + + + +
    00
    50
    +
    + +

    Percentage/fixed mix columns

    +

    The Legacy code that deals with this is confusing, it tries to redistribute minimum width in proportion to max width, unless there are auto cells. All the browsers disagree on final widths. Some things everyone agrees on: +

  • if there are auto cells, fixed cells do not grow.
    • +

    + +

    Colspan>1:N/A C0:60%/100 C2:100/100 +An example what table looks like without colspan>1 distribution. +Table width by rule#2: (60/(100-60) +1) * 100 = 250 + 24 = 274

    + + + + + +
    60%
    100px
    + +

    Colspan>1:N/A C0:50%/100 C1:50%/100 C2:100/100 +Total column percent is 100%, forcing maximum table grid width by rule #2 to infinity. +Table css width is 1px, overriding grid max width. +Final column width is column's minimum width. +

    +
    + + + + + + +
    50%
    50%
    100px
    +
    + +

    Colspan>1:N/A C0:50%/100 C1:50%/100 C2:100/100 +Same example as above, but table width is auto. +Table grows to size of containing block.

    +
    + + + + + + +
    50%
    50%
    100px
    +
    + +

    Colspan>1: Auto/200px C0:40%/20 C1:50/50 C2:100/20 +Table css width is 1px. This forces grid minimum. +FF: %ge cell gets its percentage width resolved wrt distributing cell. +fixed cells get remaining excess width redistributed in proportion +to max size. +Chrome algorithm: distributes proportionally to min_width. The problem with +this is that 40% cell will end up with 0 if no min width. +

    Edge distributes all the width to the %ge cell, Chrome distributes proportionally to min width.

    + + + + + + + + + +
    40%
    50
    20
    208px min
    + +

    Colspan>1 cell's maximum width distribution

    +
  • Only constrained colspans can distribute max-width over fixed columns
    • + +

    Colspan: constrained. Col: constrained +Constrained colspan redistributes widths over constrained cols. +

    + + + + + + + + + + +
    5050
    200
    +

    Colspan: unconstrained. Col: constrained +Colspan max-width does not get redistributed. +

    + + + + + + + + + + +
    5050
    50
    50
    50
    50
    + +

    Colspan: unconstrained, Col: constrained/% +Colspanned col distributes width over %ge column. +max-guess is 50px + 200px*50% = 150px +distributable_size is 50px +%ge column gets percentage_size + distributable_size = 150px +Later, this makes table 300px wide. +

    +

    FF, Legacy, and TablesNG all disagree about the correct widths. FF feels more like the right answer, but I can't figure out the math behind it.

    + + + + + + + + + + +
    5050
    50
    50
    50
    50
    + +

    Merging cell widths into column widths

    +

    What happens when different types of cells get merged into a single column?

    +

    C0:0 25%/50px C0:1 50%/40px +C0:0 alone would imply table width of 50/.25 = 200px. +C0:1 alone would imply table width of 40/.5 = 80px. +But, largest percentage and largest min width win, so the table width is 50/.5 = 100px. +

    + + + + + + + + + +
    +
    25%/50px
    		Auto
    +
    50%/40
    		Auto
    + +

    Merging fixed and percentage +Column that contains both percent and fixed cells is treated as percent. + + + + + + + + + + + +
    +
    25%/100
    		50px fixedauto
    150AutoAuto
    + +

    Order of colspan>1 cell redistribution +Initial minmax of all cells is 50px. +C0:1 redistributes 200 +C1:2 redistributes 400 +Chrome distributes right-to-left: +C1:2 distributes 400, and C1 and C2 both get 200 +When C0:1 turns come, C0+C1 are already long enough, nothing to distirbute +

    +In testcase /tables/mozilla_expected_failures/core/col_span2.html +distribution right-to-left is described as a bug. +Firefox and Edge both distribute left to right. +Chrome is only one that distributes right to left. +Firefox distribution is not cumulative, it uses original minmax to compute final widths. Edge agrees with TablesNG. +But, mozilla is stable for row reordering.

    +

    + + + + + + + + + + + + + + +
    200
    50
    50
    400
    Auto
    Auto
    		Auto
    + + + + + + + + + + + + + + +
    400
    50
    50
    200
    Auto
    Auto
    		Auto
    +

    Order of colspan>1 cell redistribution +Similar to previous testcase, but colspan is 3, not 2.

    +

    +In testcase /tables/mozilla_expected_failures/core/col_span2.html +distribution right-to-left is described as a bug. +Firefox and Edge both distribute left to right. +TablesNG matches Edge/FF.

    +

    + + + + + + + + + + + + + + + +
    300
    50
    50
    600
    Auto
    Auto
    Auto
    		Auto
    +
    + diff --git a/testing/web-platform/tests/css/css-tables/tentative/column-widths.html b/testing/web-platform/tests/css/css-tables/tentative/column-widths.html new file mode 100644 index 0000000000..b151c2263b --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/tentative/column-widths.html @@ -0,0 +1,300 @@ + +Column widths + + + + + + + +
    +

    Col width

    +

    how does col width interact with td widths to produce final column width?

    +

    Inputs are colgroup/col widths, and td widths. +

    td widths merge, then merge again with col to produce column widths. +

    Output is column min/max/percent w0dths. +

    Colgroup/col has css min_width, css max_width, css percent.

    +

    TD has intrinsic minmax, css width, css percent width, css max width, css min width

    + +

    Initial cell assignment

    + + +

    Unconstrained single TD, table-layout:auto +td.min = minmax.min +td.max = minmax.max

    + + + + +
    min
    min
    + + + + +
    max
    max
    + +

    Unconstrained single TD, table-layout:fixed +td.min = 0 +td.max = minmax.max

    + + + + +
    min
    min
    + + + + +
    max
    max
    + +

    Constrained single TD, table-layout:auto + td.min = minmax.min + td.max = max(minmax.min, css.width) +

    + + + + +
    max
    max
    + + + + +
    max
    max
    + + + + +
    min
    + + + + +
    min
    min
    + + + + +
    min
    min
    + + +

    TD/TD merging

    + +

    TD merging only happens in auto, in fixed only 1st row gets measured

    + +

    Two unconstrained TDs, table-layout:auto or fixed + td.min = max(C0.min, C1.min). always 0 in fixed layout. + td.max = max(C0.max, C1.max) +

    + + + + + + + +
    auto
    max
    auto
    auto
    + + + + + + + +
    auto
    max
    auto
    auto
    + +

    Unconstrained (UN) and constrained (CON) TD + td.min = max(UN.min, CON.min) + td.max = max(UN.min, CON.max) +

    +

    Chrome Legacy and Edge fail this test. They do not limit unconstrained maximum: td.max = max(UN.max, CON.max).

    + + + + + + + +
    min
    min
    + + + + + + + +
    max
    max
    max
    + +

    Two percent TDs + td.percent = max(C1.percent, C2.percent) + td.max = max(C1.max, C2.max) + td.min = max(C1.min, C2.min) +

    + + + + + + + + + +
    60
    		auto
    50
    		auto
    + +

    COL/TD merging

    + +

    col auto td auto +column.min = td.min +column.max = td.max

    + + + +
    auto
    + +

    col fixed td auto + column.min = td.min + column.max = max(col[px], td.min) +

    + + + +
    auto
    + + + +
    110
    110
    + + + +
    min
    + +

    col % td auto +column.min = td.min +column.max = max(td.max, col.max) +column.percent = col[%] + + + + +
    auto
    		40
    + + + + +
    auto
    + + + + +
    auto
    30
    + +

    col auto td percent +column.min = td.min +column.max = td.max +column.percent = td.percent + + + + +
    auto
    10
    + +

    col fixed td percent +column.min = td.min +column.max = max(td.max, col.max) +column.percent = td.percent + + + +
    50
    50
    +
    + + + +
    50
    50
    +
    + +

    col percent td percent +column.min = td.min +column.max = max(td.max, col.max) +column.percent = max(td.percent, col.percent)

    + + + + +
    100
    200
    + + + + +
    100
    200
    + +

    col auto td fixed +column.min = td.min +column.max = td.max

    + + + +
    100
    + +

    col fixed td fixed +column.min = td.min +column.max = max(td.max, col.max)

    + + + +
    100
    + + + +
    100
    + +

    col percent td fixed +column.min = td.min +column.percent = col.percent +column.max = max(td.max, col.max)

    + + + +
    100
    200
    +
    + + + + + +
    10
    200
    + +

    col fixed td fixed inside table-layout:fixed +constrained columns take precedence in fixed layout. + + + + +
    100
    200
    + +

    col percent td fixed inside table-layout:fixed +constrained columns take precedence in fixed layout. + + + + +
    150
    150
    +

    + diff --git a/testing/web-platform/tests/css/css-tables/tentative/element-sizing.html b/testing/web-platform/tests/css/css-tables/tentative/element-sizing.html new file mode 100644 index 0000000000..77e153ce3a --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/tentative/element-sizing.html @@ -0,0 +1,34 @@ + + + + +TABLE fragment sizes + + + +
    +

    TBODY/TR Element sizes and border spacing

    +

    Legacy Chrome:TR includes start/end, not before/after. 1st TBODY includes before/after, 2nd TBODY includes only after, not before.

    +

    Firefox: TR/TBODY do not include start/end before/after.

    +

    Proposal: match firefox

    + + + + + + + +
    0,0
    + +

    TR width is used for TD's percentage resolution

    + + + + + + +
    0,0
    +
    + diff --git a/testing/web-platform/tests/css/css-tables/tentative/paint/background-image-column-collapsed-ref.html b/testing/web-platform/tests/css/css-tables/tentative/paint/background-image-column-collapsed-ref.html new file mode 100644 index 0000000000..b3b1ce9ff3 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/tentative/paint/background-image-column-collapsed-ref.html @@ -0,0 +1,30 @@ + + + +
    +
    +
    +
    +
    +
    +
    + +
    diff --git a/testing/web-platform/tests/css/css-tables/tentative/paint/background-image-column-collapsed.html b/testing/web-platform/tests/css/css-tables/tentative/paint/background-image-column-collapsed.html new file mode 100644 index 0000000000..6e6ae7a82c --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/tentative/paint/background-image-column-collapsed.html @@ -0,0 +1,68 @@ + +Table collapsed column background image geometry + + + + + +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    +
    + diff --git a/testing/web-platform/tests/css/css-tables/tentative/paint/background-image-column-ref.html b/testing/web-platform/tests/css/css-tables/tentative/paint/background-image-column-ref.html new file mode 100644 index 0000000000..5b04f0074c --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/tentative/paint/background-image-column-ref.html @@ -0,0 +1,44 @@ + + + +
    +
    + +
    +
    +
    +
    + +
    +
    + +
    + +
    +
    +
    +
    + +
    diff --git a/testing/web-platform/tests/css/css-tables/tentative/paint/background-image-column.html b/testing/web-platform/tests/css/css-tables/tentative/paint/background-image-column.html new file mode 100644 index 0000000000..c795aac5ea --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/tentative/paint/background-image-column.html @@ -0,0 +1,56 @@ + +Table column background image geometry + + + + + + +
    + + + + + + + + + + + + + + + + + + + + + +
    +
    + diff --git a/testing/web-platform/tests/css/css-tables/tentative/paint/background-image-row-collapsed-ref.html b/testing/web-platform/tests/css/css-tables/tentative/paint/background-image-row-collapsed-ref.html new file mode 100644 index 0000000000..8ab0992e08 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/tentative/paint/background-image-row-collapsed-ref.html @@ -0,0 +1,60 @@ + + +
    +
    +
    +
    +
    +
    +
    +
    diff --git a/testing/web-platform/tests/css/css-tables/tentative/paint/background-image-row-collapsed.html b/testing/web-platform/tests/css/css-tables/tentative/paint/background-image-row-collapsed.html new file mode 100644 index 0000000000..c70c6abd92 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/tentative/paint/background-image-row-collapsed.html @@ -0,0 +1,53 @@ + +Collapsed table row background image geometry + + + + + +
    + + + + + + + + + + + + + + + + + + + +
    +
    + diff --git a/testing/web-platform/tests/css/css-tables/tentative/paint/background-image-row-ref.html b/testing/web-platform/tests/css/css-tables/tentative/paint/background-image-row-ref.html new file mode 100644 index 0000000000..1150a63e17 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/tentative/paint/background-image-row-ref.html @@ -0,0 +1,68 @@ + + +
    +
    +
    +
    +
    +
    +
    diff --git a/testing/web-platform/tests/css/css-tables/tentative/paint/background-image-row.html b/testing/web-platform/tests/css/css-tables/tentative/paint/background-image-row.html new file mode 100644 index 0000000000..69105e6937 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/tentative/paint/background-image-row.html @@ -0,0 +1,55 @@ + +Table row background image geometry + + + + + + +
    + + + + + + + + + + + + + + + + + + + +
    +
    + diff --git a/testing/web-platform/tests/css/css-tables/tentative/paint/collapsed-border-large-cell-ref.html b/testing/web-platform/tests/css/css-tables/tentative/paint/collapsed-border-large-cell-ref.html new file mode 100644 index 0000000000..40d80cac48 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/tentative/paint/collapsed-border-large-cell-ref.html @@ -0,0 +1,33 @@ + + +
    + +
    +
    + +
    +
    + +
    + +
    + +
    +
    +
    +
    +
    diff --git a/testing/web-platform/tests/css/css-tables/tentative/paint/collapsed-border-large-cell.html b/testing/web-platform/tests/css/css-tables/tentative/paint/collapsed-border-large-cell.html new file mode 100644 index 0000000000..60e1390b7b --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/tentative/paint/collapsed-border-large-cell.html @@ -0,0 +1,39 @@ + +Collapsed borders of large cells + + + + + +
    + + + + + + + + + + + + + + + + +
    +
    diff --git a/testing/web-platform/tests/css/css-tables/tentative/paint/overflow-hidden-table-ref.html b/testing/web-platform/tests/css/css-tables/tentative/paint/overflow-hidden-table-ref.html new file mode 100644 index 0000000000..fca7b4196c --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/tentative/paint/overflow-hidden-table-ref.html @@ -0,0 +1,32 @@ + + +
    +
    +
    +
    +
    +
    +
    +
    +
    caption +
    diff --git a/testing/web-platform/tests/css/css-tables/tentative/paint/overflow-hidden-table.html b/testing/web-platform/tests/css/css-tables/tentative/paint/overflow-hidden-table.html new file mode 100644 index 0000000000..dc252b1652 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/tentative/paint/overflow-hidden-table.html @@ -0,0 +1,37 @@ + +Overflow hidden and captions + + + + + +
    + + + + + +
    +
    +
    +
    +
    caption
    +
    diff --git a/testing/web-platform/tests/css/css-tables/tentative/position-sticky-container.html b/testing/web-platform/tests/css/css-tables/tentative/position-sticky-container.html new file mode 100644 index 0000000000..604b536df1 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/tentative/position-sticky-container.html @@ -0,0 +1,170 @@ + +Table parts sticky containers + + + + + + +
    +
    +
    top
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    h:0,0h:0,1h:0,2
    h:1,0h:1,1h:1,2
    h:2,0h:2,1h:2,2
    b:0,0b:0,1b:0,2
    b:1,0b:1,1b:1,2
    b:2,0b:2,1b:2,2
    f:0,0f:0,1f:0,2
    f:1,0f:1,1f:1,2
    f:2,0f:2,1f:2,2
    +
    bottom
    +
    +
    + diff --git a/testing/web-platform/tests/css/css-tables/tentative/rowspan-height-redistribution.html b/testing/web-platform/tests/css/css-tables/tentative/rowspan-height-redistribution.html new file mode 100644 index 0000000000..364ae321c9 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/tentative/rowspan-height-redistribution.html @@ -0,0 +1,503 @@ + +ROWSPAN redistribution + + + + + + + + +
    +

    ROWSPAN > 1 to row distribution

    +

    The algorithm has not been standardized. This is my understanding of how it works.

    +
      +
    1. rowspan>1 TDs are sorted:
      2. +
        +
      1. If TD span the same rows, taller TD is distributed first.
        2. +
      2. If one TD is fully enclosed by another, inner TD is distributed first.
        3. +
      3. Otherwise, higher TD is distributed first.
        4. +
      +
    2. Each rowspan>1 TD's height is distributed as following
      3. +
        +
      1. rowspan > 1 TDs have height TDh, span N rows. N rows have total height of Rh. TDh - Rh height, Dh, must be distributed as follows.
        2. +
      2. If percentage resolution size is available (this happens when redistributiong table/section height), percentage rows grow to their percentage size, proportional to (percentage size - current size). Dh shrinks by distributed height. Justification: explicit percentage rows should grow to their percentage.
        3. +
      3. Rows that originate rowspan>1 cells get all the Dh height, distributed evenly. Justification: rowspan>1 rows are likely to need to grow later. If there are multiple rowspan>1 cells, there can be multiple originating rows.
        4. +
      4. Unconstrained non-empty rows grow, proportional to their existing height.
        5. +
      5. If all rows are empty, last row gets all the height. Justification: ???
        6. +
      6. Contstrained rows grow in proportion to current height.
        7. +
      +
    +

    It is unclear what the existing ChromeLegacy/FF algorithms do for distribution over rowspan>1 and empty cells. FF special cases "there is no cell originating in the row with owspan=1 and there are at least 2 cells spanning the row. Chrome Legacy also tries to do something similar, but they disagree on what. TablesNG will try to ship without special cases.

    +

    Safari fails most of these tests

    +

    Color scheme

    + + + + + + + + + + + + + + + + + + + + + + + +
    odd rows are yellow
    even rows are orange
    inner divs have a green gradient
    +
    row
    row
    row
    row
    +

    Unconstrained rows

    +

    Rows whose height is not fixed or percent are unconstrained.

    +

    Unconstrained rows +Unconstrained rows are redistributed proportionally. Rows are constrained if their height is fixed, or percent.

    + + + + + + + + + +
    0,0
    0,1
    + +

    Unconstrained rows with zero height do not grow.

    + + + + + + + + + + + +
    0,0
    0,2
    + +

    rowspan>1 is zero height, spanned rows have height.

    + + + + + + + + + + + + + + + +
    1,0
    2,0
    + +

    Unconstrained rows are redistributed proportionally to heights

    + + + + + + + + + +
    0,0
    0,1
    + +

    Fixed rows

    + +

    Constrained fixed rows +do not grow if there are unconstrained ones

    +

    Edge grows constrained rows too

    + + + + + + + + + +
    0,0 30px
    0,1
    + +

    Constrained fixed rows +grow proportionally to their size if there are no unconstrained rows

    + + + + + + + + + + + + +
    20
    20
    40
    + +

    Percent rows

    + +

    Constrained percent rows +grow like unconstrained ones when percent resolution size is undefined.

    +

    FF always treats percent rows as constrained. Chrome legacy does resolve percentage against final height of the table. I do not think that can work. Edge follows NG.

    + + + + + + + + + + +
    0,0 30%
    0,1
    100px
    + + +

    Percent rows with zero height +do not grow.

    +

    Legacy Chrome has a strange gap between rows

    + + + + + + + + + + + +
    0,0
    2,0
    + +

    Order of rowspan distribution

    + + +

    If cells span the same rows, bigger cell is distributed first +Not sure how to test this, I think it is just an optimization, there is no observable effect. +

    FF and Legacy Chrome unexpectedly distribute height evenly between rows in the first test case. Edge and TablesNG do not.

    + + + + + + + + + + + + + +
    bottombottom
    + + + + + + + + + + + + + + + + +
    bottombottom
    + + + + + + + + + + +
    bottombottom
    + + +

    If one cell is fully enclosed by another, inner cell wins. +

    Not in Edge

    + + + + + + + + + + + +
    + +

    First row wins. +rowspan-4 distributes 50 to last empty row, row3. rowspan-3 distributes 100px to only nonempty row, row3. +

    Edge disagrees here.

    + + + + + + + + + + + + + +
    + +

    Rowspan distribution over empty rows.

    + +

    Rowspans that span non-existent rows +Span is truncated so only existing rows are spanned.

    + + + + + + + + + + + + + + + + +
    0,0
    rowspan 5
    1,0
    body 2
    + +

    Rowspan spans only empty rows +Last spanned row gets all the height. +

    Edge distributes height to all empty rows, not just last.

    + + + + + + + + + + + + + + + +
    first row
    last row
    + +

    TD is not considered empty if it has padding, but no content + + + + + + + + + + + + + +
    first row
    last row
    + +

    row with an empty tall cell is not considered empty. +

    + + + + + + + + + + + + + + +
    rowspan
    + +

    Empty rows with border-spacing big enough for rowspan cell +rows are 0 height, cell spans the entire table. + + + + + + + +
    + +

    row with a non-empty rowspan>0 cell is empty. +Distributes to all rows except start row? +

    + + + + + + + + + + + + + +
    rowspan
    rowspan
    + + + + + + + + + + + +
    rowspan
    yo
    + + +

    Distribution over rowspan > 1 rows +Distribution over rowspan > 1 rows + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    + +

    Distribution of table height over rowspan > 1 rows +If there are any unconstrained non-empty rows, they get it. +When all rows are empty, last row takes it

    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    + +

    Distribution of rowspan over percentage rows +Percentage rows are considered empty if they cannot resolve

    + + + + + + + + + + + + + +
    + +
    + diff --git a/testing/web-platform/tests/css/css-tables/tentative/section-no-tbody-fixed-distribution.html b/testing/web-platform/tests/css/css-tables/tentative/section-no-tbody-fixed-distribution.html new file mode 100644 index 0000000000..dd403d248c --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/tentative/section-no-tbody-fixed-distribution.html @@ -0,0 +1,9 @@ + + + +

    Test passes if there is a filled green square.

    +
    +
    +
    +
    +
    diff --git a/testing/web-platform/tests/css/css-tables/tentative/section-no-tbody-percent-distribution.html b/testing/web-platform/tests/css/css-tables/tentative/section-no-tbody-percent-distribution.html new file mode 100644 index 0000000000..d1546b1e38 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/tentative/section-no-tbody-percent-distribution.html @@ -0,0 +1,9 @@ + + + +

    Test passes if there is a filled green square.

    +
    +
    +
    +
    +
    diff --git a/testing/web-platform/tests/css/css-tables/tentative/support/README b/testing/web-platform/tests/css/css-tables/tentative/support/README new file mode 100644 index 0000000000..67e87ca891 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/tentative/support/README @@ -0,0 +1,13 @@ +This test suite is created as part of Chrome's NG table rewrite in 2020. +TablesNG: https://crbug.com/958381 + +Many parts of table layout algorithm have been left unspecified by the +existing specification: +https://www.w3.org/TR/css-tables-3/ + +These tests are an attempt to exaustively test all parts of the +algorithm. When specification did not specify the algorithm, +the proposed algorithm is described in the tests. + +Our goal is that these tests will guide creation of a more complete +table standard. diff --git a/testing/web-platform/tests/css/css-tables/tentative/support/table-tentative.css b/testing/web-platform/tests/css/css-tables/tentative/support/table-tentative.css new file mode 100644 index 0000000000..08d65b2b87 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/tentative/support/table-tentative.css @@ -0,0 +1,34 @@ +/* +Tables-ng test styling. + +Usage: + + +

    Short description here + Analysis +

    Current disagreements between browsers

    +*/ +main td { + padding: 0; +} +.error { + color: #b70000; +} +p { + margin-top:4px; + margin-bottom:4px; +} +body { + counter-reset: testid; +} +.testdesc { + white-space: pre-line; + margin-top: 16px; +} +.testdesc:before { + content: counter(testid) ". "; + counter-increment: testid; +} +.testdesc:first-line { + font-family: monospace; +} diff --git a/testing/web-platform/tests/css/css-tables/tentative/table-fixed-minmax.html b/testing/web-platform/tests/css/css-tables/tentative/table-fixed-minmax.html new file mode 100644 index 0000000000..5be81d2056 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/tentative/table-fixed-minmax.html @@ -0,0 +1,146 @@ + +Table minmax tricks + + + + + +

    Infinite intrinsic table widths

    +

    Originally, algorithm for computing intrinsic table inline size had a special case:
    + If table is fixed, and has a width:%, its intrinsic inline size was "infinite".
    +This ensured that fixed table with 100% width inside block layout would expand to container's width.

    +

    Different containers do not have reasonable handling of intrinsic infinitely sized +children. For those, table's intrinsic size should never be infinite, but instead +default to regular max size.

    + +
    +

    Flexbox

    + +

    flex width:auto

    +
    + + +
    flex
    +
    flex div
    +
    + +

    flex width:max-content

    +
    + + +
    flex
    +
    flex div
    +
    + +

    flex width:min-content

    +
    + + +
    +
    + +
    +
    + + +
    +
    +
    + +

    Grid

    +

    grid width:auto

    +
    + + +
    grid
    +
    +

    grid width:max-content

    +
    + + +
    grid
    +
    + +

    Table

    + + + + +
    + + +
    table
    +
    + +

    Absolute

    +
    + + +
    absolute
    +
    + + diff --git a/testing/web-platform/tests/css/css-tables/tentative/table-height-redistribution.html b/testing/web-platform/tests/css/css-tables/tentative/table-height-redistribution.html new file mode 100644 index 0000000000..c0f48e4f20 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/tentative/table-height-redistribution.html @@ -0,0 +1,317 @@ + +TABLE height redistribution + + + + + + + + +
    +

    Tests for redistribution of table height to row group height.

    +

    This algorithm has not been standardized. Browsers implementations disagree a lot. + Legacy Chrome used to always distribute all the height to the first tbody.

    + +
    Major incompatibility: Legacy:
+- ignores any height set on sections.
+- does not size the table unless section has a TR
+- does not grow sections without TDs
+- only distributes height to the 1st tbody
+FF
+- does not prioritize thead for height distribution most of the time.
+- y offset of multiple tbodies can be incorrect.
+
    + +

    Empty table

    +

    Empty tables always grow to specified height in all browsers.

    +

    no sections

    +
    + +

    no sections, no border spacing

    +
    + +

    collapsed table no sections

    +
    + +

    fixed table no sections

    +
    + +

    One TBODY

    +

    The big difference here is between empty TBODY, and a body with an empty TR

    +
  • FF: always sizes the table, only sizes TBODY if it has TR.
    • +
  • Legacy: does not size the table unless TBODY has TR
    • +

    FF: sizes the table, but tbody size remains 0 unless tbody is not empty.

    +

    Legacy table size remains 0, or border-spacing

    + +

    single empty tbody

    + + +
    + +

    single tbody+tr

    + + +
    + +

    border spacing

    +

    FF/Legacy do not apply border-spacing

    + + +
    + +

    collapsed table

    + + +
    + +

    fixed table

    + + +
    + +

    tbody has fixed height

    +

    FF adds tbody height to table?

    + + +
    + +

    tbody has fixed height > table

    +

    Legacy: table size wins. FF: table size wins, but body grows to 300px?

    + + +
    + +

    tr has fixed height > table

    +

    FF: table size wins, but body is 300.

    + + +
    + +

    tbody has percentage height > table

    + + +
    + +

    tr has percentage height > table

    +

    FF/Legacy: table wins. FF: body is 200px

    + + +
    + +

    non-empty tbody

    + + +
    + +

    non-empty thead

    + + +
    + +

    THEAD TBODY

    + +

    empty thead, empty tbody

    +

    FF thead/tbody both grow

    + + + +
    + +

    sized thead, empty tbody

    + + + +
    thead
    + +

    table layout fixed, thead with td, tbody

    + + + + + + + +
    thead
    x
    + +

    table layout fixed, thead+td, tbody+td

    + + + + + + + +
    thead
    x
    + +

    thead with td

    + + + + + + + + + + +
    thead
    + +

    tfoot with td

    + + + + + + + + + + +
    tfoot
    + +

    Multiple TBODY

    +

    Legacy does not distribute any heights when tr is empty.

    +

    Legacy always distributes everything to 1st tbody.

    + +

    2 tbody

    + + + +
    + +

    2 tbody, with non-empty tds

    +

    Legacy distributes everything to 1st tbody

    + + + +
    x
    x
    + + +

    2 tbody, 40%, auto, no td

    +

    FF: distributes everything to auto when empty. Legacy does not distribute

    + + + +
    + +

    2 tbody, 40%, auto, non-empty td

    + + + +
    x
    x
    + +

    2 tbody, 40px, auto, non-empty td

    +

    FF gets confused with 2nd body placement

    + + + +
    x
    x
    + +

    2 tbody, 40%, 40px, non-empty td

    +

    FF splits evenly

    + + + +
    x
    x
    + +

    Sized THEAD/TBODY

    +

    FF does not prioritize TBODY for distribution

    +

    20px thead, 30px tbody

    + + + + + + + +
    x
    x
    + +

    20px thead's tr, 30px tbody's tr

    + + + + + + + +
    x
    x
    + +

    20px thead's td, 30px tbody's td

    + + + + + + + +
    x
    x
    + +
    + + + diff --git a/testing/web-platform/tests/css/css-tables/tentative/table-minmax.html b/testing/web-platform/tests/css/css-tables/tentative/table-minmax.html new file mode 100644 index 0000000000..eda9ce37fb --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/tentative/table-minmax.html @@ -0,0 +1,144 @@ + +Table minmax tricks + + + + + + + +
    +

    Table minmax

    + +

    How do different layout algorithms deal with table with an infinite max width?`

    + + <table> + <td style="width:100%"><div style="width:30px">100%</div></td> + <td><div style="width:100px">100px</div></td> + </table> + +

    Block layout clamps the max width, but flex/grid/table layouts do not. What happens?

    + +

    Block layout

    +
    + + + +
    100%
    100px
    +
    sibling
    +
    + +

    Block layout with floats

    +
    + What about this? + + + +
    100%
    100px
    +
    sibling
    +
    +
    + + +

    Table layout

    + + + + +
    + + + +
    100%
    50px
    50px
    +
    sibling
    + +

    Flex layout 1 1 auto

    +

    Edge is wider than flexbox

    +
    + + + +
    100%
    50px
    50px
    +
    40px
    +
    + +

    Flex layout 0 0 auto

    + +
    + + + +
    100%
    50px
    50px
    +
    auto
    +
    + +

    Empty table sizes

    +

    Completely empty table

    +
    + +

    Completely empty table with min-content width

    +
    + + +

    Completely empty table with max-content width

    +
    + +

    Completely empty table with width/height

    +
    + +

    Empty table with border spacing

    +

    Edge has width

    +
    + +

    Table with just tbody and border spacing

    +

    Chrome Legacy has width and 1/2 height. Edge has width. Proposal: make table empty.

    + + + +
    + +

    Table with tbody, tr, and border spacing

    +

    Edge has height, 1/2 width. Chrome Legacy has width/height. Proposal: make table empty.

    + + + + +
    + +

    Empty table with borders

    +

    Edge has width 30, height 20

    +
    + +

    Empty table with padding

    +

    Edge has width 30, height 20

    +
    + +

    Empty table with caption

    +
    caption
    +
    + + diff --git a/testing/web-platform/tests/css/css-tables/tentative/table-quirks.html b/testing/web-platform/tests/css/css-tables/tentative/table-quirks.html new file mode 100644 index 0000000000..af2a516c0e --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/tentative/table-quirks.html @@ -0,0 +1,76 @@ + +Table quirks + + + + + + + + + + +

    Tables in quirks mode proposals

    + +

    The table cell height box sizing quirk

    + + + + +
    100 height
    + + + + +
    100 height
    + +

    The table cell nowrap minimum width calculation quirk

    +

    Chrome Legacy, Edge, Safari fail, only FF gets it correct.Proposal: deprecate the quirk

    + + + + +
    nowrap nowrap nowrap nowrap
    + +

    The text decoration doesn’t propagate into tables quirk

    +
    + + +
    decoration
    +
    + +

    The collapsing table quirk

    +

    Chrome Legacy/Edge/Safari ignore the quirk, FF does not. Proposal: depreciate the quirk

    +
    + +

    The table cell width calculation quirk

    + + +
    + + diff --git a/testing/web-platform/tests/css/css-tables/tentative/table-width-redistribution-fixed-padding.html b/testing/web-platform/tests/css/css-tables/tentative/table-width-redistribution-fixed-padding.html new file mode 100644 index 0000000000..097ddacfc3 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/tentative/table-width-redistribution-fixed-padding.html @@ -0,0 +1,267 @@ + +Columns widths fixed + padding + + + + + + + +
    +

    Fixed tables with padding: Compute column computed widths from assignable table width

    + +

    This test is the similar to table-width-redistribution-fixed.html, + except that all cells have 6px padding. The comments in this test refer to padding incompatibilities only.

    + +

    Percentage sizes and box-sizing are handled differently in FF/Chrome. In Chrome, %ge size is always treated as border-box size: column width = % * table width. In FF, box-sizing:content-box, %ge size is % * table width + border_padding, box-sizing:border-box same as Chrome.

    + +

    Fixed only

    + +

    Table: 50px; C0:100/50/100 C1:100/50/100 +When table.css_width is < columns.css_width, how is the conflict resolved? +columns.css_width wins +

    + + + + + +
    +
    50
    50
    		 +
    50
    25
    + +

    Table: 300px; C0:100/100/200 C1:100/90/115 +When table.css_width is > columns.css_width , how is the conflict resolved? +table.css_width wins

    + + + + + +
    +
    100
    100
    		 +
    90
    25
    + +

    Table: 300px; C0:100/50/50 C1:100/100/100 +Fixed cells must grow, but their min widths differ. +Fixed cells grow in proportion to their css width. + + + + + +
    +
    50
    		 +
    100
    + +

    Table: 50px; C0:100/50/50 C1:100/100/100 +What happens when column.min_width > column.css_width +column.css_width wins over column.min_width. + + + + + +
    +
    		+
    + +

    Table: 1px. +What happens to min_width when multiple cells specify css_width of the same column? +1st cell wins. + + + + + + +
    +
    200
    +
    150
    + + +

    Colspan distribution

    + +

    Table: 1px +Does column.min_width change with colspan distribution from later rows to first row? +No + + + + + + + + +
    +
    		+
    +
    + + +

    Colspan header cells

    +
    +
      +
    1. Fixed/percentage colspan cells get distributed evenly.
      2. +
    2. Auto cells. Is the table even fixed?
      3. +
    + +

    Assi: 300px +To make CO distributable width 100, declare it as 100px+8px spacing - 12px padding. +To make C1 distributable width 200, declare it as 220px+8px spacing - 12px padding. +Fixed header cells with colspan get divided evenly. +

    +

    Legacy chrome does not substract border spacing before distribution

    + + + + + + + + + + + +
    108208
    1111
    + +

    Assignable: 400px, C0:40% C1:20% C2:40% +Percentage header cells with colspan. +Colspan cells do not distribute border_padding, they just distribute widths. +C0/1/2/3 will not have border-padding becaouse of colspan, C4 because border-box +TD0 splits +C0/1 get 20% max (40 + padding)/ 2 = 22px, +C2/3 10% and (20 + padding) / 2 = 12px max, +C4 40%, 12px percent border padding, and 52 max + +Assignable width is 440 - 48, everyone gets according to percent. +C0/C1 get 80, C2/C3 get 40, and C4 gets 160. +

    +

    Firefox seems to have a rounding error.

    + + + + + + + + + + + + + +
    AutoAutoAutoAutoAuto
    + +

    Assignable: 1px, C0 Auto/100 colspan=2 , C1 100/Auto +Auto header cells with colspan, table is min width +min_width does not get redistributed. +

    + + + + + + + + + + +
    +
    100
    		100
    xxx
    + +

    Assignable: 200; C0: colspan:2 Auto C1:colspan 8 Auto +Auto colspan cells, and nothing else. Tricky because this means that internally +table has to represent 10 cells, and wide cells that span beyond table width +are usually truncated. +C0: 20*2+8=48, C1: 20*8 + 7*8=216

    + + + + + +
    + +

    Percentage only

    + +

    Assignable: 100px;columns add to 100%, auto width +Column percent adds to a 100, but because box-sizing is content box, +Column content size adds up to table width. +Column border size adds up to table width + padding (36px). +Columns get scaled down. +Scaling down is not defined by standard. FF and NG differ by a px (rounding?). +

    + + + + + + +
    50%30%20%
    + +

    Assignable: 100px;columns add to 50%, auto width +Columns grow proportional to percent. +Slight rounding differences between NG and FF. + + + + + + +
    25%15%10%
    + + +

    Assignable: 100px;columns add to 50%, with min width +Min width is ignored. + + + + + + +
    50
    50
    50
    + +

    Percentage/auto/fixed mix

    + +

    Assignable: 100px;C0:50% C1:100px +Clean split + + + + + +
    50%50px
    + +

    Assignable: 100px;C0:60% C1:60px +Overconstrained: widths add up to 132. +Fixed widths get distributed first, percentage takes the rest. + + + + + + +
    20%60%60px
    +

    + diff --git a/testing/web-platform/tests/css/css-tables/tentative/table-width-redistribution-fixed.html b/testing/web-platform/tests/css/css-tables/tentative/table-width-redistribution-fixed.html new file mode 100644 index 0000000000..4f7cf8ecb3 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/tentative/table-width-redistribution-fixed.html @@ -0,0 +1,374 @@ + +Fixed table final assignable distribution + + + + + + + +
    +

    Fixed tables: Compute column computed widths from assignable table width

    +
      +
    • auto columns have a min width of 0. Max width still gets computed.
      • +
    • percent columns have a min width of 0.
      • +
    • fixed column.min_width is css width. It never changes.
      • +
    • fixed column.max_width is max(cells.max_width, css width).
      • +
    • colspan header cells distribute +
        +
      • max_width evenly between columns.
        • +
      • do not distribute min width
        • +
      • percentage evenly between columns
        • +
      +
      • +
    + +

    Is table treated as fixed?

    +

    table width:auto is not treated as fixed.

    + + + + + +
    200
    min
    +

    table width:px is treated as fixed.

    + + + + + +
    200
    min
    +

    table width:min-content is treated as fixed.

    + + + + + +
    200
    min
    + +

    Fixed only

    + +

    Table: 50px; C0:100/50/100 C1:100/50/75 +When table.css_width is < columns.css_width, how is the conflict resolved? +columns.css_width wins

    + + + + + +
    +
    50
    50
    		 +
    50
    25
    + +

    Table: 300px; C0:100/100/200 C1:100/90/115 +When table.css_width is > columns.css_width , how is the conflict resolved? +table.css_width wins

    + + + + + +
    +
    100
    100
    		 +
    90
    25
    + +

    Table: 300px; C0:100/50/50 C1:100/100/100 +Fixed cells must grow, but their min widths differ. +Fixed cells grow in proportion to their css width. + + + + + +
    +
    50
    		 +
    100
    + +

    Table: 50px; C0:100/50/50 C1:100/100/100 +What happens when column.min_width > column.css_width +column.css_width wins over column.min_width. + + + + + +
    +
    		+
    + +

    Table: 1px. +What happens to min_width when multiple cells specify css_width of the same column? +1st cell wins. + + + + + + +
    +
    200
    +
    150
    + +

    Auto only

    + +

    Width is distributed evenly +

    + + + + + + + + +
    + +

    Colspan distribution

    + +

    Table: 1px +Does column.min_width change with colspan distribution from later rows to first row? +No + + + + + + + + +
    +
    		+
    +
    + +

    Table: 632px +Does column.percent change with colspan distribution? +No. + + + + + + + + + + +
    +
    		+
    +
    		auto
    + +

    Colspan header cells

    +
    +
      +
    1. Fixed/percentage colspan cells get distributed evenly.
      2. +
    2. Auto cells
      3. +
    + +

    Assignable: 400px +Fixed header cells with colspan. +Columns divded evenly

    +

    Legacy Chrome is slightly off, something about spacing and wide cells.

    + + + + + + + + + + + +
    108208
    1111
    + +

    Assignable: 400px, C0:40% C1:20% C2:40% +Percentage header cells with colspan +C0 splits into C0.0 and C0.1, 16px each with 20% +C1 splits into C1.0 and C1.1, 6px each with 10% +Assignable width is 400, everyone gets according to percent. +80/80/40/40/160.

    +

    Firefox is slightly off, with C2 taking 6px more. Unknown what math is used to get this answer.

    + + + + + + + + + + + + + +
    AutoAutoAutoAutoAuto
    + +

    Assignable: 1px, C0 Auto/100 colspan=2 , C1 100/Auto +Auto header cells with colspan, table is min width +min_width does not get redistributed. +

    + + + + + + + + + + +
    +
    100
    		100
    xxx
    + +

    Assignable: 200; C0: colspan:2 Auto C1:colspan 8 Auto +Auto colspan cells, and nothing else. Tricky because this means that internally +table has to represent 8 cells, and wide cells that span beyond table width +are usually truncated. +C0: 20*2+8=48, C1: 20*8 + 7*8=216

    + + + + + +
    + +

    Percentage only

    + +

    Assignable: 100px;columns add to 100%, auto width +Columns are exact percentage size. + + + + + + +
    50%30%20%
    + +

    Assignable: 100px;columns add to 50%, auto width +Columns grow proportional to percent. + + + + + + +
    25%15%10%
    + + +

    Assignable: 100px;columns add to 50%, with min width +Min width is ignored. + + + + + + +
    50
    50
    50
    + +

    Assignable: 100px;columns add to 1000% +Columns are scaled so they add up to 100% + + + + + + +
    50
    50
    50
    + + + +

    Percentage/auto/fixed mix

    + +

    Assignable: 100px;C0:50% C1:100px C2: Auto +C0, C1 get assigned values, C2 fills the rest. + + + + + + +
    50%30px
    + +

    Assignable: 100px;C0:50% C1:50px +Clean split + + + + + +
    50%50px
    + +

    Assignable: 100px;C0:20% C1:60% C2:60px +Overconstrained: widths add up to 140. +Fixed widths get distributed first, percentage takes the rest. + + + + + + +
    20%60%60px
    + +

    Fixed 0-width columns

    +

    Fixed 0-width columns are an exception. They are treated as a mix of fixed and auto columns.

    +
  • If there are only zero-width columns, width is distibuted evenly.
    • +
  • If there are any fixed,percentage, or auto columns, 0-width columns do not grow.
    • +

    Assignable: 100px;C0:0-width, C1:0-width + All 0-width columns grow. +

    + + + + + +
    00
    +

    Assignable: 100px;C0:0-width, C1:auto + 0-width column does not grow. +

    + + + + + +
    00
    +

    Assignable: 100px;C0:0-width, C1:50px + 0-width column does not grow. +

    + + + + + +
    00
    +

    Assignable: 100px;C0:0-width, C1:50% + 0-width column does not grow. +

    + + + + + +
    00
    + +
    + diff --git a/testing/web-platform/tests/css/css-tables/tentative/table-width-redistribution.html b/testing/web-platform/tests/css/css-tables/tentative/table-width-redistribution.html new file mode 100644 index 0000000000..90a89e81a5 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/tentative/table-width-redistribution.html @@ -0,0 +1,351 @@ + +Auto table final assignable distribution + + + + + + + +
    +

    Compute column computed widths from assignable table width

    +

    Test design

    +

    All examples have border-spacing:8, td.padding:0

    + +

    Table css sizing

    + +

    Table: 50px; C0:100/50/100 C1:100/50/100 +When table.css_width is < columns.css_width, column.min_width is lower limit. +

    + + + + + +
    +
    50
    50
    		 +
    50
    25
    + + +

    Table: 300px; C0:100/100/200 C1:100/90/115 +When table.css_width is > columns.css_width , how is the conflict resolved? +table.css_width wins

    + + + + + +
    +
    100
    100
    		 +
    90
    25
    + +

    Content sizings: min|max|fit|fill-available

    + +

    table width:min-content; C0:Auto/50/100 C1:100/50/75 C2:20%/50/75 +

    +

    Edge treats as max-content.

    + + + + + + +
    +
    au
    to
    		 +
    fix
    ed
    		 +
    per
    cent
    + +

    table width:max-content; C0:Auto/50/100 C1:100/50/75 C2:20%/50/75 +Each column gets maximum width. +C0: 100 C1:100 C2: 75 +max-content does not allow for assignable size to be influenced by inverse percent. +Table size is 275 + 32 = 307 +If percent influenced table size, table size would have been 407 +

    + + + + + + +
    +
    50
    50
    		 +
    50
    25
    		 +
    50
    25
    + +

    table width:fit-content; C0:Auto/50/100 C1:100/50/75 C2:20%/50/75 +Percent column determines assignable table width, which gets distributed to all columns. +Assignable width from %: 20%=75, 100%=375

    +

    + + + + + + +
    +
    au
    to
    		 +
    fix
    ed
    		 +
    per
    cent
    + +

    table width:-webkit-fill-available; C0:Auto/50/100 C1:100/50/75 C2:20%/50/75 +

    +

    Edge treats as fit-content

    +
    + + + + + + +
    +
    au
    to
    		 +
    fix
    ed
    		 +
    per
    cent
    +
    + +

    Auto columns distribution

    + +

    Assi:300px C0: Auto/75/75 C1:Auto/25/25 +Non-empty auto cells get surplus width proportionally to their max width. +Guess3: 100. Guess4: 300, diff 200, fixed priority. +C0: 75 + 75/100*200 = 225 C1: 25 + 25/100*200 = 75

    + + + + + +
    75
    25
    +

    Assignable:300px C0: Auto/75/75 C1:Auto/13/25 C2:Auto/0/0 +Empty cells get nothing if there are non-empty auto cells. +Guess3: 100, Guess4: 300; diff 200, fixed priority. +C0: 75 + 75/100*200 = 225 C1: 25 + 25/100*200 = 75; C2: 0 +

    + + + + + + +
    +
    75
    		 +
    13
    12
    + +

    Guess 0: Auto(min), Fixed(min), Percentage(min) to Guess 1.

    + +

    Assi: 1px; C0:Auto/50/100 C1:100/50/100 C2:50%/50/100 +All columns get minimum width. +Guess0: 150 +C0: 50, C1:50, C2: 50

    + + + + + +
    +
    50
    50
    		 +
    50
    50
    		 +
    50
    50
    + +

    Assi: 160px; C0:Auto/50/100 C1:100/50/100 C2:50%/50/100 +%ge column grows. +Guess0: 150, Guess1: 180; diff 10. +C0: 50, C1:50, C2: 50 + 10 * 10/10 = 60

    + + + + + +
    +
    50
    50
    		 +
    50
    50
    		 +
    50
    50
    + +

    Assi: 210px; C0:Auto/50/100 C1:100/50/100 C2:30%/50/100 C3:30%/50/100 +2 %ge columns grow evenly. +Guess 0: 200, Guess 1: 240, diff 10 +C2: 50 + 10 * 70/140 C3: 50 + 10 * 70/140 + + + + + + +
    +
    50
    50
    		 +
    50
    50
    		 +
    50
    50
    		 +
    50
    50
    + +

    Assi: 220px; C0:Auto/50/100 C1:100/50/100 C2:25%/50/100 C3:40%50/100 +%ge columns grow in proportion to increase from previous guess. +Guess 0: 200. C2[G1] = .25*220 = 55 C3[G1] = .4 * 220 = 88 Guess 1: 100 + 55 + 88 = 243 +diff = 220 - 200 = 20. C2 grew 5, C3 grew 38, total grew 43. +C2: 50 + 20 *5/43 = 52.32; C3: 50 + 20 * 38 / 43 = 67.67 + + + + + + +
    +
    50
    50
    		 +
    50
    50
    		 +
    50
    50
    		 +
    50
    50
    + +

    Guess 1 to Guess 2: Auto(min), Percentage(%max) to Fixed(min => max)

    +

    These tests are non-intuitive to evaluate. When table size increases betwee Guess 1 and 2, + although the standard says that fixed columns are growing, %ge columns grow too because their max width depends on table width.

    + +

    Assi:166, C0:Auto/50/100 C1:100/50/100 C2:40%/50/100 +Edge example, Guess 1 %ge cell has grown to the max. +C2: grows to .4*165 = 66.4, table is 166.4+32 = 198.4

    + + + + + + +
    +
    50
    50
    		 +
    50
    50
    		 +
    50
    50
    + +

    Assi:216, C0:Auto/50/100 C1:100/50/100 C2:40%/50 + %ge cell grows to the max, the rest goes to fixed. +Guess 1 size is 50 + 50 + (.4*216=>86.4) = 186.4 +Guess 2 size is 50 + 100 + 86.4 = 236 +Assi - Guess1 = 29.6; C2 = 50 + 29.6 * 50/50 = 79.6 +

    + + + + + + +
    +
    50
    50
    		 +
    50
    50
    		 +
    50
    50
    + +

    Guess 2 to Guess 3: Percentage(%max), Fixed(max), Auto(min=>max)

    + +

    Assi:300 +Guess 2 size is 50 + 100 + .4*300 = 270 +Guess 3 size is 100 + 100 + 120 = 320 +Assi - Guess2 = 30, C0 = 50 + 30 = 80 + + + + + + +
    +
    50
    50
    		 +
    50
    50
    		 +
    50
    50
    + +

    Guess3 to Guess4, Auto(max), Percentage(%max), Fixed(max) grow first available Auto|Fixed|Percent

    + +

    Assi: 500, C0:Auto, C1: Fixed, C2: Percent +Guess 3 is 100 + 100 + .4 * 500 = 400 +C0 gets the 100 + + + + + + +
    +
    50
    50
    		 +
    50
    50
    		 +
    50
    50
    + +

    Assi: 500, C0:Fixed, C1: Fixed, C2: Percent +Guess 3 is 100 + 100 + .4 * 500 = 400, 100 to be redistributed +Fixed cells, C0 and C1 get 50 each. + + + + + + +
    +
    50
    50
    		 +
    50
    50
    		 +
    50
    50
    + +

    Assi: 700, C0:10%/40, C1: 20%/50, C2: 40%/50 +Percentage cells only. +Compute columns as %ge of total width: +C0: 700*10/70, C1: 700*20/70 C2: 700*40/70 + + + + + + +
    +
    40
    		 +
    50
    		 +
    50
    +

    Assi: 600, C0:10%/40, C1: 20%/50, C2: 40%/50, C3: 100%/50 +Percentage cells only. Over 100% columns get their percentage truncated. + + + + + + + +
    +
    40
    		 +
    50
    		 +
    50
    		 +
    50
    +

    C0:20%/60, C1:Auto/50. +Tests table max width from single cell. + + + + + +
    60
    50
    + +

    C0:10%/70, C1:Auto/50. +Table limited to 1px. Tests that single cell specifies max width, not min width. + + + + + +
    60
    50
    + +

    C0:10%/70 border 10px, C1:Auto/50. +Cell border padding do not affect max width. + + + + + +
    60
    50
    +

    + + + diff --git a/testing/web-platform/tests/css/css-tables/tentative/tbody-height-redistribution.html b/testing/web-platform/tests/css/css-tables/tentative/tbody-height-redistribution.html new file mode 100644 index 0000000000..bfd47fa651 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/tentative/tbody-height-redistribution.html @@ -0,0 +1,144 @@ + +TBODY redistribution + + + + + + + +
    +

    TBODY/THEAD/TFOOT height redistribution.

    +
  • FF passes most of the tests. +
  • Legacy Chrome does not distribute TBODY height to rows. +
  • At the time this test was written, there was no spec. Currently, spec is in the process of being written. + +

    1) Empty row group's size is 0 with collapsed borders

    + + + + +
    +

    2) Empty row group's size is 0 with separate borders.

    + + + + +
    +

    3) Row group height is redistributed to unconstrained rows in proportion to their size.

    + + + + + + + + + +
    0,0
    0,0
    +

    4) Constrained fixed rows do not grow if there are unconstrained rows

    + + + + + + + + + +
    0,1
    +

    5) Constrained percentage are resolved against row group height.

    + + + + + + + + + + + + +
    0,0
    0,0
    0,2
    +

    6) Row group height is treated as min-height.

    + + + + + + +
    0,0
    +

    7) Constrained/unconstrained mix: row group height is distributed to unconstrained cells.

    + + + + + + + +
    0,0
    0,1
    0,2
    0,3
    +

    8) Unconstrained empty rows grow to fill table if all other rows are constrained. Not in FF.

    + + + + + + +
    0,0
    0,1
    +
    + + + + + + +
    0,1
    0,2
    +

    9) Empty section height is not ignored

    + + + +
    +

    10) Section with empty rows is not considered empty.

    +

    In FF, empty section height is 100, but table's height is 0?

    + + + + + + +
    +

    11) Mixed constrained and unconstrained empty rows: only unconstrained rows grow.

    + + + + + + +
    +
    • + diff --git a/testing/web-platform/tests/css/css-tables/tentative/td-box-sizing-001.html b/testing/web-platform/tests/css/css-tables/tentative/td-box-sizing-001.html new file mode 100644 index 0000000000..b54eb39f58 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/tentative/td-box-sizing-001.html @@ -0,0 +1,197 @@ + +TD box sizing + + + + + + + +
    +

    TD and box sizing

    + +

    TD defaults to box-sizing: content-box. How does box-sizing affect final TD size?

    +
      +
    1. Auto table layout
      2. +
        +
      1. Percent cells ignore box-sizing, it is always border-box.
        2. +
      2. Fixed cells respect box-sizing.
        3. +
      +
    2. Fixed table layout
      3. +
        +
      1. Percent cells respect box sizing when computing cell width from assignable width.
        2. +
      2. Percent cells ignore box sizing when computing grid max from cell width.
        3. +
      +
    +

    Table-layout: auto

    +

    TD width:%

    +

    content-box, C0:50%/100 C1:Auto +Percent gets resolved to compute grid max size. +C0 max_width is max_width + 2 padding = 100 + 2*20 = 140 +Table width is 1/50%*140 + 3*padding = 280+30 = 310 + + + + + +
    +
    50%/100
    		Auto
    +

    border-box, C0:50%/100 C1:Auto +Same test as above, but box-sizing is border-box. + + + + + +
    +
    50%/100
    		Auto
    +

    content-box, C0:80%/100 C1:Auto +Percent gets resolved to compute final cell size from assignable width. +C0 border box width is 500 * 80% + + + + + +
    +
    80%/100
    		Auto
    + +

    border-box, C0:80%/100 C1:Auto +Same as above, but border-box + + + + + +
    +
    80%/100
    		Auto
    + + +

    TD width:fixed

    + +

    content-box, C0:100/Auto C1:100/Auto +Tests whether box-sizing affects how percentages are computed. +C0 max_width is max_width + 2 padding = 100 + 2*20 = 140 +Table width is 1/50%*140 + 3*padding = 280+30 = 310 + + + + + +
    100100
    + +

    border-box, C0:100/Auto C1:100/Auto +Same test as above, but box-sizing is border-box. + + + + + +
    100100
    + +

    TD height: fixed

    + +

    content-box, C0 height:100px + + + + +
    100 height
    + +

    border-box, C0 height:100px + + + + +
    100 height
    + +

    Table-layout: fixed

    + +

    TD width:%

    + +

    content-box, C0:50%/100 C1:Auto +Percent gets resolved to compute grid max size. +C0 max_width is max_width + 2 padding = 100 + 2*20 = 140 +Table width is 1/50%*140 + 3*padding = 280+30 = 310 + + + + + +
    +
    50%/100
    		Auto
    + +

    border-box, C0:50%/100 C1:Auto +Same test as above, but box-sizing is border-box. + + + + + +
    +
    50%/100
    		Auto
    + +

    content-box, C0:60%/100 C1:Auto +Percent gets resolved to compute final cell size from assignable width. +Assignable width is 530 - 3*10 = 500 +C0 content box width is 500 * 60% + 40px padding = 340 +C1 is 500 - 340 = 160 +

    Legacy/Edge treat %ge TD as border box, and end up with 300px

    + + + + + +
    +
    60%/100
    		Auto
    + +

    border-box, C0:60%/100 C1:Auto +Same as above, but border-box + + + + + +
    +
    80%/100
    		Auto
    + + +

    TD width:fixed

    +

    content-box, C0:100/Auto C1:100/Auto +Tests whether box-sizing affects how percentages are computed. +C0 max_width is max_width + 2 padding = 100 + 2*20 = 140 +Table width is 1/50%*140 + 3*padding = 280+30 = 310 + + + + + +
    100100
    +

    border-box, C0:100/Auto C1:100/Auto +Same test as above, but box-sizing is border-box. + + + + + +
    100100
    +

    + diff --git a/testing/web-platform/tests/css/css-tables/tentative/td-box-sizing-002.html b/testing/web-platform/tests/css/css-tables/tentative/td-box-sizing-002.html new file mode 100644 index 0000000000..5823fc64c6 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/tentative/td-box-sizing-002.html @@ -0,0 +1,123 @@ + + + + + + + +
    +

    box-sizing: default; border-collapse: separate

    + + + + +
    +

    box-sizing: border-box; border-collapse: separate

    + + + + +
    +

    box-sizing: content-box; border-collapse: separate

    + + + + +
    +

    box-sizing: default; border-collapse: collapse

    + + + + +
    +

    box-sizing: border-box; border-collapse: collapse

    + + + + +
    +

    box-sizing: content-box; border-collapse: collapse

    + + + + +
    +

    div with display:table; box-sizing: default; border-collapse: separate

    +
    +
    +
    +

    div with display:table; box-sizing: border-box; border-collapse: separate

    +
    +
    +
    +

    div with display:table;box-sizing: content-box; border-collapse: separate

    +
    +
    +
    + +

    Same tests, but tables are inline.

    +
    + + + + +
    box-sizing: border-box; border-collapse: separate + +
    + + + + +
    box-sizing: content-box; border-collapse: separate
    +
    + + + + +
    box-sizing: border-box; border-collapse: collapse
    +
    + + + + +
    box-sizing: content-box; border-collapse: collapse
    +
    +
    +
    +
    +div with display:inline-table; box-sizing: border-box; +
    +
    +
    +
    +
    +div with display:inline-table;box-sizing: content-box
    +
    + diff --git a/testing/web-platform/tests/css/css-tables/tentative/td-box-sizing-003.html b/testing/web-platform/tests/css/css-tables/tentative/td-box-sizing-003.html new file mode 100644 index 0000000000..40b01471fd --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/tentative/td-box-sizing-003.html @@ -0,0 +1,148 @@ + +TD box sizing + + + + + + + + +
    +

    Tests of intrinsic cell sizing wrt border/padding, and box-sizing.

    +

    box-sizing: content-box; border px; padding px. + + + + + + +
    +
    0,0
    +
    + + + + + + +
    +
    0,0
    +
    + + + + + + +
    +
    0,0
    +
    +

    box-sizing: border-box, border px, padding px. + + + + + + +
    +
    0,0
    +
    + + + + + + +
    +
    0,0
    +
    + + + + + + +
    +
    0,0
    +
    + +

    box-sizing: border-box;padding: px, width px

    +
  • td's intrinsic width must be >= border + padding
    • + + + + + + + + + +
    autoauto
    + +

    box-sizing: border-box; border px; padding %.

    +
  • intrinsic size of % padding is 0. +
  • final size of % padding is computed against table's width. + + + + + + + +
    +
    0,0
    +     		+
    0,0
    +
    + + + + + + + + +
    300px caption
    +
    0,0
    +     		+
    0,0
    +
    + +

    Block percentage resolution of TD children + row fixed height during intrinsic pass

    +
  • Chrome Legacy/Edge/Safari do not use row fixed height for percetage block size resolution.
    • +
  • FF uses row height as %ge resolution size.
    • +
  • Proposal: file an issue on what is the right thing to do.
    • + + + + +
    + y
    +
    + + + + +
    + y
    +
    + + +
    + -- cgit v1.2.3