fix(html): html reporter fixes (#10770)

packages/playwright-core/src/web/htmlReport/htmlReport.css

@@ -80,7 +80,7 @@ svg {
 
 .test-case-column {
   border-radius: 6px;
-  margin: 20px;
+  margin: 20px 0;
 }
 
 .tree-item {

packages/playwright-core/src/web/htmlReport/htmlReport.tsx

@@ -189,6 +189,9 @@ const TestCaseView: React.FC<{
 
   const [selectedResultIndex, setSelectedResultIndex] = React.useState(0);
   return <div className='test-case-column vbox'>
+    <div className='status-container ml-2 pl-2 d-flex' style={{ flexFlow: 'row-reverse' }}>
+      <StatsNavView stats={report.stats}></StatsNavView>
+    </div>
     {test && <div className='test-case-path'>{test.path.join(' › ')}</div>}
     {test && <div className='test-case-title'>{test?.title}</div>}
     {test && <div className='test-case-location'>{test.location.file}:{test.location.line}</div>}
@@ -279,7 +282,7 @@ const StepTreeItem: React.FC<{
 }> = ({ step, depth }) => {
   return <TreeItem title={<span>
     <span style={{ float: 'right' }}>{msToString(step.duration)}</span>
-    {statusIcon(step.error ? 'failed' : 'passed')}
+    {statusIcon(step.error || step.duration === -1 ? 'failed' : 'passed')}
     <span>{step.title}</span>
     {step.location && <span className='test-summary-path'>— {step.location.file}:{step.location.line}</span>}
   </span>} loadChildren={step.steps.length + (step.snippet ? 1 : 0) ? () => {

packages/playwright-test/src/dispatcher.ts

@@ -195,7 +195,7 @@ export class Dispatcher {
         parent: parentStep,
         category: params.category,
         startTime: new Date(params.wallTime),
-        duration: 0,
+        duration: -1,
         steps: [],
         location: params.location,
         data: {},

tests/playwright-test/reporter-html.spec.ts

@@ -248,3 +248,29 @@ test('should show trace title', async ({ runInlineTest, page, showReport }) => {
   await page.click('img');
   await expect(page.locator('.workbench .title')).toHaveText('a.test.js:6 › passes');
 });
+
+test('should show timed out steps', async ({ runInlineTest, page, showReport }) => {
+  const result = await runInlineTest({
+    'playwright.config.js': `
+      module.exports = { timeout: 500 };
+    `,
+    'a.test.js': `
+      const { test } = pwt;
+      test('fails', async ({ page }) => {
+        await test.step('outer step', async () => {
+          await test.step('inner step', async () => {
+            await new Promise(() => {});
+          });
+        });
+      });
+    `,
+  }, { reporter: 'dot,html' });
+  expect(result.exitCode).toBe(1);
+  expect(result.passed).toBe(0);
+
+  await showReport();
+  await page.click('text=fails');
+  await page.click('text=outer step');
+  await expect(page.locator('.tree-item:has-text("outer step") svg.color-text-danger')).toHaveCount(2);
+  await expect(page.locator('.tree-item:has-text("inner step") svg.color-text-danger')).toHaveCount(2);
+});