diff options
| author | Sam Atkins <atkinssj@serenityos.org> | 2021-09-19 17:02:41 +0100 |
|---|---|---|
| committer | Andreas Kling <kling@serenityos.org> | 2021-09-19 22:53:35 +0200 |
| commit | 14dc20118c3f4aa3293ee92d34a62330f091af40 (patch) | |
| tree | 3b260b1cb75b5264bf5dbd4a12d31e9582612868 | |
| parent | abc22b727c099ece8f13d9823b3e29de8769d61c (diff) | |
| download | serenity-14dc20118c3f4aa3293ee92d34a62330f091af40.zip | |
Base: Add page for testing styling on `display: inline` elements
| -rw-r--r-- | Base/res/html/misc/inline-node.html | 47 | ||||
| -rw-r--r-- | Base/res/html/misc/tile.png | bin | 0 -> 960 bytes | |||
| -rw-r--r-- | Base/res/html/misc/welcome.html | 1 |
3 files changed, 48 insertions, 0 deletions
diff --git a/Base/res/html/misc/inline-node.html b/Base/res/html/misc/inline-node.html new file mode 100644 index 0000000000..85d5f90d8e --- /dev/null +++ b/Base/res/html/misc/inline-node.html @@ -0,0 +1,47 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8"> + <title>Inline Node styling test</title> + <style> + body { + line-height: 200%; + } + + .box { + width: 150px; + height: 200px; + margin: 10px; + padding: 5px; + border: 1px solid black; + } + + .highlight { + background-color: orange; + border-radius: 6px; + } + + .bg-highlight { + background-image: url("tile.png"); + color: white; + border-radius: 6px; + } + + .br-highlight { + border: 2px solid green; + border-radius: 6px; + box-shadow: 4px 4px 4px darkgreen; + } + </style> +</head> +<body> + Hello world <span class="highlight">this is some text</span> not in a box. <span class="bg-highlight">This text has a background</span> and <span class="br-highlight">this text has a shadow!</span> + <div class="box" style="background-color: rgba(255, 0, 255, 0.5);"> + Hello world <span class="highlight">this is some text</span> in a box. <span class="bg-highlight">This text has a background</span> and <span class="br-highlight">this text has a shadow!</span> + </div> + <div class="box second"> + Hello world <span class="highlight">this is some text</span> in a box. <span class="bg-highlight">This text has a background</span> and <span class="br-highlight">this text has a shadow!</span> + </div> + <div style="background-color:red;width:3px">This text should only have a strip of red on the left</div> +</body> +</html> diff --git a/Base/res/html/misc/tile.png b/Base/res/html/misc/tile.png Binary files differnew file mode 100644 index 0000000000..36061e537d --- /dev/null +++ b/Base/res/html/misc/tile.png diff --git a/Base/res/html/misc/welcome.html b/Base/res/html/misc/welcome.html index c3abeb56fe..4984651f00 100644 --- a/Base/res/html/misc/welcome.html +++ b/Base/res/html/misc/welcome.html @@ -123,6 +123,7 @@ <li><a href="percent-css.html">Percentage values</a></li> <li><a href="position-absolute-top-left.html">position: absolute; for top and left</a></li> <li><a href="cascade-keywords.html">Cascade keywords (initial, inherit, unset)</a></li> + <li><a href="inline-node.html">Styling "inline" elements</a></li> </ul> <h2>JavaScript/Wasm</h2> |
