LibWeb: Use logical properties in UA stylesheet

tcl3 · AtkinsSJ · commit 5294559f7bf1 · 2025-10-24T10:11:49.000+01:00
diff --git a/Libraries/LibWeb/CSS/Default.css b/Libraries/LibWeb/CSS/Default.css
@@ -209,13 +209,11 @@ header, hr, legend, listing, main, p, plaintext, pre, search, xmp {
 }
 
 blockquote, figure, listing, p, plaintext, pre, xmp {
-    margin-top: 1em;
-    margin-bottom: 1em;
+    margin-block: 1em;
 }
 
 blockquote, figure {
-    margin-left: 40px;
-    margin-right: 40px;
+    margin-inline: 40px;
 }
 
 address {
@@ -449,43 +447,37 @@ article, aside, :heading, hgroup, nav, section {
 }
 
 h1 {
-    margin-top: 0.67em;
-    margin-bottom: 0.67em;
+    margin-block: 0.67em;
     font-size: 2.00em;
     font-weight: bold;
 }
 
 h2 {
-    margin-top: 0.83em;
-    margin-bottom: 0.83em;
+    margin-block: 0.83em;
     font-size: 1.50em;
     font-weight: bold;
 }
 
 h3 {
-    margin-top: 1.00em;
-    margin-bottom: 1.00em;
+    margin-block: 1.00em;
     font-size: 1.17em;
     font-weight: bold;
 }
 
 h4 {
-    margin-top: 1.33em;
-    margin-bottom: 1.33em;
+    margin-block: 1.33em;
     font-size: 1.00em;
     font-weight: bold;
 }
 
 h5 {
-    margin-top: 1.67em;
-    margin-bottom: 1.67em;
+    margin-block: 1.67em;
     font-size: 0.83em;
     font-weight: bold;
 }
 
 h6 {
-    margin-top: 2.33em;
-    margin-bottom: 2.33em;
+    margin-block: 2.33em;
     font-size: 0.67em;
     font-weight: bold;
 }
@@ -724,8 +716,7 @@ fieldset {
 }
 
 legend {
-    padding-left: 2px;
-    padding-right: 2px;
+    padding-inline: 2px;
 }
 
 legend[align=left i] {
diff --git a/Tests/LibWeb/Ref/expected/wpt-import/html/rendering/the-css-user-agent-style-sheet-and-presentational-hints/pre-margin-block-ref.html b/Tests/LibWeb/Ref/expected/wpt-import/html/rendering/the-css-user-agent-style-sheet-and-presentational-hints/pre-margin-block-ref.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<style>
+html {
+  writing-mode: vertical-rl;
+}
+blockquote, figure, listing, p, plaintext, pre, xmp {
+  margin-block: 1em;
+}
+</style>
+
+<pre>pre</pre>
+<xmp>xmp</xmp>
+<listing>listing</listing>
+<blockquote>blockquote</blockquote>
+<figure>figure</figure>
+<p>p</p>
+<plaintext>plaintext
diff --git a/Tests/LibWeb/Ref/input/wpt-import/html/rendering/the-css-user-agent-style-sheet-and-presentational-hints/pre-margin-block.html b/Tests/LibWeb/Ref/input/wpt-import/html/rendering/the-css-user-agent-style-sheet-and-presentational-hints/pre-margin-block.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<link rel=author href="mailto:jarhar@chromium.org">
+<link rel=help href="https://html.spec.whatwg.org/multipage/rendering.html#the-css-user-agent-style-sheet-and-presentational-hints">
+<link rel=help href="https://issues.chromium.org/issues/407315792">
+<link rel=match href="../../../../../expected/wpt-import/html/rendering/the-css-user-agent-style-sheet-and-presentational-hints/pre-margin-block-ref.html">
+
+<!--
+This is a test for the following UA style rule in the HTML spec:
+
+blockquote, figure, listing, p, plaintext, pre, xmp {
+  margin-block: 1em;
+}
+-->
+
+<style>
+html {
+  writing-mode: vertical-rl;
+}
+</style>
+
+<pre>pre</pre>
+<xmp>xmp</xmp>
+<listing>listing</listing>
+<blockquote>blockquote</blockquote>
+<figure>figure</figure>
+<p>p</p>
+<plaintext>plaintext

Original file line number	Diff line number	Diff line change
`@@ -209,13 +209,11 @@ header, hr, legend, listing, main, p, plaintext, pre, search, xmp {`
`209`	`209`	`}`
`210`	`210`
`211`	`211`	`blockquote, figure, listing, p, plaintext, pre, xmp {`
`212`		`- margin-top: 1em;`
`213`		`- margin-bottom: 1em;`
	`212`	`+ margin-block: 1em;`
`214`	`213`	`}`
`215`	`214`
`216`	`215`	`blockquote, figure {`
`217`		`- margin-left: 40px;`
`218`		`- margin-right: 40px;`
	`216`	`+ margin-inline: 40px;`
`219`	`217`	`}`
`220`	`218`
`221`	`219`	`address {`
`@@ -449,43 +447,37 @@ article, aside, :heading, hgroup, nav, section {`
`449`	`447`	`}`
`450`	`448`
`451`	`449`	`h1 {`
`452`		`- margin-top: 0.67em;`
`453`		`- margin-bottom: 0.67em;`
	`450`	`+ margin-block: 0.67em;`
`454`	`451`	`font-size: 2.00em;`
`455`	`452`	`font-weight: bold;`
`456`	`453`	`}`
`457`	`454`
`458`	`455`	`h2 {`
`459`		`- margin-top: 0.83em;`
`460`		`- margin-bottom: 0.83em;`
	`456`	`+ margin-block: 0.83em;`
`461`	`457`	`font-size: 1.50em;`
`462`	`458`	`font-weight: bold;`
`463`	`459`	`}`
`464`	`460`
`465`	`461`	`h3 {`
`466`		`- margin-top: 1.00em;`
`467`		`- margin-bottom: 1.00em;`
	`462`	`+ margin-block: 1.00em;`
`468`	`463`	`font-size: 1.17em;`
`469`	`464`	`font-weight: bold;`
`470`	`465`	`}`
`471`	`466`
`472`	`467`	`h4 {`
`473`		`- margin-top: 1.33em;`
`474`		`- margin-bottom: 1.33em;`
	`468`	`+ margin-block: 1.33em;`
`475`	`469`	`font-size: 1.00em;`
`476`	`470`	`font-weight: bold;`
`477`	`471`	`}`
`478`	`472`
`479`	`473`	`h5 {`
`480`		`- margin-top: 1.67em;`
`481`		`- margin-bottom: 1.67em;`
	`474`	`+ margin-block: 1.67em;`
`482`	`475`	`font-size: 0.83em;`
`483`	`476`	`font-weight: bold;`
`484`	`477`	`}`
`485`	`478`
`486`	`479`	`h6 {`
`487`		`- margin-top: 2.33em;`
`488`		`- margin-bottom: 2.33em;`
	`480`	`+ margin-block: 2.33em;`
`489`	`481`	`font-size: 0.67em;`
`490`	`482`	`font-weight: bold;`
`491`	`483`	`}`
`@@ -724,8 +716,7 @@ fieldset {`
`724`	`716`	`}`
`725`	`717`
`726`	`718`	`legend {`
`727`		`- padding-left: 2px;`
`728`		`- padding-right: 2px;`
	`719`	`+ padding-inline: 2px;`
`729`	`720`	`}`
`730`	`721`
`731`	`722`	`legend[align=left i] {`