test cases for DOM renderer style changes

src/renderer/dom/DomRendererRowFactory.test.ts

@@ -151,6 +151,28 @@ describe('DomRendererRowFactory', () => {
           );
         }
       });
+
+      it('should set style attribute for RBG', () => {
+        const cell = CellData.fromCharData([0, 'a', 1, 'a'.charCodeAt(0)]);
+        cell.fg |= Attributes.CM_RGB | 1 << 16 | 2 << 8 | 3;
+        cell.bg |= Attributes.CM_RGB | 4 << 16 | 5 << 8 | 6;
+        lineData.setCell(0, cell);
+        const fragment = rowFactory.createRow(lineData, false, undefined, 0, 5, 20);
+        assert.equal(getFragmentHtml(fragment),
+          '<span style="color:rgb(1,2,3);background-color:rgb(4,5,6);">a</span>'
+        );
+      });
+
+      it('should correctly invert RGB colors', () => {
+        const cell = CellData.fromCharData([0, 'a', 1, 'a'.charCodeAt(0)]);
+        cell.fg |= Attributes.CM_RGB | 1 << 16 | 2 << 8 | 3 | FgFlags.INVERSE;
+        cell.bg |= Attributes.CM_RGB | 4 << 16 | 5 << 8 | 6;
+        lineData.setCell(0, cell);
+        const fragment = rowFactory.createRow(lineData, false, undefined, 0, 5, 20);
+        assert.equal(getFragmentHtml(fragment),
+          '<span style="background-color:rgb(1,2,3);color:rgb(4,5,6);">a</span>'
+        );
+      });
     });
   });
 

src/renderer/dom/DomRendererRowFactory.ts

@@ -83,7 +83,7 @@ export class DomRendererRowFactory {
       // fg
       if (this._cell.isFgRGB()) {
         let style = charElement.getAttribute('style') || '';
-        style += `${swapColor ? 'background-' : ''}color: rgb(${(this._cell.getFgColor(true) as number[]).join(',')});`;
+        style += `${swapColor ? 'background-' : ''}color:rgb(${(this._cell.getFgColor(true) as number[]).join(',')});`;
         charElement.setAttribute('style', style);
       } else if (this._cell.isFgPalette()) {
         let fg = this._cell.getFgColor() as number;
@@ -98,7 +98,7 @@ export class DomRendererRowFactory {
       // bg
       if (this._cell.isBgRGB()) {
         let style = charElement.getAttribute('style') || '';
-        style += `${swapColor ? '' : 'background-'}color: rgb(${(this._cell.getBgColor(true) as number[]).join(',')});`;
+        style += `${swapColor ? '' : 'background-'}color:rgb(${(this._cell.getBgColor(true) as number[]).join(',')});`;
         charElement.setAttribute('style', style);
       } else if (this._cell.isBgPalette()) {
         charElement.classList.add(`xterm-${swapColor ? 'f' : 'b'}g-${this._cell.getBgColor()}`);