Fix NG table collapsed border pixel-snapping and clipping

This fixes the following issues: - We missed pixel-snapping of the collapsed borders. Add ObjectPainterBase::DrawBoxSide() which accepts IntRect instead of float parameters. Previously if the float parameters were not pixel-snapped, they would be converted to int by truncating which implicitly snapped to whole pixels incorrectly. - We missed pixel-snapping and shrinking by border outsets for the clip when painting background for layered table parts. Combine the clip logic for cell background and other table part background with correct pixel-snapping and clip rect, with a test. Bug: 1180773 Change-Id: I81a967b3de08c116eed97a08e0f608a966088f40 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2717524 Commit-Queue: Xianzhu Wang <wangxianzhu@chromium.org> Reviewed-by: Aleks Totic <atotic@chromium.org> Reviewed-by: Stephen Chenney <schenney@chromium.org> Cr-Commit-Position: refs/heads/master@{#857955}
web-platform-tests · Feb 26, 2021 · 2ea2e7e · 2ea2e7e
1 parent ebb9991
commit 2ea2e7e
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 0 deletions.
diff --git a/css/css-tables/collapsed-border-positioned-tr-td-ref.html b/css/css-tables/collapsed-border-positioned-tr-td-ref.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<style>
+td {
+  width: 50.6px;
+  height: 50.3px;
+  background: yellow;
+  padding: 0;
+  border: 1px solid blue;
+}
+</style>
+<table style="border-collapse: collapse">
+  <tr>
+    <td></td><td></td><td></td>
+  </tr>
+  <tr>
+    <td></td><td></td><td></td>
+  </tr>
+</table>
diff --git a/css/css-tables/collapsed-border-positioned-tr-td.html b/css/css-tables/collapsed-border-positioned-tr-td.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<link rel="author" title="Xianzhu Wang" href="mailto:wangxianzhu@chromium.org" />
+<link rel="help" href="https://crbug.com/1180773"/>
+<link rel="match" href="collapsed-border-positioned-tr-td-ref.html"/>
+<style>
+td {
+  width: 50.6px;
+  height: 50.3px;
+  background: yellow;
+  padding: 0;
+  border: 1px solid blue;
+}
+</style>
+<table style="border-collapse: collapse">
+  <tr style="position: relative">
+    <td></td><td></td><td></td>
+  </tr>
+  <tr>
+    <td style="position: relative"></td>
+    <td style="position: relative"></td>
+    <td style="position: relative"></td>
+  </tr>
+</table>