Eshu
view release on metacpan or search on metacpan
t/0244-realworld-html.t view on Meta::CPAN
{
my $code = <<'END';
<form role="search" action="/search" method="get">
<div class="search-box">
<input type="search" name="q" placeholder="Search..." aria-label="Search">
<button type="submit" aria-label="Submit search">
<svg aria-hidden="true"><use href="#icon-search"/></svg>
</button>
</div>
<fieldset>
<legend>Filter by type</legend>
<label><input type="radio" name="type" value="all" checked> All</label>
<label><input type="radio" name="type" value="docs"> Docs</label>
<label><input type="radio" name="type" value="blog"> Blog</label>
</fieldset>
</form>
END
is(h($code), $code, 'HTML: search form with filters');
}
# 12. breadcrumb nav
t/0244-realworld-html.t view on Meta::CPAN
"<html>\n<head>\n<title>T</title>\n<link rel=\"stylesheet\" href=\"a.css\">\n</head>\n<body>\n<div id=\"app\">\n<header>\n<nav>\n<a href=\"/\">Home</a>\n</nav>\n</header>\n<main>\n<p>Content</p>\n</main>\n</div>\n</body>\n</html>\n",
"<div class=\"dropdown\">\n<button>Menu</button>\n<ul>\n<li><a href=\"/a\">A</a></li>\n<li>\n<a href=\"/b\">B</a>\n<ul>\n<li><a href=\"/b1\">B1</a></li>\n<li><a href=\"/b2\">B2</a></li>\n</ul>\n</li>\n</ul>\n</div>\n",
"<article>\n<header>\n<h1>Title</h1>\n<p>By <a href=\"/a\">Author</a></p>\n</header>\n<section>\n<h2>S1</h2>\n<p>Text</p>\n</section>\n<section>\n<h2>S2</h2>\n<p>Text</p>\n</section>\n<footer>\n<p>Tags</p>\n</footer>\n</article>\n",
"<div class=\"wizard\">\n<nav>\n<button data-step=\"1\">Step 1</button>\n<button data-step=\"2\">Step 2</button>\n<button data-step=\"3\">Step 3</button>\n</nav>\n<div data-panel=\"1\">\n<h2>Info</h2>\n<input type=\"text\" name=\"name\">\n</div>\n<d...
"<main>\n<h1>Dashboard</h1>\n<div class=\"stats\">\n<div class=\"stat-card\">\n<h2>Users</h2>\n<p class=\"number\">1,234</p>\n</div>\n<div class=\"stat-card\">\n<h2>Revenue</h2>\n<p class=\"number\">\$56,789</p>\n</div>\n</div>\n</main>\n",
"<header role=\"banner\">\n<a href=\"/\" class=\"logo\">\n<img src=\"/logo.svg\" alt=\"Site Logo\" width=\"120\" height=\"40\">\n</a>\n<nav aria-label=\"Main\">\n<ul>\n<li><a href=\"/features\" aria-current=\"page\">Features</a></li>\n<li><a href=\"...
"<ol class=\"steps\">\n<li>\n<h3>Install</h3>\n<code>npm install widget</code>\n</li>\n<li>\n<h3>Import</h3>\n<code>import Widget from 'widget'</code>\n</li>\n<li>\n<h3>Use</h3>\n<code><Widget /></code>\n</li>\n</ol>\n",
"<div class=\"accordion\">\n<div class=\"accordion-item\">\n<button class=\"accordion-header\">Section 1</button>\n<div class=\"accordion-body\">\n<p>Content 1</p>\n</div>\n</div>\n<div class=\"accordion-item\">\n<button class=\"accordion-header\">S...
"<aside class=\"sidebar\">\n<section>\n<h2>Recent</h2>\n<ul>\n<li><a href=\"/p/1\">Post 1</a></li>\n<li><a href=\"/p/2\">Post 2</a></li>\n<li><a href=\"/p/3\">Post 3</a></li>\n</ul>\n</section>\n<section>\n<h2>Popular</h2>\n<ul>\n<li><a href=\"/p/a\...
"<div class=\"toast\" role=\"alert\" aria-live=\"assertive\">\n<div class=\"toast-header\">\n<strong>Notification</strong>\n<button type=\"button\" class=\"close\" aria-label=\"Close\">X</button>\n</div>\n<div class=\"toast-body\">\nYour file has be...
"<form class=\"settings\">\n<fieldset>\n<legend>Notifications</legend>\n<label><input type=\"checkbox\" name=\"email\" checked> Email</label>\n<label><input type=\"checkbox\" name=\"sms\"> SMS</label>\n<label><input type=\"checkbox\" name=\"push\" c...
"<div class=\"chat\">\n<div class=\"messages\">\n<div class=\"message sent\">\n<p>Hello!</p>\n<time>10:00</time>\n</div>\n<div class=\"message received\">\n<p>Hi there!</p>\n<time>10:01</time>\n</div>\n</div>\n<form class=\"compose\">\n<input type=\...
"<div class=\"kanban\">\n<div class=\"column\" data-status=\"todo\">\n<h2>To Do</h2>\n<div class=\"card\" draggable=\"true\">Task A</div>\n<div class=\"card\" draggable=\"true\">Task B</div>\n</div>\n<div class=\"column\" data-status=\"doing\">\n<h2...
"<iframe\n src=\"https://www.youtube.com/embed/abc123\"\n title=\"Video\"\n frameborder=\"0\"\n allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope\"\n allowfullscreen>\n</iframe>\n",
"<figure class=\"code-example\">\n<pre><code class=\"language-js\">const x = 1;</code></pre>\n<figcaption>Example JavaScript</figcaption>\n</figure>\n",
) {
my $once = h($snippet);
is(h($once), $once, 'HTML: snippet idempotent');
}
done_testing;
t/0245-realworld-css.t view on Meta::CPAN
"\@layer utilities{\n.mt-1{margin-top:4px}\n.mt-2{margin-top:8px}\n.mt-4{margin-top:16px}\n.mt-8{margin-top:32px}\n}\n",
"a{color:var(--color-primary);text-decoration:underline;text-underline-offset:2px}\na:hover{color:#005cc5}\na:visited{color:#7928ca}\na:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}\n",
".visually-hidden:not(:focus):not(:focus-within){clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}\n",
":root{--ease-out:cubic-bezier(0,0,0.2,1);--ease-in:cubic-bezier(0.4,0,1,1);--ease-in-out:cubic-bezier(0.4,0,0.2,1)}\n.transition-all{transition:all 200ms var(--ease-in-out)}\n",
"\@media(hover:hover){\n.hover-highlight:hover{background:rgba(0,0,0,0.05)}\n}\n\@media(hover:none){\n.hover-highlight:active{background:rgba(0,0,0,0.05)}\n}\n",
"ul.reset,ol.reset{list-style:none;margin:0;padding:0}\nul.reset li,ol.reset li{margin:0;padding:0}\n",
".grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))}\n.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}\n.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}\n.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}\n",
".truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n.line-clamp-2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}\n.line-clamp-3{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:ver...
"img.lazy{opacity:0;transition:opacity 0.3s}\nimg.lazy.loaded{opacity:1}\n.placeholder{background:linear-gradient(90deg,#e0e0e0 25%,#f0f0f0 50%,#e0e0e0 75%);background-size:200%}\n",
".split{display:flex;gap:1rem}\n.split>*{flex:1}\n.split--70-30>:first-child{flex:7}\n.split--70-30>:last-child{flex:3}\n",
"fieldset{border:0;margin:0;padding:0}\nlegend{font-weight:600;margin-bottom:8px}\nselect{appearance:none;background-image:url(\"data:image/svg+xml,...\");background-repeat:no-repeat;background-position:right 8px center}\n",
) {
my $once = cs($snippet);
is(cs($once), $once, 'CSS: snippet idempotent');
}
done_testing;
( run in 0.777 second using v1.01-cache-2.11-cpan-364913b4093 )