Skip to content

GitLab

T
tangled
Commit efd02536 authored by David Grogan's avatar David Grogan Committed by Commit Bot
Browse files
Options

[css-tables] Some interop tests 

The spec doesn't address some behavior that has interop. It also doesn't
address some related behavior that doesn't have interop. These tests
demonstrate both. Hopeful to spur some discussion on
https://github.com/w3c/csswg-drafts/issues/3336

Normally a cell with % width is resized based on an initial measure of
the table's intrinsic widths. But this is not done when the table is
itself inside of a table cell. Engines agree on this but it's not in the
specification.

Engines don't agree on ignoring this step when the table is inside a
shrink-to-fit block. Edge and Chrome perform the step, FF doesn't.

Bug: 613705
Change-Id: I4733b693bed754c3924fe357cdc6d5198d7613df
Reviewed-on: https://chromium-review.googlesource.com/c/1343530Reviewed-by: default avatarMorten Stenshorne <mstensho@chromium.org>
Commit-Queue: David Grogan <dgrogan@chromium.org>
Cr-Commit-Position: refs/heads/master@{#609897}
parent 7b918d9c
Hide whitespace changes
Inline Side-by-side
Showing with 34 additions and 28 deletions
third_party/WebKit/LayoutTests/fast/table/inner-percent-width-doesnt-affect-outer-columns.html → third_party/WebKit/LayoutTests/external/wpt/css/css-tables/percent-width-ignored-001.tentative.html
View file @ efd02536
<!DOCTYPE html> <!DOCTYPE html>
<script src='/resources/testharness.js'></script>
<script src='/resources/testharnessreport.js'></script>
<script src='/resources/check-layout-th.js'></script>
<link rel="author" title="David Grogan" href="dgrogan@chromium.org">
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/3336">
<meta name="flags" content="" />
<meta name="assert" content="A cell's percent width is ignored when its table is nested in another cell" />
No red should show. Yellow and blue rectangles are in proportion to their No red should show. Yellow and blue rectangles are in proportion to their
contents' intrinsic widths, not affected by yellow's percent-width bloating the contents' intrinsic widths, not affected by yellow's percent-width bloating the
inner table. inner table.
...@@ -14,7 +21,6 @@ inner table. ...@@ -14,7 +21,6 @@ inner table.
<div style="width:40px; height:150px;"></div> <div style="width:40px; height:150px;"></div>
</td> </td>
</table> </table>
<script src="../../resources/check-layout.js"></script>
<script> <script>
checkLayout('#outerTable'); checkLayout('#outerTable');
</script> </script>
third_party/WebKit/LayoutTests/external/wpt/css/css-tables/percent-width-ignored-002.tentative.html 0 → 100644
View file @ efd02536
<!DOCTYPE html>
<script src='/resources/testharness.js'></script>
<script src='/resources/testharnessreport.js'></script>
<script src='/resources/check-layout-th.js'></script>
<link rel="author" title="David Grogan" href="dgrogan@chromium.org">
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/3336">
<meta name="flags" content="" />
<meta name="assert" content="Should cell's percent width be ignored when its table is nested in a shrink to fit block?" />
<p>Edge 44.17763 and Chrome 70 make this 300px wide. FF makes it 150px wide.</p>
<div id="stf" style="position:absolute; background:blue;" data-expected-width=300>
<table cellspacing="0" cellpadding="0">
<td style="width:50%;">
<div style="width:150px; height:150px;"></div>
</td>
</table>
</div>
<script>
checkLayout('#stf');
</script>
third_party/WebKit/LayoutTests/fast/table/inner-percent-width-doesnt-affect-ancestor-columns.html → third_party/WebKit/LayoutTests/external/wpt/css/css-tables/percent-width-ignored-003.tentative.html
View file @ efd02536
<!DOCTYPE html> <!DOCTYPE html>
This should be identical to <a href="inner-percent-width-doesnt-affect-outer-columns.html">inner-percent-width-doesnt-affect-outer-columns.html</a> <script src='/resources/testharness.js'></script>
<script src='/resources/testharnessreport.js'></script>
<script src='/resources/check-layout-th.js'></script>
<link rel="author" title="David Grogan" href="dgrogan@chromium.org">
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/3336">
<meta name="flags" content="" />
<meta name="assert" content="A cell's percent width is ignored when its table is nested in another cell, even if there's an intermediate block." />
Engines render this same as without the intermediate background:blue block -- yellow 1% width is ignored.
<table id="outerTable" style="width: 300px" cellspacing="0" cellpadding="0"> <table id="outerTable" style="width: 300px" cellspacing="0" cellpadding="0">
<td style="background:red;"> <td style="background:red;">
<div style="background:blue"> <div style="background:blue">
...@@ -14,7 +21,6 @@ This should be identical to <a href="inner-percent-width-doesnt-affect-outer-col ...@@ -14,7 +21,6 @@ This should be identical to <a href="inner-percent-width-doesnt-affect-outer-col
<div style="width:40px; height:150px;"></div> <div style="width:40px; height:150px;"></div>
</td> </td>
</table> </table>
<script src="../../resources/check-layout.js"></script>
<script> <script>
checkLayout('#outerTable'); checkLayout('#outerTable');
</script> </script>
third_party/WebKit/LayoutTests/fast/table/inner-percent-width-affects-outer-floated-div-expected.txt deleted 100644 → 0
View file @ 7b918d9c
There should be a blue square below. Inner table's percent-driven width should affect the shrink-to-fit div.
PASS
third_party/WebKit/LayoutTests/fast/table/inner-percent-width-affects-outer-floated-div.html deleted 100644 → 0
View file @ 7b918d9c
<!DOCTYPE html>
<p>There should be a blue square below. Inner table's percent-driven width
should affect the shrink-to-fit div.</p>
<div style="float:left; background:blue;" data-expected-width=200 id="outerDiv">
<table cellspacing="0" cellpadding="0">
<td style="width:20%;">
<div style="width:40px; height:200px;"></div>
</td>
<td></td>
</table>
</div>
<script src="../../resources/check-layout.js"></script>
<script>
checkLayout('#outerDiv');
</script>
third_party/WebKit/LayoutTests/fast/table/inner-percent-width-doesnt-affect-ancestor-columns-expected.txt deleted 100644 → 0
View file @ 7b918d9c
This should be identical to inner-percent-width-doesnt-affect-outer-columns.html
PASS
third_party/WebKit/LayoutTests/fast/table/inner-percent-width-doesnt-affect-outer-columns-expected.txt deleted 100644 → 0
View file @ 7b918d9c
No red should show. Yellow and blue rectangles are in proportion to their contents' intrinsic widths, not affected by yellow's percent-width bloating the inner table.
PASS
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