Add underline test button to demo

demo/client.ts

@@ -161,6 +161,7 @@ if (document.location.pathname === '/test') {
   document.getElementById('custom-glyph').addEventListener('click', writeCustomGlyphHandler);
   document.getElementById('load-test').addEventListener('click', loadTest);
   document.getElementById('powerline-symbol-test').addEventListener('click', powerlineSymbolTest);
+  document.getElementById('underline-test').addEventListener('click', underlineTest);
   document.getElementById('add-decoration').addEventListener('click', addDecoration);
   document.getElementById('add-overview-ruler').addEventListener('click', addOverviewRuler);
 }
@@ -650,6 +651,23 @@ function powerlineSymbolTest() {
   term.writeln('nf-mdi-github_face (\\uFbd9) \ufbd9');
 }
 
+function underlineTest() {
+  function u(style: number): string {
+    return `\x1b[4:${style}m`;
+  }
+  function c(): string {
+    return '\x1b[0m';
+  }
+  term.write('\n\n\r');
+  term.writeln('Underline styles:');
+  term.writeln(`${u(0)}4:0m - No underline`);
+  term.writeln(`${u(1)}4:1m - Straight`);
+  term.writeln(`${u(2)}4:2m - Double`);
+  term.writeln(`${u(3)}4:3m - Curly`);
+  term.writeln(`${u(4)}4:4m - Dotted`);
+  term.writeln(`${u(5)}4:5m - Dashed\x1b[0m`);
+}
+
 function addDecoration() {
   term.options['overviewRulerWidth'] = 15;
   const marker = term.addMarker(1);

demo/index.html

@@ -77,6 +77,7 @@
               <dt>Styles</dt>
               <dd><button id="custom-glyph" title="Write custom box drawing and block element characters to the terminal">Test custom glyphs</button></dd>
               <dd><button id="powerline-symbol-test" title="Write powerline symbol characters to the terminal (\ue0a0+)">Powerline symbol test</button></dd>
+              <dd><button id="underline-test" title="Write text with Kitty's extended underline sequences">Underline test</button></dd>
 
               <dt>Decorations</dt>
               <dd><button id="add-decoration" title="Add a decoration to the terminal">Decoration</button></dd>