Bug 1575720 [wpt PR 18604] - Make table's clientWidth/Height include …

…its border sizes., a=testonly Automatic update from web-platform-tests Make table's clientWidth/Height include its border sizes. Blink doesn't have table wrapper box currently while Gecko has it, so this CL tries to mimic the behavior that clientWidth/Height refers to table wrapper box which doesn't have borders applied to itself and table grid box has the borders. This CL adds table's border sizes to clientWidth/Height at |LayoutBox::PixelSnappedClientWidth/Height|. As a result of this CL, table's clientWidth/Height and offsetWidth/Height are equal now, respectively. The corresponding csswg discussion is w3c/csswg-drafts#4245. Bug: 560528, 978019 Change-Id: I2693eaf38b882fe4a41f931ec1312ecf53352f27 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1763510 Commit-Queue: Joonghun Park <[email protected]> Reviewed-by: Koji Ishii <[email protected]> Reviewed-by: Morten Stenshorne <[email protected]> Reviewed-by: David Grogan <[email protected]> Reviewed-by: Mason Freed <[email protected]> Cr-Commit-Position: refs/heads/master@{#701557} -- wpt-commits: 7bc2d379af8ead0a92387253540a6ee2915783a8 wpt-pr: 18604
xeonchen · Oct 14, 2019 · 340e9ea · 340e9ea
1 parent 6a097ad
commit 340e9ea
Show file tree

Hide file tree

Showing 3 changed files with 99 additions and 0 deletions.
diff --git a/testing/web-platform/tests/css/cssom-view/table-border-collapse-client-width-height.html b/testing/web-platform/tests/css/cssom-view/table-border-collapse-client-width-height.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<title>CSSOM Test: Table with border-collapse: collapse's clientWidth/Height</title>
+<link rel="help" href="https://www.w3.org/TR/CSS2/tables.html#model" />
+<link rel="help" href="https://www.w3.org/TR/CSS2/tables.html#collapsing-borders" />
+<link rel="help" href="https://drafts.csswg.org/cssom-view/#extension-to-the-element-interface" />
+<script src=/resources/testharness.js></script>
+<script src=/resources/testharnessreport.js></script>
+<style>
+  table {
+    border-collapse: collapse;
+  }
+  td {
+    border: 8px solid #faa;
+  }
+</style>
+<table>
+  <tbody>
+    <tr>
+      <td>a</td>
+      <td>b</td>
+    </tr>
+    <tr>
+      <td>c</td>
+      <td>d</td>
+    </tr>
+  </tbody>
+</table>
+<script type="text/javascript">
+  var table = document.getElementsByTagName('table')[0];
+  test(function() {
+    assert_equals(table.clientWidth, table.offsetWidth);
+    assert_equals(table.clientHeight, table.offsetHeight);
+  }, "Table's clientWidth/Height and OffsetWidth/Height should be the same");
+</script>
diff --git a/testing/web-platform/tests/css/cssom-view/table-border-separate-client-width-height.html b/testing/web-platform/tests/css/cssom-view/table-border-separate-client-width-height.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<title>CSSOM Test: Table with border-collapse: separate's clientWidth/Height</title>
+<link rel="help" href="https://www.w3.org/TR/CSS2/tables.html#model" />
+<link rel="help" href="https://www.w3.org/TR/CSS2/tables.html#separated-borders" />
+<link rel="help" href="https://drafts.csswg.org/cssom-view/#extension-to-the-element-interface" />
+<script src=/resources/testharness.js></script>
+<script src=/resources/testharnessreport.js></script>
+<style>
+  table {
+    border-collapse: separate;
+  }
+  td {
+    border: 8px solid #faa;
+  }
+</style>
+<table>
+  <tbody>
+    <tr>
+      <td>a</td>
+      <td>b</td>
+    </tr>
+    <tr>
+      <td>c</td>
+      <td>d</td>
+    </tr>
+  </tbody>
+</table>
+<script type="text/javascript">
+  var table = document.getElementsByTagName('table')[0];
+  test(function() {
+    assert_equals(table.clientWidth, table.offsetWidth);
+    assert_equals(table.clientHeight, table.offsetHeight);
+  }, "Table's clientWidth/Height and OffsetWidth/Height should be the same");
+</script>
diff --git a/testing/web-platform/tests/css/cssom-view/table-with-border-client-width-height.html b/testing/web-platform/tests/css/cssom-view/table-with-border-client-width-height.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<title>CSSOM Test: Table with its own specified border's clientWidth/Height</title>
+<link rel="help" href="https://www.w3.org/TR/CSS2/tables.html#model" />
+<link rel="help" href="https://www.w3.org/TR/CSS2/tables.html#separated-borders" />
+<link rel="help" href="https://drafts.csswg.org/cssom-view/#extension-to-the-element-interface" />
+<script src=/resources/testharness.js></script>
+<script src=/resources/testharnessreport.js></script>
+<style>
+  table {
+    border: 8px solid #faa;
+  }
+</style>
+<table>
+  <tbody>
+    <tr>
+      <td>a</td>
+      <td>b</td>
+    </tr>
+    <tr>
+      <td>c</td>
+      <td>d</td>
+    </tr>
+  </tbody>
+</table>
+<script type="text/javascript">
+  var table = document.getElementsByTagName('table')[0];
+  test(function() {
+    assert_equals(table.clientWidth, table.offsetWidth);
+    assert_equals(table.clientHeight, table.offsetHeight);
+  }, "Table's clientWidth/Height and OffsetWidth/Height should be the same");
+</script>