diff options
| author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 01:13:33 +0000 |
|---|---|---|
| committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 01:13:33 +0000 |
| commit | 086c044dc34dfc0f74fbe41f4ecb402b2cd34884 (patch) | |
| tree | a4f824bd33cb075dd5aa3eb5a0a94af221bbe83a /testing/web-platform/tests/css/css-tables/tentative | |
| parent | Adding debian version 124.0.1-1. (diff) | |
| download | firefox-086c044dc34dfc0f74fbe41f4ecb402b2cd34884.tar.xz firefox-086c044dc34dfc0f74fbe41f4ecb402b2cd34884.zip | |
Merging upstream version 125.0.1.
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'testing/web-platform/tests/css/css-tables/tentative')
| -rw-r--r-- | testing/web-platform/tests/css/css-tables/tentative/padding-percentage.html | 108 |
1 files changed, 108 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-tables/tentative/padding-percentage.html b/testing/web-platform/tests/css/css-tables/tentative/padding-percentage.html new file mode 100644 index 0000000000..67f8009de3 --- /dev/null +++ b/testing/web-platform/tests/css/css-tables/tentative/padding-percentage.html @@ -0,0 +1,108 @@ +<!DOCTYPE html> +<link rel="author" title="Oriol Brufau" href="obrufau@igalia.com"> +<link rel="match" href="/css/reference/ref-filled-green-100px-square.xht"> +<meta name="assert" content=" + When a table cell has a percentage in the inline axis of the table, + it should resolve against zero when computing the column sizes, + but once we know the final size of the table, it should re-resolve + against that size minus the leading and trailing border spacing. + This matches what Blink and Gecko do (WebKit is different). + + Note that Blink and Gecko disagree in case there is a caption: + Blink still behaves as per above, while Gecko re-resolves against + the sum of column sizes plus the interleaved border spacings. + Due to the lack of interoperability, this test doesn't use captions. +"> + +<style> +table { + border-spacing: 10px 0; +} +td { + padding: 0; +} +td > div { + width: 100px; + height: 25px; + background: red; +} +td > div.green { + position: relative; + background: green; +} +</style> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + +<!-- +There is one column, it's 100px wide. The percentage resolves against +that amount, so the padding becomes 100px. +There is an extra spacing of 10px before the 1st column, +that's why the table has a -110px margin. +--> +<table style="margin-left: -110px"> + <td style="padding-left: 100%"> + <div class="green"></div> + </td> +</table> + +<!-- +The 1st column is 110px wide, the 2nd column is 100px wide. +And they are separated by 10px, so that's a total of 220px. +The percentage resolves against that amount, so the padding +becomes 0.5 * 220px + 10px = 120px. +There is an extra spacing of 10px before the 1st column, +that's why the table has a -130px margin. +--> +<table style="margin-left: -130px"> + <td style="padding-left: calc(50% + 10px)"> + <div class="green"></div> + </td> + <td> + <div></div> + </td> +</table> + +<!-- +There are 3 columns, each one is 100px wide. They are separated by 10px, +so that's a total of 100px * 3 + 10px * 2 = 320px. +The percentage resolves against that amount, so the padding becomes +320px - 100px = 220px. +There is an extra spacing of 10px before the 1st column, +that's why the table has a -230px margin. +--> +<table style="margin-left: -230px"> + <td style="padding-left: calc(100% - 100px)"> + <div class="green"></div> + </td> + <td> + <div></div> + </td> + <td> + <div></div> + </td> +</table> + +<!-- +There are 4 columns, the 1st one is 330px wide, each one of the others +is 100px wide. They are separated by 10px, so that's a total of +330px + 100px * 3 + 10px * 3 = 660px. +The percentage resolves against that amount, so the padding becomes +0.5 * 660px + 230px = 560px. +There is an extra spacing of 10px before the 1st column, +that's why the table has a -570px margin. +--> +<table style="margin-left: -570px"> + <td style="padding-left: calc(50% + 230px)"> + <div class="green"></div> + </td> + <td> + <div></div> + </td> + <td> + <div></div> + </td> + <td> + <div></div> + </td> +</table> |