mirror of
https://github.com/pbakaus/impeccable.git
synced 2026-09-12 22:26:38 +03:00
Paul BakausandGitHub
e3e22007a9
* Improve detector false positive handling * Register docs integrity test * Fix clipped overflow decorative skip
68 lines
3.2 KiB
HTML
68 lines
3.2 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<title>Text overflow fixture (browser-only)</title>
|
|
<style>
|
|
body { font-family: system-ui, sans-serif; margin: 0; color: #1a1a1a; background: #fff; }
|
|
.cols { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding: 24px; align-items: start; }
|
|
.col { padding: 16px; }
|
|
.box { width: 160px; border: 1px solid #ddd; margin: 0 0 24px; padding: 8px; }
|
|
.sr-only {
|
|
position: absolute;
|
|
width: 1px;
|
|
height: 1px;
|
|
padding: 0;
|
|
margin: -1px;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
border-width: 0;
|
|
}
|
|
.sr-only-clip-path { clip-path: inset(50%); }
|
|
.sr-only-legacy-clip { clip: rect(0, 0, 0, 0); }
|
|
.sr-only-tiny-hidden { clip: auto; }
|
|
.sr-only-clipped-wide {
|
|
position: absolute;
|
|
width: 160px;
|
|
height: 20px;
|
|
overflow: visible;
|
|
white-space: nowrap;
|
|
clip-path: inset(50%);
|
|
}
|
|
.hidden-slide {
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
}
|
|
.hidden-slide .pass-hidden-slide-overflow {
|
|
display: block;
|
|
width: 120px;
|
|
white-space: nowrap;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="cols">
|
|
<!-- FLAG column: content forced wider than its box with no scroll affordance -->
|
|
<section class="col flag">
|
|
<div class="box flag-nowrap" style="white-space: nowrap">A single long line of running text that refuses to wrap and clearly spills past its fixed-width box.</div>
|
|
<div class="box flag-longword">Supercalifragilisticexpialidocioussupercalifragilisticexpialidocious</div>
|
|
</section>
|
|
|
|
<!-- PASS column: real scroll regions, preformatted code, wrapping text, scroll ancestors -->
|
|
<section class="col pass">
|
|
<div class="box pass-scroll" style="overflow-x: auto; white-space: nowrap">The very same unwrapping line, but inside a genuine horizontal scroll region meant to scroll.</div>
|
|
<pre class="box pass-pre" style="overflow: visible">a-very-long-preformatted-code-line-that-intentionally-extends-beyond-the-box-width</pre>
|
|
<div class="box pass-wrap">Ordinary wrapping paragraph text that stays comfortably within its container.</div>
|
|
<div class="box" style="overflow-x: auto"><span class="pass-inside-scroll" style="white-space: nowrap; display: inline-block">A long line living inside a scroll ancestor, which must not be flagged.</span></div>
|
|
<span class="pass-sr-only-clip-path sr-only sr-only-clip-path">A screen-reader-only label with long text that should never draw a visible overflow finding.</span>
|
|
<span class="pass-sr-only-legacy sr-only sr-only-legacy-clip">A legacy clipped screen-reader-only label with long text that should not be flagged.</span>
|
|
<span class="pass-sr-only-tiny-hidden sr-only sr-only-tiny-hidden">A tiny overflow-hidden screen-reader-only label without a clip declaration should not be flagged.</span>
|
|
<span class="pass-sr-only-clipped-wide sr-only-clipped-wide">A fully clipped label with a normal-sized box and overflowing text should not be flagged.</span>
|
|
<div class="hidden-slide">
|
|
<span class="pass-hidden-slide-overflow">An inactive carousel slide can contain long text that overflows while hidden.</span>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</body>
|
|
</html>
|