sideways: Improve test coverage of vertical fieldsets

This CL updates fieldsets.html so that it covers vertical-rl, sideways-rl, and sideways-lr writing-modes. This CL has no behavior changes. Bug: 40501131 Change-Id: I2bae51d6ab372e03c3dfbb2ae9ef0f222360c7f1 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5823494 Commit-Queue: Koji Ishii <kojii@chromium.org> Auto-Submit: Kent Tamura <tkent@chromium.org> Reviewed-by: Koji Ishii <kojii@chromium.org> Cr-Commit-Position: refs/heads/main@{#1349037}
chromium · Sep 9, 2024 · 1237044 · 1237044
1 parent 408e0dd
commit 1237044
Show file tree

Hide file tree

Showing 4 changed files with 113 additions and 34 deletions.
diff --git a/third_party/blink/web_tests/fast/writing-mode/fieldsets.html b/third_party/blink/web_tests/fast/writing-mode/fieldsets.html
@@ -3,81 +3,160 @@
 <style>
 fieldset
 {
-    inline-size:200px;
-    block-size:100px;
-    margin:1em;
+    inline-size:100px;
+    block-size:30px;
+    margin:0.5em;
     display:inline-block;
+    font-size: 10px;
 }
 
 div
 {
-    inline-size:100px;
-    block-size:25px;
+    inline-size:50px;
+    block-size:8px;
     background-color:orange;
 }
 
 </style>
 </head>
 
-LTR fieldset with left/center/right text-align: <br>
+Horizontal-rb fieldset with left/center/right text-align: <br>
 
 <fieldset>
-<legend style="text-align:left; margin-left:20px"><div></div></legend>
-</fieldset>
+<legend style="text-align:left; margin-left:10px"><div></div></legend>
+LTR</fieldset>
 
 <fieldset>
-<legend style="text-align:right; margin-right:20px"><div></div></legend>
-</fieldset>
+<legend style="text-align:right; margin-right:10px"><div></div></legend>
+LTR</fieldset>
 
 <fieldset>
 <legend style="text-align:center;"><div></div></legend>
-</fieldset>
+LTR</fieldset>
 
 <br>
 
-RTL fieldset with left/center/right text-align: <br>
-
 <fieldset dir=rtl>
-<legend style="text-align:left; margin-left:20px"><div></div></legend>
-</fieldset>
+<legend style="text-align:left; margin-left:10px"><div></div></legend>
+RTL</fieldset>
 
 <fieldset dir=rtl>
-<legend style="text-align:right; margin-right:20px"><div></div></legend>
-</fieldset>
+<legend style="text-align:right; margin-right:10px"><div></div></legend>
+RTL</fieldset>
 
 <fieldset dir=rtl>
 <legend style="text-align:center;"><div></div></legend>
-</fieldset>
+RTL</fieldset>
 
-<br>
+<span style="display:block; column-count:2">
 
-Vertical LTR fieldset with left/center/right text-align: <br>
+Vertical-lr fieldset with left/center/right text-align: <br>
 
 <fieldset style="-webkit-writing-mode:vertical-lr">
-<legend style="text-align:left; margin-top:20px"><div></div></legend>
-</fieldset>
+<legend style="text-align:left; margin-top:10px"><div></div></legend>
+LTR</fieldset>
 
 <fieldset style="-webkit-writing-mode:vertical-lr">
-<legend style="text-align:right; margin-bottom:20px"><div></div></legend>
-</fieldset>
+<legend style="text-align:right; margin-bottom:10px"><div></div></legend>
+LTR</fieldset>
 
 <fieldset style="-webkit-writing-mode:vertical-lr">
 <legend style="text-align:center"><div></div></legend>
-</fieldset>
+LTR</fieldset>
+
+<fieldset dir=rtl style="-webkit-writing-mode:vertical-lr">
+<legend style="text-align:left; margin-top:10px"><div></div></legend>
+RTL</fieldset>
+
+<fieldset dir=rtl style="-webkit-writing-mode:vertical-lr">
+<legend style="text-align:right; margin-bottom:10px"><div></div></legend>
+RTL</fieldset>
+
+<fieldset dir=rtl style="-webkit-writing-mode:vertical-lr">
+<legend style="text-align:center"><div></div></legend>
+RTL</fieldset>
 
 
 <br>
+Vertical-rl fieldset with left/center/right text-align: <br>
+<fieldset style="writing-mode:vertical-rl">
+<legend style="text-align:left; margin-top:10px"><div></div></legend>
+LTR</fieldset>
 
-Vertical RTL fieldset with left/center/right text-align: <br>
+<fieldset style="writing-mode:vertical-rl">
+<legend style="text-align:right; margin-bottom:10px"><div></div></legend>
+LTR</fieldset>
 
-<fieldset dir=rtl style="-webkit-writing-mode:vertical-lr">
-<legend style="text-align:left; margin-top:20px"><div></div></legend>
-</fieldset>
+<fieldset style="writing-mode:vertical-rl">
+<legend style="text-align:center"><div></div></legend>
+LTR</fieldset>
 
-<fieldset dir=rtl style="-webkit-writing-mode:vertical-lr">
-<legend style="text-align:right; margin-bottom:20px"><div></div></legend>
-</fieldset>
+<fieldset dir=rtl style="writing-mode:vertical-rl">
+<legend style="text-align:left; margin-top:10px"><div></div></legend>
+RTL</fieldset>
 
-<fieldset dir=rtl style="-webkit-writing-mode:vertical-lr">
+<fieldset dir=rtl style="writing-mode:vertical-rl">
+<legend style="text-align:right; margin-bottom:10px"><div></div></legend>
+RTL</fieldset>
+
+<fieldset dir=rtl style="writing-mode:vertical-rl">
 <legend style="text-align:center"><div></div></legend>
-</fieldset>
+RTL</fieldset>
+
+<br>
+
+Sideways-lr fieldset with left/center/right text-align: <br>
+
+<fieldset style="writing-mode:sideways-lr">
+<legend style="text-align:left; margin-bottom:10px"><div></div></legend>
+LTR</fieldset>
+
+<fieldset style="writing-mode:sideways-lr">
+<legend style="text-align:right; margin-top:10px"><div></div></legend>
+LTR</fieldset>
+
+<fieldset style="writing-mode:sideways-lr">
+<legend style="text-align:center"><div></div></legend>
+LTR</fieldset>
+
+<fieldset dir=rtl style="writing-mode:sideways-lr">
+<legend style="text-align:left; margin-bottom:10px"><div></div></legend>
+RTL</fieldset>
+
+<fieldset dir=rtl style="writing-mode:sideways-lr">
+<legend style="text-align:right; margin-top:10px"><div></div></legend>
+RTL</fieldset>
+
+<fieldset dir=rtl style="writing-mode:sideways-lr">
+<legend style="text-align:center"><div></div></legend>
+RTL</fieldset>
+
+
+<br>
+Sideways-rl fieldset with left/center/right text-align: <br>
+<fieldset style="writing-mode:sideways-rl">
+<legend style="text-align:left; margin-top:10px"><div></div></legend>
+LTR</fieldset>
+
+<fieldset style="writing-mode:sideways-rl">
+<legend style="text-align:right; margin-bottom:10px"><div></div></legend>
+LTR</fieldset>
+
+<fieldset style="writing-mode:sideways-rl">
+<legend style="text-align:center"><div></div></legend>
+LTR</fieldset>
+
+<fieldset dir=rtl style="writing-mode:sideways-rl">
+<legend style="text-align:left; margin-top:10px"><div></div></legend>
+RTL</fieldset>
+
+<fieldset dir=rtl style="writing-mode:sideways-rl">
+<legend style="text-align:right; margin-bottom:10px"><div></div></legend>
+RTL</fieldset>
+
+<fieldset dir=rtl style="writing-mode:sideways-rl">
+<legend style="text-align:center"><div></div></legend>
+RTL</fieldset>
+
+
+</span>
diff --git a/...d_party/blink/web_tests/platform/linux/fast/writing-mode/fieldsets-expected.png b/...d_party/blink/web_tests/platform/linux/fast/writing-mode/fieldsets-expected.png
diff --git a/third_party/blink/web_tests/platform/mac/fast/writing-mode/fieldsets-expected.png b/third_party/blink/web_tests/platform/mac/fast/writing-mode/fieldsets-expected.png
diff --git a/third_party/blink/web_tests/platform/win/fast/writing-mode/fieldsets-expected.png b/third_party/blink/web_tests/platform/win/fast/writing-mode/fieldsets-expected.png