Repository navigation
feat(layout): lay out display:table, table-row and table-cell - #33
Open
leshchenko1979 wants to merge 1 commit into
Open
leshchenko1979 wants to merge 1 commit into
leshchenko1979 wants to merge 1 commit into
Conversation
Ogre parsed `display: table` but had no table layout at all: every row and
cell was laid out as a block, so a three-column table stacked its cells
vertically and a table inside an auto-height wrapper reported twice its real
height.
Add the four display values, their UA defaults for table/thead/tbody/tfoot/
tr/td/th, and a table layout pass in layout/table.go:
- columns: an explicit cell width is the column's preferred width, a column
without one takes its cells' max-content width, and the result is scaled
down proportionally when it overflows the table or given an equal share of
the slack when it does not - which is what a browser's auto table layout
converges to for the markup people actually write;
- rows: stacked vertically, each as tall as its tallest cell;
- row groups (thead/tbody/tfoot) are transparent for layout;
- a table's height is the sum of its rows, never the definite height the
flex pass hands down, exactly as in CSS;
- cell offsets are relative to their row, so the renderer does not add the
row offset twice;
- rows are mapped to a horizontal main axis, so the intrinsic-size estimator
maxes its cells instead of summing them.
Against Chromium, on the 21-case comparison harness:
08-table 5.15% -> 0.09%
18-table-tr-row2 8.10% -> 0.13%
17-table-div 1.20% -> 1.20% (unaffected, it uses flex, not table)
Not implemented: table-layout: fixed, border-collapse, rowspan, colspan.
Fixes Macawls#28
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Fixes #28.
Problem
display: tablewas parsed and stored but had no consumer anywhere inlayout/: the display enum had notable/table-row/table-cellvalues,ParseDisplaydefaulted everything toblock,tagDefaultshad no UA defaults fortable/tr/td/th, and there was zero table code. Every cell was laid out as a block child, so a three-column table stacked its cells vertically.Measured against Chromium on a 21-case harness (
%of pixels differing by more than 32 per channel):08-table18-table-tr-row217-table-divWhat this adds
Four display values (
table,table-row,table-row-group,table-cell) with their UA defaults fortable/thead/tbody/tfoot/tr/td/th(thalsofont-weight: 700), plus a table layout pass inlayout/table.go:thead/tbody/tfootare transparent for layout.Tests
layout/table_test.go, 7 tests: cells side by side, auto columns sharing the slack, rows stacking and sizing to the tallest cell, the table ignoring a definite container height, an explicit height still winning, row groups being transparent, anddisplay: nonecells not consuming a column. Two of them (cell-offset relativity and the auto-height wrapper) were verified to fail on the pre-fix code.go test ./...andgo vet ./...pass. Existing golden SVGs are unchanged.Not implemented
table-layout: fixed,border-collapse,rowspan,colspan. The cases above need none of them, and guessing atborder-collapsewould change the geometry of every bordered table.