diff options
| author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 00:47:55 +0000 |
|---|---|---|
| committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 00:47:55 +0000 |
| commit | 26a029d407be480d791972afb5975cf62c9360a6 (patch) | |
| tree | f435a8308119effd964b339f76abb83a57c29483 /testing/web-platform/tests/css/css-overflow/overflow-padding.html | |
| parent | Initial commit. (diff) | |
| download | firefox-26a029d407be480d791972afb5975cf62c9360a6.tar.xz firefox-26a029d407be480d791972afb5975cf62c9360a6.zip | |
Adding upstream version 124.0.1.upstream/124.0.1
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'testing/web-platform/tests/css/css-overflow/overflow-padding.html')
| -rw-r--r-- | testing/web-platform/tests/css/css-overflow/overflow-padding.html | 113 |
1 files changed, 113 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-overflow/overflow-padding.html b/testing/web-platform/tests/css/css-overflow/overflow-padding.html new file mode 100644 index 0000000000..2d6efc391a --- /dev/null +++ b/testing/web-platform/tests/css/css-overflow/overflow-padding.html @@ -0,0 +1,113 @@ +<!doctype html> +<link rel="author" title="Aleks Totic" href="mailto:atotic@chromium.org"> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/129"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1003373"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> +<style> +.container { + --size: 100px; + --padding-size: 30px; + --too-big-size: calc(var(--size) - var(--padding-size) + 1px); + --just-right-size: calc(var(--size) - var(--padding-size)); + overflow:auto; + width: var(--size); + height: var(--size); + padding-right: var(--padding-size); + padding-bottom: var(--padding-size); + background: #DDD; + box-sizing: border-box; + display: inline-block; +} +.big { + width: var(--too-big-size); + height: var(--too-big-size); + background: green; +} +.small { + width: var(--just-right-size); + height: var(--just-right-size); + background: yellow; +} +.bigfont { + font-size: var(--too-big-size); + font-family: Ahem; + line-height: 1; + color:green; +} +.smallfont { + font-size: var(--just-right-size); + font-family: Ahem; + line-height: 1; + color:yellow; +} +.red { + background:red; +} + +</style> +<body onload="runTest()"> +<p><span style="background:green">green</span> blocks get scrollbars, <span style="background:yellow">yellow</span> do not.</p> +<p>Block child gets block and inline padding.</p> +<div class="container" data-scrollbar="hv"> + <div class="big"></div> +</div> +<div class="container" data-scrollbar=""> + <div class="small"></div> +</div> + +<p>Inline child gets block and inline padding.</p> +<div class="container bigfont" data-scrollbar="hv"> + <span>X</span> +</div> +<div class="container" style="font:36px/1 Ahem;color:green" data-scrollbar="hv"> + <span>XX</span><br>XX +</div> +<div class="container smallfont" data-scrollbar=""> + <span>X</span> +</div> + +<p>Inline block child gets block and inline padding.</p> +<div class="container" data-scrollbar="hv"> + <div class="big" style="display:inline-block;vertical-align:bottom;"></div> +</div> +<div class="container" data-scrollbar=""> + <div class="small" style="display:inline-block;vertical-align:bottom;"></div> +</div> + +<p>Padding applies to linebox, not linebox overflow.</p> +<div class="container" data-scrollbar=""> + <div class="small" style="display:inline-block;vertical-align:bottom"> + <div style="height:90px;width:80px;background: rgba(0,0,255,0.3)"></div> + </div> +</div> +<script> + function hasHorizontalScrollbar(el) { + return (el.scrollWidth - el.offsetWidth) > 0; + } + function hasVerticalScrollbar(el) { + return (el.scrollHeight - el.offsetHeight) > 0; + } + // Tests needs to be run after load. + function runTest() { + test(()=> { + let i=0; + for (el of Array.from(document.querySelectorAll(".container"))) { + i++; + el.classList.toggle("red"); + let expected = el.getAttribute("data-scrollbar"); + if (expected.match(/h/)) + assert_true(hasHorizontalScrollbar(el), `horizontal scrollbar ${i}`); + else + assert_false(hasHorizontalScrollbar(el), `horizontal scrollbar ${i}`); + if (expected.match(/v/)) + assert_true(hasVerticalScrollbar(el), `vertical scrollbar ${i}`); + else + assert_false(hasVerticalScrollbar(el), `vertical scrollbar ${i}`); + el.classList.toggle("red"); + } + }, "Container padding is applied approriately to block/inline children."); + } +</script> +</body> |