芝麻web文件管理V1.00

编辑当前文件:/home/freeclou/app.optimyar.com/backend/node_modules/sanitize.css/test.html

<!doctype html>
<link rel="stylesheet" href="sanitize.css">
<title>sanitize.css test</title>
<main class="Test">
	<h1 class="Test-title">sanitize.css: ui test</h1>

<h2 class="Test-describe">Display definitions</h2>
	<h3 class="Test-it">Elements (<code>article</code>, <code>aside</code>, <code>details</code>, <code>figcaption</code>, <code>figure</code>, <code>footer</code>, <code>header</code>, <code>main</code>, <code>menu</code>, <code>nav</code>, <code>section</code>, <code>summary</code>) display as block</h3>
	<div class="Test-run Highlight-children">
		<article>article</article>
		<aside>aside</aside>
		<details>details</details>
		<figcaption>figcaption</figcaption>
		<figure>figure</figure>
		<footer>footer</footer>
		<header>header</header>
		<main>main</main>
		<menu>menu</menu>
		<nav>nav</nav>
		<section>section</section>
		<summary>summary</summary>
	</div>
	<h3 class="Test-it">Elements (<code>audio</code>, <code>canvas</code>, <code>progress</code>, <code>video</code>) display as inline-block and vertically align middle</h3>
	<div class="Test-run Highlight-children">
		<audio controls>audio</audio>
		<canvas>canvas</canvas>
		<progress>progress</progress>
		<video>video</video>
	</div>
	<h3 class="Test-it">Elements (<code>audio:not([controls])</code>, <code>template</code>, <code>[hidden]</code>) do not display</h3>
	<div class="Test-run Highlight-children">
		<audio>audio:not([controls])</audio>
		<template>template</template>
		<div hidden>[hidden]</div>
	</div>

<h2 class="Test-describe">Elements of HTML</h2>
	<h3 class="Test-it">Elements (<code>*</code>) background do not repeat</h3>
	<div class="Test-run">
		<div style="background-color:#61B329;background-image:url(data:image/gif;base64,R0lGODlhAQABAPAAAP8AAAAAACwAAAAAAQABAAACAkQBADs=);width:100px;height:50px;"></div>
	</div>
	<h3 class="Test-it">Elements (<code>*</code>) box sizing is inherited</h3>
	<div class="Test-run">
		<div style="background-color:#ff0000;box-sizing:border-box;display:inline-block;position:relative;">
			<div style="background-color:#61b329;opacity: 1;display:inline-block;height:50px;position:absolute;vertical-align:top;width:100px;"></div>
			<div style="display:inline-block;height:50px;opacity:0;padding:25px 50px;vertical-align:top;width:100px;"></div>
		</div>
		<div style="background-color:#ff0000;box-sizing:content-box;display:inline-block;min-height:50px;min-width:100px;position:relative;">
			<div style="background-color:#61b329;display:inline-block;height:30px;padding:10px 0;vertical-align:top;width:100px;"></div>
		</div>
	</div>
	<h3 class="Test-it">Elements (descendants of <code>html</code>) line height is 1.5</h3>
	<div class="Test-run">
		<span style="background-color:#ff0000;display:inline-block;height:1.5em;width:100px;">
			<div style="background-color:#61b329;"> </div>
		</span>
		<span style="background-color:#ff0000;display:inline-block;position:relative;width:100px;">
			<div style="background-color:#61b329;height:1.5em;position:absolute;width:100%;"> </div>
			<div> </div>
		</span>
	</div>

<h2 class="Test-describe">Sections</h2>
	<h3 class="Test-it">Level-1 Headings (<code>h1</code>) maintain font size and margin within Sections</h3>
	<div class="Test-run">
		<span style="background-color:#ff0000;display:inline-block;height:79.5px;">
			<div style="background-color:#61b329;font-size:14px;overflow:hidden;">
				<h1>h1</h1>
			</div>
		</span>
		<span style="background-color:#ff0000;display:inline-block;height:79.5px;">
			<div style="background-color:#61b329;font-size:14px;overflow:hidden;">
				<article><h1>article > h1</h1></article>
			</div>
		</span>
		<span style="background-color:#ff0000;display:inline-block;height:79.5px;">
			<div style="background-color:#61b329;font-size:14px;overflow:hidden;">
				<section><h1>section > h1</h1></section>
			</div>
		</span>
	</div>

<h2 class="Test-describe">Grouping content</h2>
	<h3 class="Test-it">Markups (<code>code</code>, <code>kbd</code>, <code>pre</code>, <code>samp</code>) font size is the same as surrounding content</h3>
	<div class="Test-run Highlight-children">
		<span><span></span> <code><code></code> <kbd><kbd></kbd> <samp><samp></samp> <span><span></span>
	</div>
	<div class="Test-run Highlight-children">
		<p><p></p>
		<pre><pre></pre>
	</div>
	<h3 class="Test-it">Horizontal Rules (<code>hr</code>) are 2px tall with .5em vertical margin</h3>
	<div class="Test-run">
		<div style="overflow:hidden;position:absolute;height:1em;width:100%;">
			<div style="border-color:#ff0000;border-style:inset;border-width:1px;height:0;margin:0.5em 0;"></div>
		</div>
		<div style="overflow:hidden;position:relative;height:1em;width:100%;">
			<hr style="border-color:#6ab329">
		</div>
	</div>
	<h3 class="Test-it">Navigation Lists (<code>nav ol</code>, <code>nav ul</code>) do not have list style</h3>
	<div class="Test-run">
		<nav style="background-color:#61b329;color:#ff0000;width:100px;">
			<ul>
				<li> </li>
			</ul>
		</nav>
		<nav style="background-color:#61b329;color:#ff0000;width:100px;">
			<ol>
				<li> </li>
			</ol>
		</nav>
	</div>

<h2 class="Test-describe">Text-level semantics</h2>
	<h3 class="Test-it">Abbreviations (<code>abbr[title]</code>) bottom border is dotted</h3>
	<div class="Test-run">
		<span style="color:#ff0000;position:absolute;"><span style="border-bottom:1px dotted;">LOL</span></span>
		<span style="color:#61b329;position:relative;"><abbr title="laugh out loud">LOL</abbr>
	</div>
	<h3 class="Test-it">Bolds (<code>b</code> and <code>strong</code>) are <code>bolder</code> than the surrounding font weight</h3>
	<div class="Test-run">
		<div style="color:#ff0000;font-weight:700;position:absolute;">abcdefg<wbr>abcdefg</div>
		<div style="color:#61b329;font-weight:400;position:relative;"><b>abcdefg</b><strong>abcdefg</strong></div>
	</div>
	<div class="Test-run">
		<div style="color:#ff0000;font-weight:400;position:absolute;">abcdefg<wbr>abcdefg</div>
		<div style="color:#61b329;font-weight:100;position:relative;"><b>abcdefg</b><strong>abcdefg</strong></div>
	</div>
	<h3 class="Test-it">Definitions (<code>dfn</code>) are italic</h3>
	<div class="Test-run">
		<div style="color:#ff0000;position:absolute;"><span style="font-style:italic;">abcdefg</span></div>
		<div style="color:#61b329;position:relative;"><dfn>abcdefg</dfn></div>
	</div>
	<h3 class="Test-it">Sub and Super Scripts (<code>sub</code>, <code>sup</code>) do not change the line height of surrounding content</h3>
	<div class="Test-run Highlight-children">
		<div>control.</div>
		<div>control. <sub>sub.</sub> control.</div>
		<div>control. <sup>sup.</sup> control.</div>
	</div>
	<h3 class="Test-it">Marks (<code>mark</code>) are black on yellow</h3>
	<div class="Test-run">
		<mark>black on yellow</mark>
	</div>
	<h3>Smalls (<code>small</code>) are 83.3333% the size of their container</h3>
	<div class="Test-run">
		<span style="background-color:#ff0000;display:inline-block;font-size:100px;line-height:1;height:.833333em;width:200px;">
			<small style="background-color:#61b329;display:inline-block;vertical-align:top;width:100%"> </small>
		</span>
	</div>

<h2 class="Test-describe">Embedded content</h2>
	<h3 class="Test-it">Embeddeds (<code>audio[controls]</code>, <code>canvas</code>, <code>iframe</code>, <code>img</code>, <code>svg</code>, <code>video</code>) display inline block and vertically align to the middle</h3>
	<div class="Test-run Highlight-children">
		<audio controls>audio</audio>
		<canvas>canvas</canvas>
		<iframe src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7">iframe</iframe>
		<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" height="150" width="320">
		<svg></svg>
		<video src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"></video>
	</div>

<h2 class="Test-describe">Links</h2>
	<h3 class="Test-it">Links (<code>a</code>) background is transparent when active</h3>
	<div class="Test-run">
		<a href="#non">dummy anchor</a>
	</div>
	<h3 class="Test-it">Links (<code>a</code>) underlines do not skip over descenders</h3>
	<div class="Test-run">
		<a href="#non">quip and jig</a>
	</div>
	<h3 class="Test-it">Links (<code>a</code>) outlines disappear when hovered</h3>
	<div class="Test-run">
		<a href="#non">dummy anchor</a>
	</div>

<h2 class="Test-describe">Tabular data</h2>
	<h3 class="Test-it">Tables have no border spacing</h3>
	<div class="Test-run">
		<table style="background-color:#ff0000;border-spacing:25px;height:50px;width:100px;">
			<td style="background-color:#61b329;"></td>
		</table>
	</div>

<h2 class="Test-describe">Forms (<code>button</code>, <code>input</code>, <code>select</code>, <code>textarea</code>)</h2>
	<h3 class="Test-it">Controls inherit color</h3>
	<div class="Test-run">
		<div style="background-color:currentColor;color:#61b329;width:200px;">
			<button style="width:100%">should not be visible</button>
		</div>
	</div>
	<div class="Test-run">
		<div style="background-color:currentColor;color:#61b329;width:200px;">
			<input style="width:100%" value="should not be visible">
		</div>
	</div>
	<div class="Test-run">
		<div style="background-color:currentColor;color:#61b329;width:200px;">
			<select style="width:100%"><option>should not be visible</option></select>
		</div>
	</div>
	<div class="Test-run">
		<div style="background-color:currentColor;color:#61b329;width:200px;">
			<textarea style="width:100%">should not be visible</textarea>
		</div>
	</div>
	<h3 class="Test-it">Controls inherit font size</h3>
	<div class="Test-run">
		<div style="background-color:#ff0000;font-size:25px;height:25px;line-height:1;width:100px;">
			<button style="background-color:#61b329;width:4em;height:1em;"></button>
		</div>
	</div>
	<div class="Test-run">
		<div style="background-color:#ff0000;font-size:25px;height:25px;line-height:1;width:100px;">
			<input style="background-color:#61b329;width:4em;height:1em;">
		</div>
	</div>
	<div class="Test-run">
		<div style="background-color:#ff0000;font-size:25px;height:25px;line-height:1;width:100px;">
			<select style="background-color:#61b329;width:4em;height:1em;"></select>
		</div>
	</div>
	<div class="Test-run">
		<div style="background-color:#ff0000;font-size:25px;height:25px;line-height:1;width:100px;">
			<textarea style="background-color:#61b329;width:4em;height:1em;"></textarea>
		</div>
	</div>
</main>

.Test-title {
	font-size: 2em;
	font-family: sans-serif;
	padding: 20px;
	margin: 20px 0;
	background: #eee;
	color: #999;
}

.Test-describe,
.Test-it {
	background: #eee;
	border-left: 5px solid #666;
	color: #666;
	font-family: sans-serif;
	font-weight: bold;
	margin: 20px 0;
	padding: 0.75em 20px;
}

.Test-describe::before,
.Test-it::before {
	color: #999;
	display: inline-block;
	margin-right: 10px;
	min-width: 30px;
	text-transform: uppercase;
}

.Test-describe {
	counter-reset: test-it;
}

.Test-describe::before {
	content: counter(test-describe);
	counter-increment: test-describe;
}

.Test-it::before {
	content: counter(test-describe) "." counter(test-it);
	counter-increment: test-it;
}

.Test-it code {
	background-color: rgba(0,0,0,0.04);
	font-family: "Consolas", "Liberation Mono", "Menlo", Courier, monospace;
	border-radius: 3px;
	padding-top: .2em 0;
}

.Test-it code::before,
.Test-it code::after {
    letter-spacing: -0.2em;
    content: "\00a0";
}

.Highlight-children > * {
	outline: 1px solid #61b329;
}
</style>