Add formatting and pre test case to merge lines file.

sanketj · Jul 2, 2024 · 7bb2e0c · 7bb2e0c
1 parent d8d08f2
commit 7bb2e0c
Showing 1 changed file with 52 additions and 13 deletions.
diff --git a/merge-lines.html b/merge-lines.html
@@ -1,4 +1,8 @@
 <style>
+    .container {
+        border: 2px solid black;
+    }
+
     .divStyle {
         display: block;
         unicode-bidi: isolate;
@@ -14,28 +18,63 @@
         font-weight: bold;
         unicode-bidi: isolate;
     }
+
+    .preStyle {
+        display: block;
+        font-family: monospace;
+        unicode-bidi: isolate;
+        white-space: pre;
+        margin: 1em 0px;
+    }
 </style>
 <div contenteditable="true">
-    <div>abc</div>
-    <div style="text-decoration: underline;">def</div>
+    <div class="container">
+        <h1>Div vs. span styled as div:</h1>
+        <br>
 
-    <br>
-
-    <span class="divStyle">abc</span>
-    <span class="divStyle" style="text-decoration: underline;">def</span>
+        <div>abc</div>
+        <div style="text-decoration: underline;">def</div>
+
+        <br>
+
+        <span class="divStyle">abc</span>
+        <span class="divStyle" style="text-decoration: underline;">def</span>
+    </div>
 
     <br>
+    <br>
+
+    <div class="container">
+        <h1>H1 vs. div styled as h1:</h1>
+        <br>
 
-    <h1>abc</h1>
-    <h1 style="text-decoration: underline;">def</h1>
+        <h1>abc</h1>
+        <h1 style="text-decoration: underline;">def</h1>
+
+        <br>
+
+        <div class="h1Style">abc</div>
+        <div class="h1Style" style="text-decoration: underline;">def</div>
+
+        <br>
+
+        <span class="h1Style">abc</span>
+        <span class="h1Style" style="text-decoration: underline;">def</span>
+    </div>
 
+    <br>
     <br>
 
-    <div class="h1Style">abc</div>
-    <div class="h1Style" style="text-decoration: underline;">def</div>
+    <div class="container">
+        <h1>Pre vs. span styled as pre:</h1>
+        <br>
 
-    <br>
+        <pre>abc</pre>
+        <pre style="text-decoration: underline;">def</pre>
+
+        <br>
 
-    <span class="h1Style">abc</span>
-    <span class="h1Style" style="text-decoration: underline;">def</span>
+        <span class="preStyle">abc</span>
+        <span class="preStyle" style="text-decoration: underline;">def</span>
+    </div>
 </div>