Load CSS default HTML element styles from a CSS file with no specificity. This simplyfies how to setup the HTML defaults. Also set new defaults matching closer HTML spec.

2026-05-28 17:16:29 +03:00 · 2026-05-24 13:15:31 -03:00
parent bb7682dd8f
commit aa9efcf13b
28 changed files with 407 additions and 188 deletions
--- a/bin/assets/ui/breeze.css
+++ b/bin/assets/ui/breeze.css
@@ -52,91 +52,13 @@
 	droppable-hovering-color: #FFFFFF20;
 }

-MarkdownView > *,
-body {
-	color: var(--font);
-}
-
-b,
-strong {
-	font-style: bold;
-}
-
-small {
-	font-size: smaller;
-}
-
-u,
-ins {
-	text-decoration: underline;
-}
-
-s,
-del {
-	text-decoration: strikethrough;
-}
-
-i,
-em,
-cite {
-	font-style: italic;
-}
-
-CodeEditor,
-code,
-kbd {
-	font-family: monospace;
-}
-
-h1 {
-	font-size: 2em;
-	font-weight: bold;
-}
-
-h2 {
-	font-size: 1.5em;
-	font-weight: bold;
-}
-
-h3 {
-	font-size: 1.17em;
-	font-weight: bold;
-}
-
-h4 {
-	font-size: 1em;
-	font-weight: bold;
-}
-
-h5 {
-	font-size: 0.83em;
-	font-weight: bold;
-}
-
-h6 {
-	font-size: 0.67em;
-	font-weight: bold;
-}
-
-a {
-	cursor: arrow;
-	text-decoration: none;
-}
-
-a:hover {
-	text-decoration: underline;
-	cursor: hand;
-}
-
-sub,
-sup {
-	font-size: smaller;
-}
-
-blockquote {
-	padding-left: 8dp;
+MarkdownView {
 	background-color: var(--list-back);
-	border-left: 2dp solid var(--tab-line);
+	padding: 4dp;
+}
+
+MarkdownView body {
+	color: var(--font);
 }

 MarkdownView p,
@@ -171,11 +93,6 @@ MarkdownView a:hover {
 	color: var(--font-highlight);
 }

-MarkdownView {
-	background-color: var(--list-back);
-	padding: 4dp;
-}
-
 MarkdownView li > p { margin: 0; }
 MarkdownView blockquote > *:first-child { margin-top: 0dp; }
 MarkdownView blockquote > *:last-child { margin-bottom: 0dp; }
--- a/bin/unit_tests/assets/html/eepp-uihtmltable-complex-layout-2.webp
+++ b/bin/unit_tests/assets/html/eepp-uihtmltable-complex-layout-2.webp
--- a/bin/unit_tests/assets/html/element_defaults.html
+++ b/bin/unit_tests/assets/html/element_defaults.html
@@ -0,0 +1,146 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>HTML Element Defaults</title>
+<style>
+  body { font-family: sans-serif; padding: 20px; }
+  h2 { border-bottom: 1px solid #ccc; margin-top: 32px; }
+  .group { margin-bottom: 24px; }
+  .row { margin: 4px 0; }
+  .label { display: inline-block; min-width: 130px; color: #555; font-size: 12px; }
+  table { border-collapse: collapse; }
+  td, th { border: 1px solid #ccc; padding: 4px 8px; }
+</style>
+</head>
+<body>
+<h1>HTML Element Default Styles</h1>
+<p>This page exercises all elements whose defaults were moved to widget-creation code.</p>
+
+<h2>Headings</h2>
+<div class="group">
+  <h1>Heading 1 &mdash; The quick brown fox</h1>
+  <h2>Heading 2 &mdash; The quick brown fox</h2>
+  <h3>Heading 3 &mdash; The quick brown fox</h3>
+  <h4>Heading 4 &mdash; The quick brown fox</h4>
+  <h5>Heading 5 &mdash; The quick brown fox</h5>
+  <h6>Heading 6 &mdash; The quick brown fox</h6>
+</div>
+
+<h2>Inline Text Semantics</h2>
+<div class="group">
+  <div class="row"><span class="label">b / strong</span> <b>bold text</b> <strong>strong text</strong></div>
+  <div class="row"><span class="label">i / em / cite</span> <i>italic text</i> <em>emphasized</em> <cite>citation</cite></div>
+  <div class="row"><span class="label">u / ins</span> <u>underlined</u> <ins>inserted</ins></div>
+  <div class="row"><span class="label">s / del</span> <s>strikethrough</s> <del>deleted</del></div>
+  <div class="row"><span class="label">small</span> <small>small text</small></div>
+  <div class="row"><span class="label">code / kbd</span> <code>function()</code> <kbd>Ctrl+C</kbd></div>
+  <div class="row"><span class="label">sub / sup</span> H<sub>2</sub>O and E=mc<sup>2</sup></div>
+  <div class="row"><span class="label">a (link)</span> <a href="#">clickable link</a></div>
+  <div class="row"><span class="label">a (visited)</span> <a href="">visited link</a></div>
+  <div class="row"><span class="label">a (hover)</span> <a href="#" style="text-decoration:underline;cursor:hand;">hovered link</a></div>
+  <div class="row"><span class="label">mark</span> <mark>highlighted text</mark></div>
+</div>
+
+<h2>Block Elements</h2>
+<div class="group">
+  <p>A paragraph of text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+  <p>Another paragraph with a <br>line break in the middle.</p>
+  <hr>
+  <pre>preformatted text
+    with spaces
+  and newlines</pre>
+  <blockquote>
+    <p>This is a blockquote. It should have left border, left padding, and background.</p>
+    <p>Multiple paragraphs in a blockquote.</p>
+  </blockquote>
+  <div>A div container with no special styling</div>
+</div>
+
+<h2>Lists</h2>
+<div class="group">
+  <ul>
+    <li>Unordered list item 1</li>
+    <li>Unordered list item 2
+      <ul>
+        <li>Nested item A</li>
+        <li>Nested item B</li>
+      </ul>
+    </li>
+    <li>Unordered list item 3</li>
+  </ul>
+  <ol>
+    <li>Ordered list item 1</li>
+    <li>Ordered list item 2
+      <ol>
+        <li>Nested numbered item A</li>
+        <li>Nested numbered item B</li>
+      </ol>
+    </li>
+    <li>Ordered list item 3</li>
+  </ol>
+</div>
+<h2>Form Controls &mdash; Text Inputs</h2>
+
+<div class="group">
+  <div class="row"><span class="label">text</span> <input type="text" value="default text input" style="width:200px"></div>
+  <div class="row"><span class="label">text (empty)</span> <input type="text" placeholder="placeholder text" style="width:200px"></div>
+  <div class="row"><span class="label">password</span> <input type="password" value="secret" style="width:200px"></div>
+  <div class="row"><span class="label">number</span> <input type="number" value="42" style="width:100px"></div>
+  <div class="row"><span class="label">textarea</span> <textarea rows="4" cols="40">Textarea content</textarea></div>
+</div>
+
+<h2>Form Controls &mdash; Buttons</h2>
+<div class="group">
+  <div class="row"><span class="label">submit</span> <input type="submit" value="Submit"></div>
+  <div class="row"><span class="label">button</span> <input type="button" value="Button"></div>
+  <div class="row"><span class="label">reset</span> <input type="reset" value="Reset"></div>
+</div>
+
+<h2>Form Controls &mdash; Checkboxes</h2>
+<div class="group">
+  <div class="row"><span class="label">checkbox</span> <input type="checkbox" checked> Option A <input type="checkbox"> Option B</div>
+  <div class="row"><span class="label">radio</span> <input type="radio" name="r" checked> Choice 1 <input type="radio" name="r"> Choice 2</div>
+</div>
+
+<h2>Tables</h2>
+<div class="group">
+  <table>
+    <thead>
+      <tr><th>Header A</th><th>Header B</th><th>Header C</th></tr>
+    </thead>
+    <tbody>
+      <tr><td>Cell 1</td><td>Cell 2</td><td>Cell 3</td></tr>
+      <tr><td>Cell 4</td><td>Cell 5</td><td>Cell 6</td></tr>
+    </tbody>
+    <tfoot>
+      <tr><td>Footer 1</td><td>Footer 2</td><td>Footer 3</td></tr>
+    </tfoot>
+  </table>
+</div>
+
+<h2>Details / Summary</h2>
+<div class="group">
+  <details>
+    <summary>Click to expand details</summary>
+    <p>Hidden content revealed when summary is clicked.</p>
+  </details>
+  <details open>
+    <summary>Already open details</summary>
+    <p>This content is visible by default.</p>
+  </details>
+</div>
+
+<h2>Misc</h2>
+<div class="group">
+  <div class="row"><span class="label">image</span> <img src="triangle.svg" width="32" height="32" alt="triangle"></div>
+  <div class="row"><span class="label">fieldset</span>
+    <fieldset>
+      <legend>Legend</legend>
+      Fieldset content
+    </fieldset>
+  </div>
+  <div class="row"><span class="label">hidden input</span> <input type="hidden" value="should be invisible"> (should not be visible)</div>
+</div>
+</body>
+</html>
--- a/bin/unit_tests/assets/html/lobsters_item.html
+++ b/bin/unit_tests/assets/html/lobsters_item.html
@@ -1,5 +1,6 @@
 <!DOCTYPE html>
 <html lang=en>
+<head>
 <title>Lobsters</title>
 <style>
    :root {
@@ -156,3 +157,6 @@
            </li>
        </ol>
    </div>
+</body>
+
+</html>