Skip to content

GitLab

T
tangled
Commit 36474571 authored by Aleks Totic's avatar Aleks Totic Committed by Chromium LUCI CQ
Browse files
Options

[TablesNG] Fix background painting for COLGROUP/COL with span attribute 

Span attribute means that COL/COLGROUP span multiple columns.
Old code incorrectly defined background geometry separately
for each column.
This happened because I just ported handling of "width".
width attribute applies to each column within COL/COLGROUP.

New behavior is intuitive, and matches FF.

Change-Id: Ibdd397825ed363de2695f4ff43dd8dd4df065357
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2633438
Commit-Queue: Aleks Totic <atotic@chromium.org>
Reviewed-by: default avatarIan Kilpatrick <ikilpatrick@chromium.org>
Cr-Commit-Position: refs/heads/master@{#845397}
parent 08f415bf
Hide whitespace changes
Inline Side-by-side
Showing with 117 additions and 34 deletions
third_party/blink/renderer/core/layout/ng/table/ng_table_layout_algorithm.cc
View file @ 36474571
......@@ -237,19 +237,15 @@ class ColumnGeometriesBuilder {
wtf_size_t span) {
wtf_size_t end_column_index = start_column_index + span - 1;
DCHECK_LE(end_column_index, column_locations.size() - 1);
LayoutUnit column_width = column_locations[end_column_index].offset +
column_locations[end_column_index].size -
column_locations[start_column_index].offset;
col.GetLayoutBox()->SetLogicalWidth(column_width);
LayoutUnit column_inline_size = column_locations[end_column_index].offset +
column_locations[end_column_index].size -
column_locations[start_column_index].offset;
col.GetLayoutBox()->SetLogicalWidth(column_inline_size);
col.GetLayoutBox()->SetLogicalHeight(table_grid_block_size);
for (unsigned i = 0; i < span; ++i) {
wtf_size_t current_column_index = start_column_index + i;
column_geometries.emplace_back(
current_column_index, /* span */ 1,
column_locations[current_column_index].offset -
border_spacing.inline_size,
column_locations[current_column_index].size, col);
}
column_geometries.emplace_back(start_column_index, span,
column_locations[start_column_index].offset -
border_spacing.inline_size,
column_inline_size, col);
}
void EnterColgroup(const NGLayoutInputNode& colgroup,
......@@ -261,28 +257,16 @@ class ColumnGeometriesBuilder {
bool has_children) {
if (span == 0)
return;
if (has_children) {
wtf_size_t last_column_index = start_column_index + span - 1;
LayoutUnit colgroup_size = column_locations[last_column_index].offset +
column_locations[last_column_index].size -
column_locations[start_column_index].offset;
colgroup.GetLayoutBox()->SetLogicalWidth(colgroup_size);
colgroup.GetLayoutBox()->SetLogicalHeight(table_grid_block_size);
column_geometries.emplace_back(
start_column_index, span,
column_locations[start_column_index].offset -
border_spacing.inline_size,
colgroup_size, colgroup);
} else {
for (unsigned i = 0; i < span; ++i) {
wtf_size_t current_column_index = start_column_index + i;
column_geometries.emplace_back(
current_column_index, /* span */ 1,
column_locations[current_column_index].offset -
border_spacing.inline_size,
column_locations[current_column_index].size, colgroup);
}
}
wtf_size_t last_column_index = start_column_index + span - 1;
LayoutUnit colgroup_size = column_locations[last_column_index].offset +
column_locations[last_column_index].size -
column_locations[start_column_index].offset;
colgroup.GetLayoutBox()->SetLogicalWidth(colgroup_size);
colgroup.GetLayoutBox()->SetLogicalHeight(table_grid_block_size);
column_geometries.emplace_back(start_column_index, span,
column_locations[start_column_index].offset -
border_spacing.inline_size,
colgroup_size, colgroup);
}
void Sort() {
......
third_party/blink/web_tests/TestExpectations
View file @ 36474571
......@@ -675,6 +675,7 @@ crbug.com/353580 external/wpt/css/css-tables/height-distribution/percentage-sizi
crbug.com/1108224 external/wpt/css/css-tables/min-max-size-table-content-box.html [ Failure ]
crbug.com/958381 external/wpt/css/css-tables/tentative/position-sticky-container.html [ Failure ]
crbug.com/958381 external/wpt/css/css-tables/tentative/table-height-redistribution.html [ Failure ]
crbug.com/958381 external/wpt/css/css-tables/tentative/paint/background-image-column-collapsed.html [ Failure ]
# [css-contain]
......
third_party/blink/web_tests/external/wpt/css/css-tables/tentative/paint/background-image-column-collapsed-ref.html 0 → 100644
View file @ 36474571
<!doctype html>
<style>
body {
--peek: LightGreen;
}
.bg {
background-color: var(--peek);
background-image: linear-gradient(90deg, orange 0px, orange 10px, gainsboro 3px, gainsboro 25%, rgba(160,160,160,0.5) 25%, rgba(160,160,160,0.5) 50%, silver 50%, silver 75%, darkgray 75%, darkgray 170px, blue 170px);
background-repeat: no-repeat;
background-size: 50px 200px;
}
main * {
box-sizing: border-box;
}
.td {
width: 50px;
height: 50px;
position:absolute;
}
</style>
<main>
<div style="position: relative;border: 10px solid transparent; width:210px; height: 210px">
<div class="td bg" style="top:-5px;left:-5px;height:200px"></div>
<div class="td bg" style="top:-5px;left:45px;height:200px"></div>
<div class="td" style="background:var(--peek); height:100px; left:95px;top:45px"></div>
<div class="td bg" style="top:-5px;left:145px;height:200px;width:100px;background-size: 100px 200px"></div>
</div>
</main>
third_party/blink/web_tests/external/wpt/css/css-tables/tentative/paint/background-image-column-collapsed.html 0 → 100644
View file @ 36474571
<!DOCTYPE html>
<title>Table collapsed column background image geometry</title>
<link rel="author" title="Aleks Totic" href="atotic@chromium.org" />
<link rel="help" href="https://www.w3.org/TR/css-tables-3/#drawing-backgrounds-and-borders" />
<link rel="match" href="background-image-column-collapsed-ref.html" />
<style>
body {
--peek: LightGreen;
}
.bg {
background-color: var(--peek);
background-image: linear-gradient(90deg, orange 0px, orange 10px, gainsboro 3px, gainsboro 25%, rgba(160,160,160,0.5) 25%, rgba(160,160,160,0.5) 50%, silver 50%, silver 75%, darkgray 75%, darkgray 170px, blue 170px);
background-repeat: no-repeat;
}
main * {
box-sizing: border-box;
}
main table {
border-spacing: 10px;
border: 10px solid transparent;
padding: 10px;
border-collapse: collapse;
}
main table:hover {
border: 10px solid yellow;
}
main td {
width: 50px;
height: 50px;
padding: 0px;
}
</style>
<body>
<main>
<table>
<col class="bg">
<col class="bg">
<col>
<colgroup class="bg" span="2">
<tr>
<td rowspan=4></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td rowspan=2 colspan=2></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</main>
</body>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment