diff options
author | WPT Sync Bot <josh+wptsync@joshmatthews.net> | 2019-07-08 10:24:12 +0000 |
---|---|---|
committer | WPT Sync Bot <josh+wptsync@joshmatthews.net> | 2019-07-08 13:49:25 +0000 |
commit | fc8f5dd9fd9f0b41348370912a28ddcc539367ac (patch) | |
tree | 44eef0dd2331ef0a002a148cb74f4316a3aad486 /tests/wpt/web-platform-tests/css/css-tables | |
parent | 9939c1ee07496fe6ab6d30781fb6be127f31efc6 (diff) | |
download | servo-fc8f5dd9fd9f0b41348370912a28ddcc539367ac.tar.gz servo-fc8f5dd9fd9f0b41348370912a28ddcc539367ac.zip |
Update web-platform-tests to revision 3387cf524436af6e29ad89b1b04ec94b8a76d4f9
Diffstat (limited to 'tests/wpt/web-platform-tests/css/css-tables')
5 files changed, 406 insertions, 0 deletions
diff --git a/tests/wpt/web-platform-tests/css/css-tables/absolute-tables-001.html b/tests/wpt/web-platform-tests/css/css-tables/absolute-tables-001.html new file mode 100644 index 00000000000..dd401c23790 --- /dev/null +++ b/tests/wpt/web-platform-tests/css/css-tables/absolute-tables-001.html @@ -0,0 +1,90 @@ +<!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="Anders Ruud" href="mailto:andruud@chromium.org"> +<link rel="author" title="David Grogan" href="mailto:dgrogan@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/CSS22/visudet.html#the-width-property" title="See Note in <percentage>"> +<meta name="flags" content="" /> +<meta name="assert" content="percent lengths of an abspos table are resolved against the padding box of the parent" /> +<style> + main div { + position: relative; + border: 5px solid black; + height: 60px; + width: 60px; + padding: 5px 7px 11px 13px; + margin: 10px; + } + + .tbl { + display: table; + background-color: skyblue; + position: absolute; + width: 50%; + height: 50%; + } + + .cell { + display: table-cell; + outline: 1px dashed blue; + } + + .topleft { left: 0; top: 0; } + .topright { right: 0; top: 0; } + .bottomright { right: 0; bottom: 0; } + .bottomleft { left: 0; bottom: 0; } + + .vertical { writing-mode: vertical-lr; } + +</style> +<p>Tests that percent lengths of an absolutely positioned table is resolved +against the <em>padding box</em> of the parent. +<hr> +<output id="log"></output> +<main> +<div> + <span class="tbl topleft" data-expected-client-width=40 data-expected-client-height=38 data-offset-x=0 data-offset-y=0> + <span class="cell" data-expected-client-width=40 data-expected-client-height=38>abc</span> + </span> +</div> +<div> + <span class="tbl topright" data-expected-client-width=40 data-expected-client-height=38 data-offset-x=40 data-offset-y=0> + <span class="cell" data-expected-client-width=40 data-expected-client-height=38>abc</span> + </span> +</div> +<div> + <span class="tbl bottomright" data-expected-client-width=40 data-expected-client-height=38 data-offset-x=40 data-offset-y=38> + <span class="cell" data-expected-client-width=40 data-expected-client-height=38>abc</span> + </span> +</div> +<div> + <span class="tbl bottomleft" data-expected-client-width=40 data-expected-client-height=38 data-offset-x=0 data-offset-y=38> + <span class="cell" data-expected-client-width=40 data-expected-client-height=38>abc</span> + </span> +</div> + +<div class="vertical"> + <span class="tbl topleft" data-expected-client-width=40 data-expected-client-height=38 data-offset-x=0 data-offset-y=0> + <span class="cell" data-expected-client-width=40 data-expected-client-height=38>abc</span> + </span> +</div> +<div class="vertical"> + <span class="tbl topright" data-expected-client-width=40 data-expected-client-height=38 data-offset-x=40 data-offset-y=0> + <span class="cell" data-expected-client-width=40 data-expected-client-height=38>abc</span> + </span> +</div> +<div class="vertical"> + <span class="tbl bottomright" data-expected-client-width=40 data-expected-client-height=38 data-offset-x=40 data-offset-y=38> + <span class="cell" data-expected-client-width=40 data-expected-client-height=38>abc</span> + </span> +</div> +<div class="vertical"> + <span class="tbl bottomleft" data-expected-client-width=40 data-expected-client-height=38 data-offset-x=0 data-offset-y=38> + <span class="cell" data-expected-client-width=40 data-expected-client-height=38>abc</span> + </span> +</div> +</main> +<script> + checkLayout(".tbl"); +</script> diff --git a/tests/wpt/web-platform-tests/css/css-tables/absolute-tables-002.html b/tests/wpt/web-platform-tests/css/css-tables/absolute-tables-002.html new file mode 100644 index 00000000000..a72e2f170e3 --- /dev/null +++ b/tests/wpt/web-platform-tests/css/css-tables/absolute-tables-002.html @@ -0,0 +1,79 @@ +<!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="mailto:dgrogan@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-tables-3/#used-width-of-table"> +<meta name="flags" content="" /> +<meta name="assert" content="When sizing and positioning abspos tables, the intrinsic width is obeyed when the intrinsic width is larger than specified width" /> +<style> +.cb { + position: relative; + height: 200px; + width: 200px; + outline: 2px dashed lightblue; +} + +.table { + background-color: orange; + position: absolute; + width: 50px; + right: 0px; +} + +.cell { + border: 1px solid green; + width: 100px; +} + +.cell > div { + width: 200px; +} + +.vertical { writing-mode: vertical-lr; } +.horizontal { writing-mode: horizontal-tb; } +</style> + +<output id="log"></output> + +<main> +<div class="cb"> + <table class="table" data-expected-width=208 data-offset-x="-8"> + <tr> + <td class="cell"> + <div></div> + </td> + </tr> + </table> +</div> +<div class="cb vertical"> + <table class="table horizontal" data-expected-width=208 data-offset-x="-8"> + <tr> + <td class="cell"> + <div></div> + </td> + </tr> + </table> +</div> +<div class="cb"> + <table class="table vertical" data-expected-width=208 data-offset-x="-8"> + <tr> + <td class="cell"> + <div></div> + </td> + </tr> + </table> +</div> +<div class="cb vertical"> + <table class="table vertical" data-expected-width=208 data-offset-x="-8"> + <tr> + <td class="cell"> + <div></div> + </td> + </tr> + </table> +</div> +</main> +<script> + checkLayout(".table"); +</script> diff --git a/tests/wpt/web-platform-tests/css/css-tables/absolute-tables-003.html b/tests/wpt/web-platform-tests/css/css-tables/absolute-tables-003.html new file mode 100644 index 00000000000..352d8cd6270 --- /dev/null +++ b/tests/wpt/web-platform-tests/css/css-tables/absolute-tables-003.html @@ -0,0 +1,79 @@ +<!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="mailto:dgrogan@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-tables-3/#used-width-of-table"> +<meta name="flags" content="" /> +<meta name="assert" content="When sizing and positioning abspos tables, the specified width is obeyed when the intrinsic width is smaller" /> +<style> +.cb { + position: relative; + height: 200px; + width: 200px; + outline: 2px dashed lightblue; +} + +.table { + background-color: orange; + position: absolute; + width: 50px; + right: 0px; +} + +.cell { + border: 1px solid green; + width: 100px; +} + +.cell > div { + width: 20px; +} + +.vertical { writing-mode: vertical-lr; } +.horizontal { writing-mode: horizontal-tb; } +</style> + +<output id="log"></output> + +<main> +<div class="cb"> + <table class="table" data-expected-width=50 data-offset-x="150"> + <tr> + <td class="cell" data-expected-width=46> + <div></div> + </td> + </tr> + </table> +</div> +<div class="cb vertical"> + <table class="table horizontal" data-expected-width=50 data-offset-x="150"> + <tr> + <td class="cell" data-expected-width=46> + <div></div> + </td> + </tr> + </table> +</div> +<div class="cb"> + <table class="table vertical" data-expected-width=50 data-offset-x="150"> + <tr> + <td class="cell" data-expected-width=46> + <div></div> + </td> + </tr> + </table> +</div> +<div class="cb vertical"> + <table class="table vertical" data-expected-width=50 data-offset-x="150"> + <tr> + <td class="cell" data-expected-width=46> + <div></div> + </td> + </tr> + </table> +</div> +</main> +<script> + checkLayout(".table"); +</script> diff --git a/tests/wpt/web-platform-tests/css/css-tables/absolute-tables-004.html b/tests/wpt/web-platform-tests/css/css-tables/absolute-tables-004.html new file mode 100644 index 00000000000..a74d7dfbd02 --- /dev/null +++ b/tests/wpt/web-platform-tests/css/css-tables/absolute-tables-004.html @@ -0,0 +1,79 @@ +<!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="mailto:dgrogan@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-tables-3/#computing-the-table-height"> +<meta name="flags" content="" /> +<meta name="assert" content="When sizing and positioning abspos tables, the intrinsic height is obeyed when the intrinsic height is larger than specified height" /> +<style> +.cb { + position: relative; + height: 200px; + width: 200px; + outline: 2px dashed lightblue; +} + +.table { + background-color: orange; + position: absolute; + height: 50px; + right: 0px; +} + +.cell { + border: 1px solid green; + height: 100px; +} + +.cell > div { + height: 200px; +} + +.vertical { writing-mode: vertical-lr; } +.horizontal { writing-mode: horizontal-tb; } +</style> + +<output id="log"></output> + +<main> +<div class="cb"> + <table class="table" data-expected-width=8 data-expected-height=208 data-offset-x="192"> + <tr> + <td class="cell"> + <div></div> + </td> + </tr> + </table> +</div> +<div class="cb vertical"> + <table class="table horizontal" data-expected-width=8 data-expected-height=208 data-offset-x="192"> + <tr> + <td class="cell"> + <div></div> + </td> + </tr> + </table> +</div> +<div class="cb"> + <table class="table vertical" data-expected-width=8 data-expected-height=208 data-offset-x="192"> + <tr> + <td class="cell"> + <div></div> + </td> + </tr> + </table> +</div> +<div class="cb vertical"> + <table class="table vertical" data-expected-width=8 data-expected-height=208 data-offset-x="192"> + <tr> + <td class="cell"> + <div></div> + </td> + </tr> + </table> +</div> +</main> +<script> + checkLayout(".table"); +</script> diff --git a/tests/wpt/web-platform-tests/css/css-tables/absolute-tables-005.html b/tests/wpt/web-platform-tests/css/css-tables/absolute-tables-005.html new file mode 100644 index 00000000000..57c3f0dea3a --- /dev/null +++ b/tests/wpt/web-platform-tests/css/css-tables/absolute-tables-005.html @@ -0,0 +1,79 @@ +<!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="mailto:dgrogan@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/css-tables-3/#computing-the-table-height"> +<meta name="flags" content="" /> +<meta name="assert" content="When sizing and positioning abspos tables, the specified height is obeyed when the intrinsic height is smaller" /> +<style> +.cb { + position: relative; + height: 200px; + width: 200px; + outline: 2px dashed lightblue; +} + +.table { + background-color: orange; + position: absolute; + height: 50px; + right: 0px; +} + +.cell { + border: 1px solid green; + height: 100px; +} + +.cell > div { + height: 20px; +} + +.vertical { writing-mode: vertical-lr; } +.horizontal { writing-mode: horizontal-tb; } +</style> + +<output id="log"></output> + +<main> +<div class="cb"> + <table class="table" data-expected-width=8 data-expected-height=108 data-offset-x="192"> + <tr> + <td class="cell"> + <div></div> + </td> + </tr> + </table> +</div> +<div class="cb vertical"> + <table class="table horizontal" data-expected-width=8 data-expected-height=108 data-offset-x="192"> + <tr> + <td class="cell"> + <div></div> + </td> + </tr> + </table> +</div> +<div class="cb"> + <table class="table vertical" data-expected-width=8 data-expected-height=108 data-offset-x="192"> + <tr> + <td class="cell"> + <div></div> + </td> + </tr> + </table> +</div> +<div class="cb vertical"> + <table class="table vertical" data-expected-width=8 data-expected-height=108 data-offset-x="192"> + <tr> + <td class="cell"> + <div></div> + </td> + </tr> + </table> +</div> +</main> +<script> + checkLayout(".table"); +</script> |