tests.gosub.io/overflow.html at main · gosub-io/tests.gosub.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Gosub overflow &amp; clipping test</title>
<style>
  * { box-sizing: border-box; }
  body {
    margin: 0; padding: 24px;
    font-family: DejaVu Sans, system-ui, Arial, sans-serif;
    color: #1a1a1a; background: #fafafa; line-height: 1.5;
  }
  h1 { font-size: 24px; margin: 0 0 4px; }
  p.lead { margin: 0 0 24px; color: #555; }
  h2 { font-size: 18px; margin: 32px 0 12px; border-bottom: 2px solid #ddd; padding-bottom: 4px; }
  code { font-family: DejaVu Sans Mono, monospace; font-size: 12px; color: #06c; }

  .grid { display: flex; flex-wrap: wrap; gap: 16px; }
  figure { margin: 0; }
  figcaption { font-size: 13px; color: #555; margin-top: 6px; }

  .demo {
    width: 220px; height: 130px; border: 1px solid #ccc; border-radius: 8px;
    background: #fff; padding: 10px; color: #333; font-size: 14px;
  }
  .filler { color: #444; }
  /* a tall/wide inner block to force overflow */
  .big { width: 320px; height: 220px;
    background: linear-gradient(135deg, #6a11cb, #2575fc); color: #fff;
    border-radius: 6px; padding: 8px; font-weight: bold; }

  .ov-visible  { overflow: visible; }
  .ov-hidden   { overflow: hidden; }
  .ov-scroll   { overflow: scroll; }
  .ov-auto     { overflow: auto; }
  .ov-x        { overflow-x: auto; overflow-y: hidden; white-space: nowrap; }
  .ov-y        { overflow-y: auto; overflow-x: hidden; }

  /* text-overflow ellipsis (single line) */
  .ellipsis {
    width: 220px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    border: 1px solid #ccc; border-radius: 6px; padding: 8px; background: #fff;
  }
  /* multi-line clamp */
  .clamp {
    width: 220px; border: 1px solid #ccc; border-radius: 6px; padding: 8px; background: #fff;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
  }

  /* clip-path shapes */
  .clip-grid { display: flex; gap: 16px; flex-wrap: wrap; }
  .shape {
    width: 130px; height: 130px; color: #fff; font-weight: bold;
    display: flex; align-items: center; justify-content: center; text-align: center;
    background: linear-gradient(135deg, #6a11cb, #2575fc);
  }
  .clip-circle   { clip-path: circle(50%); }
  .clip-triangle { clip-path: polygon(50% 0, 100% 100%, 0 100%); }
  .clip-hexagon  { clip-path: polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%); }
  .clip-inset    { clip-path: inset(15% round 16px); }

  /* border-radius clipping of overflowing content */
  .rounded-clip { width: 220px; height: 120px; border-radius: 24px; overflow: hidden; }
  .rounded-clip .big { width: 100%; height: 100%; border-radius: 0; }
</style>
</head>
<body>
  <h1>Gosub overflow &amp; clipping test</h1>
  <p class="lead">How content is clipped or scrolled: <code>overflow</code> values, <code>text-overflow: ellipsis</code>, line-clamp, <code>clip-path</code>, and rounded-corner clipping.</p>

  <h2>overflow values</h2>
  <div class="grid">
    <figure><div class="demo ov-visible"><div class="big">visible &mdash; spills out</div></div><figcaption><code>overflow: visible</code></figcaption></figure>
    <figure><div class="demo ov-hidden"><div class="big">hidden &mdash; clipped</div></div><figcaption><code>overflow: hidden</code></figcaption></figure>
    <figure><div class="demo ov-scroll"><div class="big">scroll &mdash; always bars</div></div><figcaption><code>overflow: scroll</code></figcaption></figure>
    <figure><div class="demo ov-auto"><div class="big">auto &mdash; bars if needed</div></div><figcaption><code>overflow: auto</code></figcaption></figure>
  </div>

  <h2>Single-axis overflow</h2>
  <div class="grid">
    <figure>
      <div class="demo ov-x">This line is intentionally very long so it does not fit and must scroll horizontally only &mdash; no wrapping allowed here at all.</div>
      <figcaption><code>overflow-x: auto</code> + <code>nowrap</code></figcaption>
    </figure>
    <figure>
      <div class="demo ov-y"><p class="filler" style="margin:0">Vertical scrolling only. Line one. Line two. Line three. Line four. Line five. Line six. Line seven. Line eight. Line nine. Line ten.</p></div>
      <figcaption><code>overflow-y: auto</code></figcaption>
    </figure>
  </div>

  <h2>text-overflow &amp; line-clamp</h2>
  <div class="grid">
    <figure>
      <div class="ellipsis">A single line of text that is far too long to fit and gets truncated with an ellipsis.</div>
      <figcaption><code>text-overflow: ellipsis</code></figcaption>
    </figure>
    <figure>
      <div class="clamp">A multi-line block clamped to three lines. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua ut enim.</div>
      <figcaption><code>-webkit-line-clamp: 3</code></figcaption>
    </figure>
  </div>

  <h2>clip-path shapes</h2>
  <div class="clip-grid">
    <div class="shape clip-circle">circle()</div>
    <div class="shape clip-triangle">polygon&nbsp;tri</div>
    <div class="shape clip-hexagon">polygon&nbsp;hex</div>
    <div class="shape clip-inset">inset()</div>
  </div>

  <h2>Rounded-corner clipping</h2>
  <div class="grid">
    <figure>
      <div class="rounded-clip"><div class="big">A child with square corners, clipped by the parent's 24px <code>border-radius</code> + <code>overflow: hidden</code>.</div></div>
      <figcaption>radius clips the child</figcaption>
    </figure>
  </div>
</body>
</html>