diff --git a/demo/client.ts b/demo/client.ts
index cafbcd0b..a8283461 100644
--- a/demo/client.ts
+++ b/demo/client.ts
@@ -530,5 +530,8 @@ function loadTest() {
 function addDecoration() {
   const marker = term.addMarker(1);
   const decoration = term.registerDecoration({ marker });
-  decoration.element.style.backgroundColor = 'red';
+  term.write('');
+  decoration.onRender(() => {
+    decoration.element.style.backgroundColor = 'red';
+  });
 }
diff --git a/src/browser/services/DecorationService.ts b/src/browser/services/DecorationService.ts
index a1b47ddb..bea34d9a 100644
--- a/src/browser/services/DecorationService.ts
+++ b/src/browser/services/DecorationService.ts
@@ -57,8 +57,7 @@ export class DecorationService extends Disposable implements IDecorationService
     }
   }
 }
-
-class Decoration extends Disposable implements IDecoration {
+export class Decoration extends Disposable implements IDecoration {
   private static _nextId = 1;
   private readonly _marker: IMarker;
   private _element: HTMLElement | undefined;
@@ -103,8 +102,8 @@ class Decoration extends Disposable implements IDecoration {
   }
 
   private _createElement(bufferService: IBufferService, renderService: IRenderService, recreate?: boolean): void {
-    if (recreate) {
-      this._container.removeChild(this._element!);
+    if (recreate && this._element) {
+      this._container.removeChild(this._element);
     }
     this._element = document.createElement('div');
     this._element.classList.add('xterm-decoration');
diff --git a/test/api/Terminal.api.ts b/test/api/Terminal.api.ts
index e5a04667..aab56a09 100644
--- a/test/api/Terminal.api.ts
+++ b/test/api/Terminal.api.ts
@@ -731,22 +731,50 @@ describe('API Integration Tests', function(): void {
     await pollFor(page, `window.term._core._renderService.dimensions.actualCellWidth > 0`, true);
   });
 
-  describe.only('registerDecoration', () => {
-    it('should register a decoration', async () => {
+  describe('registerDecoration', () => {
+    it('should register a decoration but not add the element until the first refresh call', async () => {
       await openTerminal(page);
+      await writeSync(page, '\\n\\n\\n\\n');
+      await writeSync(page, '\\n\\n\\n\\n');
       await page.evaluate(`window.marker = window.term.addMarker(1)`);
-      await page.evaluate(`window.decoration = window.term.registerDecoration({ marker: window.marker });`);
-      assert.notEqual(await page.evaluate(`document.querySelector('.xterm-screen .xterm-decoration')`), undefined);
+      await page.evaluate(`window.decoration = window.term.registerDecoration({ marker: window.marker });
+      window.decoration.onRender(() => {
+        window.rendered = true;
+      });`);
+      assert.equal(await page.evaluate(`window.rendered`), undefined);
+    });
+    it('should register a decoration and render it', async () => {
+      await openTerminal(page);
+      await writeSync(page, '\\n\\n\\n\\n');
+      await writeSync(page, '\\n\\n\\n\\n');
+      await page.evaluate(`window.marker = window.term.addMarker(1)`);
+      await page.evaluate(`window.decoration = window.term.registerDecoration({ marker: window.marker });
+      window.decoration.onRender(() => {
+        window.rendered = true;
+      });`);
+      assert.equal(await page.evaluate(`window.rendered`), true);
+    });
+    it('on resize should dispose of the old decoration and create a new one', async () => {
+      await openTerminal(page);
+      await writeSync(page, '\\n\\n\\n\\n');
+      await writeSync(page, '\\n\\n\\n\\n');
+      await page.evaluate(`window.marker = window.term.addMarker(1)`);
+      await page.evaluate(`window.decoration = window.term.registerDecoration({ marker: window.marker })`);
+      await page.evaluate(`window.term.resize(10, 5)`);
+      assert.equal(await page.evaluate(`document.querySelectorAll('.xterm-screen .xterm-decoration').length`), 1);
     });
     it('should return undefined when the marker has already been disposed of', async () => {
       await openTerminal(page);
+      await writeSync(page, '\\n\\n\\n\\n');
+      await writeSync(page, '\\n\\n\\n\\n');
       await page.evaluate(`window.marker = window.term.addMarker(1)`);
       await page.evaluate(`window.marker.dispose()`);
       assert.equal(await page.evaluate(`window.decoration = window.term.registerDecoration({ marker: window.marker });`), undefined);
-      assert.equal(await page.evaluate(`document.querySelector('.xterm-screen .xterm-decoration')`), undefined);
     });
     it('should throw when a negative x offset is provided', async () => {
       await openTerminal(page);
+      await writeSync(page, '\\n\\n\\n\\n');
+      await writeSync(page, '\\n\\n\\n\\n');
       await page.evaluate(`window.marker = window.term.addMarker(1)`);
       await page.evaluate(`
       try {
@@ -756,7 +784,6 @@ describe('API Integration Tests', function(): void {
       }
     `);
       await pollFor(page, 'window.throwMessage', 'This API only accepts positive integers');
-      assert.equal(await page.evaluate(`document.querySelector('.xterm-screen .xterm-decoration-container .xterm-decoration')`), undefined);
     });
   });