User:Eviand/TemplateTesting: Difference between revisions

← Older edit Newer edit →

VisualWikitext

Revision as of 01:17, 27 February 2026

Universal Popups v3 — Full Testbed (10+)

1) Small (Hover) — Notes (bullet list)

2) Small (Hover) — Notes (single sentence)

3) Small (Hover) — Notes (two paragraphs)

4) Small (Hover) — Definition (no link, 2 lines)

Ground Cast (no link)

5) Small (Hover) — Definition (no link, long wrap)

Piercing (no link)

6) Large (Click) — Users (grouped list)

Users(6)

7) Large (Click) — Requirements (simple list)

Requirements(4)

8) Large (Click) — Long list (scroll test)

Scroll Test(14)

9) Large (Click) — Definition (with link + action)

Casting (with link)

10) Large (Click) — Definition (with link, long wrap)

Damage (with link)

11) Small (Hover) — Notes (inline link inside body)

12) Large (Click) — Mixed content (text + list)

Mixed(5)

@@ Line 1: / Line 1: @@
-== Universal Popups v3 — Testbed ==
+== Universal Popups v3 — Full Testbed (10+) ==
 <div class="sv-card" style="padding:16px; margin:16px 0;">
 <div style="display:flex; gap:18px; flex-wrap:wrap; align-items:flex-start;">
-<!-- NOTES / INFO (small hover on desktop; tap-open on mobile) -->
 <div>
-<div class="sv-pill" style="margin-bottom:10px;">Small (Hover) — Notes</div>
+<div class="sv-pill" style="margin-bottom:10px;">1) Small (Hover) — Notes (bullet list)</div>
 <div class="sv-tip">
-<span class="sv-tip-btn sv-focus-ring" role="button" tabindex="0" data-sv-toggle="1" aria-label="Info" aria-controls="sv-test-notes" aria-expanded="false"><span class="sv-ico sv-ico--info" aria-hidden="true">i</span></span>
+<span class="sv-tip-btn sv-focus-ring" role="button" tabindex="0" data-sv-toggle="1" aria-label="Info" aria-controls="sv-tb-notes-1" aria-expanded="false"><span class="sv-ico sv-ico--info" aria-hidden="true">i</span></span>
-<div class="sv-tip-pop sv-hidden" id="sv-test-notes" role="dialog" aria-label="Info">
+<div class="sv-tip-pop sv-hidden" id="sv-tb-notes-1" role="dialog" aria-label="Info">
-<div class="sv-tip-pop-head">
+<div class="sv-tip-pop-head"><div class="sv-tip-pop-title">Info</div></div>
-<div class="sv-tip-pop-title">Info</div>
+<div class="sv-tip-pop-body">
+* Bullet line one (wrap test for compact width).
+* Bullet line two with a longer phrase to force vertical growth.
+</div>
+</div>
+</div>
+</div>
+<div>
+<div class="sv-pill" style="margin-bottom:10px;">2) Small (Hover) — Notes (single sentence)</div>
+<div class="sv-tip">
+<span class="sv-tip-btn sv-focus-ring" role="button" tabindex="0" data-sv-toggle="1" aria-label="Notes" aria-controls="sv-tb-notes-2" aria-expanded="false"><span class="sv-ico sv-ico--info" aria-hidden="true">i</span></span>
+<div class="sv-tip-pop sv-hidden" id="sv-tb-notes-2" role="dialog" aria-label="Notes">
+<div class="sv-tip-pop-head"><div class="sv-tip-pop-title">Notes</div></div>
+<div class="sv-tip-pop-body">
+A short single-line note that should wrap early and grow vertically.
+</div>
 </div>
+</div>
+</div>
+<div>
+<div class="sv-pill" style="margin-bottom:10px;">3) Small (Hover) — Notes (two paragraphs)</div>
+<div class="sv-tip">
+<span class="sv-tip-btn sv-focus-ring" role="button" tabindex="0" data-sv-toggle="1" aria-label="Details" aria-controls="sv-tb-notes-3" aria-expanded="false"><span class="sv-ico sv-ico--info" aria-hidden="true">i</span></span>
+<div class="sv-tip-pop sv-hidden" id="sv-tb-notes-3" role="dialog" aria-label="Details">
+<div class="sv-tip-pop-head"><div class="sv-tip-pop-title">Details</div></div>
 <div class="sv-tip-pop-body">
-* Hand-crafted reference page for the Skill pipeline (wikiupdate will emulate this structure).
+First paragraph for spacing checks.
+Second paragraph for spacing checks (should not add huge margins).
+</div>
 </div>
 </div>
 </div>
+<div>
+<div class="sv-pill" style="margin-bottom:10px;">4) Small (Hover) — Definition (no link, 2 lines)</div>
+<span class="sv-def" tabindex="0" data-sv-def-tip="Hover-only definition.\nSecond line test for newline rendering.">Ground Cast (no link)</span>
+</div>
+<div>
+<div class="sv-pill" style="margin-bottom:10px;">5) Small (Hover) — Definition (no link, long wrap)</div>
+<span class="sv-def" tabindex="0" data-sv-def-tip="This is a longer definition tooltip meant to wrap quickly to validate narrow width behavior and vertical growth.">Piercing (no link)</span>
 </div>
-<!-- USERS / REQUIREMENTS (large click/tap) -->
 <div>
-<div class="sv-pill" style="margin-bottom:10px;">Large (Click) — Users</div>
+<div class="sv-pill" style="margin-bottom:10px;">6) Large (Click) — Users (grouped list)</div>
 <div class="sv-disclose">
-<span class="sv-disclose-btn sv-focus-ring" role="button" tabindex="0" data-sv-toggle="1" aria-label="Users" aria-controls="sv-test-users" aria-expanded="false"><span class="sv-disclose-label">Users</span><span class="sv-disclose-count">(6)</span></span>
+<span class="sv-disclose-btn sv-focus-ring" role="button" tabindex="0" data-sv-toggle="1" aria-label="Users" aria-controls="sv-tb-users-1" aria-expanded="false"><span class="sv-disclose-label">Users</span><span class="sv-disclose-count">(6)</span></span>
-<div class="sv-disclose-pop sv-hidden" id="sv-test-users" role="dialog" aria-label="Users">
+<div class="sv-disclose-pop sv-hidden" id="sv-tb-users-1" role="dialog" aria-label="Users">
-<div class="sv-disclose-pop-head">
+<div class="sv-disclose-pop-head"><div class="sv-disclose-pop-title">Users</div></div>
-<div class="sv-disclose-pop-title">Users</div>
-</div>
 <ul class="sv-disclose-list">
 <li class="sv-disclose-group-title">Classes</li>
@@ Line 43: / Line 75: @@
 </div>
-<!-- DEFINITIONS (small hover on desktop; tap-open on mobile) -->
 <div>
-<div class="sv-pill" style="margin-bottom:10px;">Small (Hover) — Definition (no link)</div>
+<div class="sv-pill" style="margin-bottom:10px;">7) Large (Click) — Requirements (simple list)</div>
-<span class="sv-def" tabindex="0" data-sv-def-tip="This is a hover-only definition tooltip.\nIt uses the Popup B shell.\nSecond line test.">Ground Cast (no link)</span>
+<div class="sv-disclose">
+<span class="sv-disclose-btn sv-focus-ring" role="button" tabindex="0" data-sv-toggle="1" aria-label="Requirements" aria-controls="sv-tb-req-1" aria-expanded="false"><span class="sv-disclose-label">Requirements</span><span class="sv-disclose-count">(4)</span></span>
+<div class="sv-disclose-pop sv-hidden" id="sv-tb-req-1" role="dialog" aria-label="Requirements">
+<div class="sv-disclose-pop-head"><div class="sv-disclose-pop-title">Requirements</div></div>
+<ul class="sv-disclose-list">
+<li>Level 25</li>
+<li>Weapon: Sword</li>
+<li>Cost: 12 SP</li>
+<li>Cooldown: 8s</li>
+</ul>
+</div>
+</div>
 </div>
-<!-- DEFINITIONS (large click/tap, with link + action button) -->
 <div>
-<div class="sv-pill" style="margin-bottom:10px;">Large (Click) — Definition (with link)</div>
+<div class="sv-pill" style="margin-bottom:10px;">8) Large (Click) — Long list (scroll test)</div>
-<span class="sv-def" tabindex="0" data-sv-def-tip="This definition is click-open so the user can interact inside the popup." data-sv-def-link="Casting">Casting (with link)</span>
+<div class="sv-disclose">
+<span class="sv-disclose-btn sv-focus-ring" role="button" tabindex="0" data-sv-toggle="1" aria-label="Scroll Test" aria-controls="sv-tb-scroll-1" aria-expanded="false"><span class="sv-disclose-label">Scroll Test</span><span class="sv-disclose-count">(14)</span></span>
+<div class="sv-disclose-pop sv-hidden" id="sv-tb-scroll-1" role="dialog" aria-label="Scroll Test">
+<div class="sv-disclose-pop-head"><div class="sv-disclose-pop-title">Scroll Test</div></div>
+<ul class="sv-disclose-list">
+<li class="sv-disclose-group-title">Entries</li>
+<li>Entry 1</li>
+<li>Entry 2</li>
+<li>Entry 3</li>
+<li>Entry 4</li>
+<li>Entry 5</li>
+<li>Entry 6</li>
+<li>Entry 7</li>
+<li>Entry 8</li>
+<li>Entry 9</li>
+<li>Entry 10</li>
+<li>Entry 11</li>
+<li>Entry 12</li>
+<li>Entry 13</li>
+<li>Entry 14</li>
+</ul>
+</div>
+</div>
+</div>
+<div>
+<div class="sv-pill" style="margin-bottom:10px;">9) Large (Click) — Definition (with link + action)</div>
+<span class="sv-def" tabindex="0" data-sv-def-tip="This definition is click-open so the user can interact inside the popup.\nIncludes an action button." data-sv-def-link="Casting">Casting (with link)</span>
+</div>
+<div>
+<div class="sv-pill" style="margin-bottom:10px;">10) Large (Click) — Definition (with link, long wrap)</div>
+<span class="sv-def" tabindex="0" data-sv-def-tip="A longer linked definition to confirm that click-open popups remain compact in width but comfortably readable with vertical growth and scrolling when needed." data-sv-def-link="Damage">Damage (with link)</span>
+</div>
+<div>
+<div class="sv-pill" style="margin-bottom:10px;">11) Small (Hover) — Notes (inline link inside body)</div>
+<div class="sv-tip">
+<span class="sv-tip-btn sv-focus-ring" role="button" tabindex="0" data-sv-toggle="1" aria-label="Link Test" aria-controls="sv-tb-link-1" aria-expanded="false"><span class="sv-ico sv-ico--info" aria-hidden="true">i</span></span>
+<div class="sv-tip-pop sv-hidden" id="sv-tb-link-1" role="dialog" aria-label="Link Test">
+<div class="sv-tip-pop-head"><div class="sv-tip-pop-title">Link Test</div></div>
+<div class="sv-tip-pop-body">
+This popup contains a wiki link to validate Popups extension behavior: [[Casting]].
+</div>
+</div>
+</div>
+</div>
+<div>
+<div class="sv-pill" style="margin-bottom:10px;">12) Large (Click) — Mixed content (text + list)</div>
+<div class="sv-disclose">
+<span class="sv-disclose-btn sv-focus-ring" role="button" tabindex="0" data-sv-toggle="1" aria-label="Mixed" aria-controls="sv-tb-mixed-1" aria-expanded="false"><span class="sv-disclose-label">Mixed</span><span class="sv-disclose-count">(5)</span></span>
+<div class="sv-disclose-pop sv-hidden" id="sv-tb-mixed-1" role="dialog" aria-label="Mixed">
+<div class="sv-disclose-pop-head"><div class="sv-disclose-pop-title">Mixed</div></div>
+<div class="sv-tip-pop-body">
+Short intro line for mixed content test.
+<ul>
+<li>Bullet A</li>
+<li>Bullet B</li>
+<li>Bullet C</li>
+</ul>
+</div>
+</div>
+</div>
 </div>
 </div>
 </div>