From 61dce690cb1c16770d6a7dcc4dbe471dd365a7c9 Mon Sep 17 00:00:00 2001
From: Haydn Ewers <27211+haydn@users.noreply.github.com>
Date: Sun, 15 Sep 2024 20:45:03 +1000
Subject: [PATCH] improve handling of embedded content

---
 README.md         | 29 +++++++++++++++++++++--------
 tests/iframe.html |  2 ++
 tests/img.html    |  2 +-
 universal.css     | 15 ++++++++-------
 4 files changed, 32 insertions(+), 16 deletions(-)
 create mode 100644 tests/iframe.html

diff --git a/README.md b/README.md
index c63adf0..84e8954 100644
--- a/README.md
+++ b/README.md
@@ -5,32 +5,38 @@ just set the values you want.
 
 ## Features
 
-### Unsets browser defaults
+### Unset browser defaults
 
 The default styles are removed by a `all: unset` declaration applied to all
 elements **except the following**:
 
 - HTML `head` element
 - HTML [metadata content](https://developer.mozilla.org/en-US/docs/Web/HTML/Content_categories#metadata_content) elements
+- HTML [embedded content](https://developer.mozilla.org/en-US/docs/Web/HTML/Content_categories#embedded_content) elements
 - SVG elements
 - MathML elements
 
-### Uses box-sizing
+### Use box-sizing
 
-All visible HTML elements are given a `box-sizing: border-box` declaration.
+All HTML elements are given a `box-sizing: border-box` declaration except the
+`head` element and [metadata
+content](https://developer.mozilla.org/en-US/docs/Web/HTML/Content_categories#metadata_content)
+elements.
 
 All `::before` and `::after` pseudo-elements are given a `box-sizing: inherit`
 declaration.
 
-### Retains block elements
+### Retain block elements
 
 Following elements are given a `display: block` declaration:
 
 - `address`
 - `article`
 - `aside`
+- `audio`
 - `blockquote`
 - `body`
+- `canvas`
 - `dd`
 - `details`
 - `dialog`
@@ -51,16 +57,22 @@ Following elements are given a `display: block` declaration:
 - `header`
 - `hgroup`
 - `hr`
+- `iframe`
+- `img`
 - `li`
 - `main`
+- `math`
 - `nav`
+- `object`
 - `ol`
 - `p`
 - `pre`
 - `section`
+- `svg`
 - `ul`
+- `video`
 
-### Retains tables layout
+### Retain tables layout
 
 The `display` properties for table elements are reset back to their normal values:
 
@@ -72,10 +84,11 @@ The `display` properties for table elements are reset back to their normal value
 - `th` (`display: table-cell`)
 - `td` (`display: table-cell`)
 
-### Give embedded content sensible defaults
+### Sensible defaults for embedded content
 
-All embedded content elements are given `display: block` and `max-width: 100%`
-declarations:
+All [embedded
+content](https://developer.mozilla.org/en-US/docs/Web/HTML/Content_categories#embedded_content)
+elements are given `border: none` and `max-width: 100%` declarations:
 
 - `audio`
 - `canvas`
diff --git a/tests/iframe.html b/tests/iframe.html
new file mode 100644
index 0000000..9e8589a
--- /dev/null
+++ b/tests/iframe.html
@@ -0,0 +1,2 @@
+<link rel="stylesheet" type="text/css" href="../universal.css" />
+<iframe src="https://example.com/" width="800" height="600"></iframe>
diff --git a/tests/img.html b/tests/img.html
index 6079b69..c40ed7d 100644
--- a/tests/img.html
+++ b/tests/img.html
@@ -1,2 +1,2 @@
 <link rel="stylesheet" type="text/css" href="../universal.css" />
-<img src="https://placehold.co/600x400" alt="" />
+<img src="https://placehold.co/600x400" alt="" width="300" />
diff --git a/universal.css b/universal.css
index 41238cd..454a833 100644
--- a/universal.css
+++ b/universal.css
@@ -4,7 +4,6 @@ address,
 area,
 article,
 aside,
-audio,
 b,
 bdi,
 bdo,
@@ -12,7 +11,6 @@ blockquote,
 body,
 br,
 button,
-canvas,
 caption,
 cite,
 code,
@@ -46,8 +44,6 @@ hgroup,
 hr,
 html,
 i,
-iframe,
-img,
 input,
 ins,
 kbd,
@@ -60,7 +56,6 @@ mark,
 menu,
 meter,
 nav,
-object,
 ol,
 optgroup,
 option,
@@ -100,14 +95,19 @@ track,
 u,
 ul,
 var,
-video,
 wbr {
   all: unset;
   box-sizing: border-box;
 }
 
+audio,
+canvas,
+iframe,
+img,
+math,
+object,
 svg,
-math {
+video {
   box-sizing: border-box;
 }
 
@@ -188,5 +188,6 @@ math,
 object,
 svg,
 video {
+  border: none;
   max-width: 100%;
 }
-- 
2.51.2