Kamil Piechaczek 5 年之前
父节点
当前提交
1559726a8e
共有 1 个文件被更改,包括 178 次插入0 次删除
  1. 178 0
      tests/manual/all-features.html

+ 178 - 0
tests/manual/all-features.html

@@ -11,6 +11,184 @@
 </div>
 
 <div id="editor">
+	<h2>Lists in the table</h2>
+	<figure class="table">
+		<table style="width: 600px;border-bottom:2px dashed hsl(0, 0%, 60%);border-left:2px dashed hsl(0, 0%, 60%);border-right:2px dashed hsl(0, 0%, 60%);border-top:2px dashed hsl(0, 0%, 60%);">
+			<tbody>
+			<tr>
+				<td style="text-align: center"><span class="text-big" style="font-weight: bold">Bulleted list</span></td>
+				<td style="text-align: center"><span class="text-big" style="font-weight: bold">Numbered list</span></td>
+				<td style="text-align: center"><span class="text-big" style="font-weight: bold">To do list</span></td>
+			</tr>
+			<tr>
+				<td style="vertical-align:top; width: 33%">
+					<ul>
+						<li>UL List item 1</li>
+						<li>UL List item 2</li>
+					</ul>
+				</td>
+				<td style="vertical-align:top; width: 33%">
+					<ol>
+						<li>OL List item 1</li>
+						<li>OL List item 2</li>
+					</ol>
+				</td>
+				<td style="vertical-align:top; width: 33%">
+					<ul class="todo-list">
+						<li>
+							<label class="todo-list__label">
+								<input type="checkbox" />
+								<span class="todo-list__label__description">Foo</span>
+							</label>
+						</li>
+						<li>
+							<label class="todo-list__label">
+								<input type="checkbox" checked="checked" />
+								<span class="todo-list__label__description">Foo</span>
+							</label>
+						</li>
+					</ul>
+				</td>
+			</tr>
+			</tbody>
+		</table>
+	</figure>
+
+	<h2>Basic features overview</h2>
+	<p>Lorem <b>ipsum dolor sit </b>amet, consectetur <i>adipisicing elit</i>.<sub>1</sub></p>
+	<h3>Basic styles</h3>
+	<p>Ad alias, <s>architecto</s> culpa <b><i>cumque</i></b> dignissimos <code>dolor eos incidunt ipsa itaque</code> <u>laboriosam</u> magnam molestias nihil <i><u>numquam</u></i> odit quam, suscipit <i><s>veritatis</s></i> voluptate voluptatum.<sup>2</sup></p>
+	<h3>Image</h3>
+	<figure class="image">
+		<img alt="bar" src="sample.jpg">
+		<figcaption>Caption</figcaption>
+	</figure>
+	<h3>Blockquote</h3>
+	<blockquote>
+		<p>Quote</p>
+		<ul>
+			<li><a href="#">Quoted</a> UL List item 1</li>
+			<li>Quoted UL List item 2</li>
+		</ul>
+		<p>Quote</p>
+	</blockquote>
+
+	<div class="page-break" style="page-break-after:always;"><span style="display:none;">&nbsp;</span></div>
+
+	<h2>Media with previews in the table</h2>
+	<figure class="table">
+		<table style="background-color:hsl(0,0%,90%);border-bottom:2px solid hsl(0, 0%, 0%);border-left:2px solid hsl(0, 0%, 0%);border-right:2px solid hsl(0, 0%, 0%);border-top:2px solid hsl(0, 0%, 0%);">
+			<tbody>
+			<tr>
+				<td style="text-align: center"><span class="text-big" style="font-weight: bold">Service</span></td>
+				<td style="text-align: center"><span class="text-big" style="font-weight: bold">Preview</span></td>
+				<td style="text-align: center"><span class="text-big" style="font-weight: bold">URL</span></td>
+			</tr>
+			<tr>
+				<td style="text-align: center"><u>YouTube</u></td>
+				<td>
+					<figure class="media">
+						<oembed url="https://www.youtube.com/watch?v=ZVv7UMQPEWk"></oembed>
+					</figure>
+				</td>
+				<td>
+					<span class="text-small"><a href="https://www.youtube.com/watch?v=ZVv7UMQPEWk">https://www.youtube.com/watch?v=ZVv7UMQPEWk</a></span>
+				</td>
+			</tr>
+			<tr>
+				<td style="text-align: center"><u>Vimeo</u></td>
+				<td>
+					<figure class="media">
+						<oembed url="https://vimeo.com/1084537"></oembed>
+					</figure>
+				</td>
+				<td>
+					<span class="text-small"><a href="https://vimeo.com/1084537">https://vimeo.com/1084537</a></span>
+				</td>
+			</tr>
+			</tbody>
+		</table>
+	</figure>
+
+	<h2>Code blocks in the table</h2>
+	<figure class="table">
+		<table style="border-bottom:2px dashed hsl(0, 0%, 60%);border-left:2px dashed hsl(0, 0%, 60%);border-right:2px dashed hsl(0, 0%, 60%);border-top:2px dashed hsl(0, 0%, 60%);">
+			<tbody>
+			<tr>
+				<td style="text-align: center"><span class="text-big" style="font-weight: bold">Language</span></td>
+				<td style="text-align: center"><span class="text-big" style="font-weight: bold">Code snippet</span></td>
+				<td style="text-align: center"><span class="text-big" style="font-weight: bold">Language</span></td>
+				<td style="text-align: center"><span class="text-big" style="font-weight: bold">Code snippet</span></td>
+			</tr>
+			<tr>
+				<td style="text-align: center;vertical-align:top">CSS</td>
+				<td style="vertical-align:top">
+					<pre><code class="language-css">body {
+	color: red;
+}
+
+p {
+	font-size: 10px;
+}</code></pre></td>
+				<td style="text-align: center;vertical-align:top">PHP</td>
+				<td style="vertical-align:top"><pre><code class="language-php">&lt;?php
+
+function dump( array ...$args ) {
+	foreach ( $args as $item ) {
+		var_dump( $item );
+	}
+
+	die;
+}</code></pre></td>
+			</tr>
+			<tr>
+				<td style="text-align: center;vertical-align:top">JavaScript</td>
+				<td style="vertical-align:top">
+					<pre><code class="language-javascript">function foo() {
+	console.log( 'indented using 1 tab' );
+}
+
+function bar() {
+    console.log( 'indented using spaces' );
+}</code></pre></td>
+				<td style="text-align: center;vertical-align:top">Plaintext</td>
+				<td style="vertical-align:top"><pre><code class="language-plaintext">Plain text</code></pre></td>
+			</tr>
+			</tbody>
+		</table>
+	</figure>
+
+	<hr>
+
+	<h2>Link images + Link decorators</h2>
+
+	<table>
+		<tr>
+			<td>Linked text</td>
+			<td>Linked image (<code>figure > a > img</code>)</td>
+			<td>Linked image (<code>a > img</code>)</td>
+		</tr>
+		<tr>
+			<td>
+				<p>
+					<a href="https://cksource.com" target="_blank" rel="noopener noreferrer" download="download">https://cksource.com</a>
+				</p>
+			</td>
+			<td>
+				<figure class="image">
+					<a class="gallery" href="https://cksource.com">
+						<img src="sample.jpg" alt="bar">
+					</a>
+					<figcaption>Caption</figcaption>
+				</figure>
+			</td>
+			<td>
+				<a class="gallery" href="https://cksource.com" target="_blank" rel="noopener noreferrer" download="download">
+					<img src="sample.jpg" alt="bar">
+				</a>
+			</td>
+		</tr>
+	</table>
 </div>
 
 <style>