diff --git a/src/resources/filters/quarto-post/html.lua b/src/resources/filters/quarto-post/html.lua index e61eabb6c26..00781b679b8 100644 --- a/src/resources/filters/quarto-post/html.lua +++ b/src/resources/filters/quarto-post/html.lua @@ -42,8 +42,9 @@ function render_html_fixups() -- this requires bootstrap CSS if quarto.doc.crossref.cap_location(tbl) == "top" then tbl.classes:insert("caption-top") - return tbl end + + return tbl end, Figure = function(fig) if #fig.content ~= 1 then diff --git a/tests/docs/playwright/html/tables/markdown-tables-cap-bottom.qmd b/tests/docs/playwright/html/tables/markdown-tables-cap-bottom.qmd new file mode 100644 index 00000000000..091fe033957 --- /dev/null +++ b/tests/docs/playwright/html/tables/markdown-tables-cap-bottom.qmd @@ -0,0 +1,47 @@ +--- +title: Markdown Tables +tbl-cap-location: bottom +--- + +They should be styled by Quarto + +## labelled {#labelled} + +| Col1 | Col2 | Col3 | +|------|------|------| +| A | B | C | +| E | F | G | +| A | G | G | + +: My Caption {#tbl-letters} + +See @tbl-letters. + +## non-labelled table {#non-labelled} + +| Col1 | Col2 | Col3 | +|------|------|------| +| A | B | C | +| E | F | G | + +: A non-labelled table with a caption + +## Computational table {#computation} + + + +:::: {.cell} +::: {.cell-output-display} + +Table: A caption + +| 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 | +::: +:::: \ No newline at end of file diff --git a/tests/docs/playwright/html/markdown-tables.qmd b/tests/docs/playwright/html/tables/markdown-tables.qmd similarity index 73% rename from tests/docs/playwright/html/markdown-tables.qmd rename to tests/docs/playwright/html/tables/markdown-tables.qmd index 884a7e086ab..091fe033957 100644 --- a/tests/docs/playwright/html/markdown-tables.qmd +++ b/tests/docs/playwright/html/tables/markdown-tables.qmd @@ -1,9 +1,12 @@ --- title: Markdown Tables +tbl-cap-location: bottom --- They should be styled by Quarto +## labelled {#labelled} + | Col1 | Col2 | Col3 | |------|------|------| | A | B | C | @@ -14,12 +17,24 @@ They should be styled by Quarto See @tbl-letters. -## Computational table +## non-labelled table {#non-labelled} + +| Col1 | Col2 | Col3 | +|------|------|------| +| A | B | C | +| E | F | G | + +: A non-labelled table with a caption + +## Computational table {#computation} -:::: cell -::: cell-output-display +:::: {.cell} +::: {.cell-output-display} + +Table: A caption + | Sepal.Length | Sepal.Width | Petal.Length | Petal.Width | Species | |-------------:|------------:|-------------:|------------:|:--------| | 5.1 | 3.5 | 1.4 | 0.2 | setosa | diff --git a/tests/docs/smoke-all/table/appearance-bottom-cap.qmd b/tests/docs/smoke-all/table/appearance-bottom-cap.qmd new file mode 100644 index 00000000000..74aadbc7fa8 --- /dev/null +++ b/tests/docs/smoke-all/table/appearance-bottom-cap.qmd @@ -0,0 +1,96 @@ +--- +title: Table Appearance +tbl-cap-location: bottom +format: html +_quarto: + tests: + html: + ensureHtmlElements: + - ['table tbody tr.odd', 'table tbody tr.even'] + - ['table tbody tr:not(.odd):not(.even)'] # All table should have .odd .even class for styling +--- + +### Md table (w/caption) {#captioned} + +A short sentence that makes a paragraph. + +| Default | Left | Right | Center | +|---------|:-----|------:|:------:| +| 12 | 12 | 12 | 12 | +| 123 | 123 | 123 | 123 | +| 1 | 1 | 1 | 1 | + +: Demonstration of pipe table syntax + +### fancy table + +A short sentence that makes a paragraph. + +| fruit | price | +|--------|--------| +| apple | 2.05 | +| pear | 1.37 | +| orange | 3.09 | + +: Fruit prices {.striped .hover} + + +### xref table + +A short sentence that makes a paragraph. + +| Col1 | Col2 | Col3 | +|------|------|------| +| A | B | C | +| E | F | G | +| A | G | G | + +: My Caption {#tbl-letters} + +See @tbl-letters. + +### subtables + +A short sentence that makes a paragraph. + +::: {#tbl-panel layout-ncol=2} +| Col1 | Col2 | Col3 | +|------|------|------| +| A | B | C | +| E | F | G | +| A | G | G | + +: First Table {#tbl-first} + +| Col1 | Col2 | Col3 | +|------|------|------| +| A | B | C | +| E | F | G | +| A | G | G | + +: Second Table {#tbl-second} + +Main Caption +::: + +See @tbl-panel for details, especially @tbl-second. + +### HTML Table + +```{=html} + + + + + + + + + + + + + + +
As described in the section above, Quarto tables are great.
Header 1Header 2
First ColumnSecond Column
+``` \ No newline at end of file diff --git a/tests/docs/smoke-all/table/appearance.qmd b/tests/docs/smoke-all/table/appearance.qmd index 6a49f5af1d8..485a6951ae8 100644 --- a/tests/docs/smoke-all/table/appearance.qmd +++ b/tests/docs/smoke-all/table/appearance.qmd @@ -1,6 +1,12 @@ --- title: Table Appearance format: html +_quarto: + tests: + html: + ensureHtmlElements: + - ['table tbody tr.odd', 'table tbody tr.even'] + - ['table tbody tr:not(.odd):not(.even)'] # All table should have .odd .even class for styling --- ### With header @@ -22,7 +28,7 @@ left 1 right 1 left 2 right 2 ----------- ------------ -### Md table (w/caption) +### Md table (w/caption) {#captioned} A short sentence that makes a paragraph. @@ -85,4 +91,24 @@ A short sentence that makes a paragraph. Main Caption ::: -See @tbl-panel for details, especially @tbl-second. \ No newline at end of file +See @tbl-panel for details, especially @tbl-second. + +### HTML Table + +```{=html} + + + + + + + + + + + + + + +
As described in the section above, Quarto tables are great.
Header 1Header 2
First ColumnSecond Column
+``` \ No newline at end of file diff --git a/tests/integration/playwright/tests/__screenshots__/html-tables.spec.ts/win32/Markdown-tables-are-styled-correctly-1.png b/tests/integration/playwright/tests/__screenshots__/html-tables.spec.ts/win32/Markdown-tables-are-styled-correctly-1.png index 112356516e0..c7f790a6f9e 100644 Binary files a/tests/integration/playwright/tests/__screenshots__/html-tables.spec.ts/win32/Markdown-tables-are-styled-correctly-1.png and b/tests/integration/playwright/tests/__screenshots__/html-tables.spec.ts/win32/Markdown-tables-are-styled-correctly-1.png differ diff --git a/tests/integration/playwright/tests/__screenshots__/html-tables.spec.ts/win32/Markdown-tables-are-styled-correctly-2.png b/tests/integration/playwright/tests/__screenshots__/html-tables.spec.ts/win32/Markdown-tables-are-styled-correctly-2.png index 910f7615bd7..03bbc74ac75 100644 Binary files a/tests/integration/playwright/tests/__screenshots__/html-tables.spec.ts/win32/Markdown-tables-are-styled-correctly-2.png and b/tests/integration/playwright/tests/__screenshots__/html-tables.spec.ts/win32/Markdown-tables-are-styled-correctly-2.png differ diff --git a/tests/integration/playwright/tests/__screenshots__/html-tables.spec.ts/win32/Markdown-tables-are-styled-correctly-3.png b/tests/integration/playwright/tests/__screenshots__/html-tables.spec.ts/win32/Markdown-tables-are-styled-correctly-3.png new file mode 100644 index 00000000000..1ad90511f18 Binary files /dev/null and b/tests/integration/playwright/tests/__screenshots__/html-tables.spec.ts/win32/Markdown-tables-are-styled-correctly-3.png differ diff --git a/tests/integration/playwright/tests/__screenshots__/html-tables.spec.ts/win32/Markdown-tables-are-styled-correctly-4.png b/tests/integration/playwright/tests/__screenshots__/html-tables.spec.ts/win32/Markdown-tables-are-styled-correctly-4.png new file mode 100644 index 00000000000..c7f790a6f9e Binary files /dev/null and b/tests/integration/playwright/tests/__screenshots__/html-tables.spec.ts/win32/Markdown-tables-are-styled-correctly-4.png differ diff --git a/tests/integration/playwright/tests/__screenshots__/html-tables.spec.ts/win32/Markdown-tables-are-styled-correctly-5.png b/tests/integration/playwright/tests/__screenshots__/html-tables.spec.ts/win32/Markdown-tables-are-styled-correctly-5.png new file mode 100644 index 00000000000..03bbc74ac75 Binary files /dev/null and b/tests/integration/playwright/tests/__screenshots__/html-tables.spec.ts/win32/Markdown-tables-are-styled-correctly-5.png differ diff --git a/tests/integration/playwright/tests/__screenshots__/html-tables.spec.ts/win32/Markdown-tables-are-styled-correctly-6.png b/tests/integration/playwright/tests/__screenshots__/html-tables.spec.ts/win32/Markdown-tables-are-styled-correctly-6.png new file mode 100644 index 00000000000..1ad90511f18 Binary files /dev/null and b/tests/integration/playwright/tests/__screenshots__/html-tables.spec.ts/win32/Markdown-tables-are-styled-correctly-6.png differ diff --git a/tests/integration/playwright/tests/html-tables.spec.ts b/tests/integration/playwright/tests/html-tables.spec.ts index 85c125ed0e7..4cd06c1e9ff 100644 --- a/tests/integration/playwright/tests/html-tables.spec.ts +++ b/tests/integration/playwright/tests/html-tables.spec.ts @@ -1,10 +1,17 @@ import { test, expect } from '@playwright/test'; -test('Markdown tables are styled correctly', async ({ page }) => { -await page.goto('html/markdown-tables.html'); -await expect(page.getByRole('figure', { name: 'Table 1: My Caption' }).locator('table')).toHaveScreenshot() -await expect(page.locator('a.quarto-xref[href="#tbl-letters"]')).toContainText('Table 1'); +async function testTables(page, path: string) { + await page.goto(`html/tables/${path}`); + await expect(page.locator('#labelled table')).toHaveScreenshot(); + await expect(page.locator('a.quarto-xref[href="#tbl-letters"]')).toContainText('Table 1'); + await expect(page.locator('#non-labelled table')).toHaveScreenshot(); + await expect(page.locator('#computation table')).toHaveScreenshot(); +} -await expect(page.locator('#computational-table table')).toHaveScreenshot() +test('Markdown tables are styled correctly', async ({ page }) => { + // Test with default caption position + await testTables(page, 'markdown-tables.html'); -}); \ No newline at end of file + // Test with bottom caption + await testTables(page, 'markdown-tables-cap-bottom.html'); +});