diff --git a/packages/playwright-core/src/web/htmlReport/htmlReport.css b/packages/playwright-core/src/web/htmlReport/htmlReport.css
index 527f0e9d7e..ba96c5e3d9 100644
--- a/packages/playwright-core/src/web/htmlReport/htmlReport.css
+++ b/packages/playwright-core/src/web/htmlReport/htmlReport.css
@@ -136,6 +136,8 @@ svg {
   font-family: monospace;
   background-color: var(--color-canvas-subtle);
   margin-left: 24px;
+  line-height: normal;
+  padding: 5px;
 }
 
 .test-result > div {
diff --git a/packages/playwright-test/src/reporters/html.ts b/packages/playwright-test/src/reporters/html.ts
index 49bbbc99dd..95310fdf88 100644
--- a/packages/playwright-test/src/reporters/html.ts
+++ b/packages/playwright-test/src/reporters/html.ts
@@ -25,6 +25,7 @@ import { calculateSha1, removeFolders } from 'playwright-core/lib/utils/utils';
 import RawReporter, { JsonReport, JsonSuite, JsonTestCase, JsonTestResult, JsonTestStep, JsonAttachment } from './raw';
 import assert from 'assert';
 import yazl from 'yazl';
+import { stripAnsiEscapes } from './base';
 
 export type Stats = {
   total: number;
@@ -385,13 +386,14 @@ class HtmlBuilder {
           };
         }
 
-        if ((a.name === 'stdout' || a.name === 'stderr') &&
-          a.contentType === 'text/plain' &&
-          lastAttachment &&
-          lastAttachment.name === a.name &&
-          lastAttachment.contentType === a.contentType) {
-          lastAttachment.body += a.body as string;
-          return null;
+        if ((a.name === 'stdout' || a.name === 'stderr') && a.contentType === 'text/plain') {
+          if (lastAttachment &&
+            lastAttachment.name === a.name &&
+            lastAttachment.contentType === a.contentType) {
+            lastAttachment.body += stripAnsiEscapes(a.body as string);
+            return null;
+          }
+          a.body = stripAnsiEscapes(a.body as string);
         }
         lastAttachment = a;
         return a;