Add a test for this default style quarto applies

Author: cderv

tests/docs/playwright/html/.gitignore

@@ -0,0 +1,2 @@
+*_files/
+*.html

tests/docs/playwright/html/markdown-tables.qmd

@@ -0,0 +1,32 @@
+---
+title: Markdown Tables
+---
+
+They should be styled by Quarto 
+
+| Col1 | Col2 | Col3 |
+|------|------|------|
+| A    | B    | C    |
+| E    | F    | G    |
+| A    | G    | G    |
+
+: My Caption {#tbl-letters}
+
+See @tbl-letters.
+
+## Computational table
+
+<!-- This is equivalent to intermediate markdown from a `knitr::kable()` output with `echo: false` -->
+
+:::: cell
+::: cell-output-display
+| Sepal.Length | Sepal.Width | Petal.Length | Petal.Width | Species |
+|-------------:|------------:|-------------:|------------:|:--------|
+|          5.1 |         3.5 |          1.4 |         0.2 | setosa  |
+|          4.9 |         3.0 |          1.4 |         0.2 | setosa  |
+|          4.7 |         3.2 |          1.3 |         0.2 | setosa  |
+|          4.6 |         3.1 |          1.5 |         0.2 | setosa  |
+|          5.0 |         3.6 |          1.4 |         0.2 | setosa  |
+|          5.4 |         3.9 |          1.7 |         0.4 | setosa  |
+:::
+::::

tests/integration/playwright/tests/html-tables.spec.ts

@@ -0,0 +1,21 @@
+import { test, expect } from '@playwright/test';
+
+test('Markdown tables are styled correct', async ({ page }) => {
+await page.goto('html/markdown-tables.html');
+await expect(page.getByRole('figure', { name: 'Table 1: My Caption' })).toBeVisible();
+await expect(page.getByRole('figure', { name: 'Table 1: My Caption' }).locator('table')).toHaveCSS('border-top-style', 'solid')
+await expect(page.getByRole('figure', { name: 'Table 1: My Caption' }).locator('table')).toHaveCSS('border-top-width', '1px')
+await expect(page.getByRole('figure', { name: 'Table 1: My Caption' }).locator('table')).toHaveCSS('border-bottom-style', 'solid')
+await expect(page.getByRole('figure', { name: 'Table 1: My Caption' }).locator('table')).toHaveCSS('border-bottom-width', '1px')
+await expect(page.getByRole('figure', { name: 'Table 1: My Caption' }).locator('table tr').nth(1)).toHaveCSS('border-style', 'solid')
+await expect(page.locator('a.quarto-xref[href="#tbl-letters"]')).toContainText('Table 1');
+
+await expect(page.locator('#computational-table table')).toBeVisible();
+await expect(page.locator('#computational-table table')).toHaveCSS('border-top-style', 'solid')
+await expect(page.locator('#computational-table table')).toHaveCSS('border-top-width', '1px')
+await expect(page.locator('#computational-table table')).toHaveCSS('border-bottom-style', 'solid')
+await expect(page.locator('#computational-table table')).toHaveCSS('border-bottom-width', '1px')
+await expect(page.locator('#computational-table table')).toHaveCSS('border-style', /solid/)
+await expect(page.locator('#computational-table table').locator('td').nth(1)).toHaveCSS('box-shadow', /rgba\(0, 0, 0, 0\.05/)
+
+});