From a9722371e180a560eb21175bfbc953b7835d043e Mon Sep 17 00:00:00 2001
From: meganrogge <merogge@microsoft.com>
Date: Tue, 8 Feb 2022 15:14:36 -0600
Subject: [PATCH] add decoration test to demo

---
 demo/client.ts  | 8 ++++++++
 demo/index.html | 1 +
 2 files changed, 9 insertions(+)

diff --git a/demo/client.ts b/demo/client.ts
index 58d719a1..0ca4d4bf 100644
--- a/demo/client.ts
+++ b/demo/client.ts
@@ -149,6 +149,7 @@ if (document.location.pathname === '/test') {
   document.getElementById('serialize').addEventListener('click', serializeButtonHandler);
   document.getElementById('custom-glyph').addEventListener('click', writeCustomGlyphHandler);
   document.getElementById('load-test').addEventListener('click', loadTest);
+  document.getElementById('decoration').addEventListener('click', decoration);
 }
 
 function createTerminal(): void {
@@ -525,3 +526,10 @@ function loadTest() {
     term._core._onData.fire('\x03');
   });
 }
+
+function decoration() {
+  const marker = term.addMarker(1);
+  const decoration = term.registerDecoration({ marker });
+  decoration.element.style.backgroundColor = 'red';
+  decoration.element.style.position = 'absolute';
+}
diff --git a/demo/index.html b/demo/index.html
index 9c86783b..24ee68b5 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -64,6 +64,7 @@
             <button id="dispose" title="This is used to testing memory leaks">Dispose terminal</button>
             <button id="custom-glyph" title="Write custom box drawing and block element characters to the terminal">Test custom glyphs</button>
             <button id="load-test" title="Write several MB of data to simulate a lot of data coming from the process">Load test</button>
+            <button id="decoration" title="Add a decoration to the terminal">Decoration</button>
           </div>
         </div>
       </div>