Файловый менеджер - Редактировать - /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> <style> .Test { counter-reset: test-describe; } .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>
| ver. 1.4 |
Github
|
.
| PHP 8.1.33 | Генерация страницы: 0.02 |
proxy
|
phpinfo
|
Настройка