Merge pull request #10906 from quarto-dev/fix/table-style-new-pandoc

Handle Pandoc change in table classes

dev-docs/feature-format-matrix/qmd-files/raw-blocks/interpreted/pandoc-native/document.qmd

@@ -25,7 +25,7 @@ _quarto:
     html:
       ensureHtmlElements:
         -
-          - 'table'
+          - 'table.table'
         - []
     typst:
       ensureTypstFileRegexMatches:

src/resources/filters/quarto-post/html.lua

@@ -23,6 +23,22 @@ function render_html_fixups()
 
   return {
     Table = function(tbl)
+      -- Add back classes 'odd', (or 'header' in table header) / 'even' to table rows
+      -- They were removed in pandoc 3.2.1 but are useful for styling pandoc processed tables
+      -- Quarto detects .odd class 
+      local function add_odd_even (rows, odd)
+        odd = odd or 'odd'
+        for rownum, row in ipairs(rows) do
+          row.classes:insert((rownum % 2) == 0 and 'even' or odd)
+        end
+        return rows
+      end
+      add_odd_even(tbl.head.rows, 'header')
+      for _, tblbody in ipairs(tbl.bodies) do
+        add_odd_even(tblbody.body)
+      end
+      add_odd_even(tbl.foot.rows)
+
       -- this requires bootstrap CSS
       if quarto.doc.crossref.cap_location(tbl) == "top" then
         tbl.classes:insert("caption-top")

src/resources/formats/html/_quarto-rules.scss

@@ -227,7 +227,8 @@ tr.header > th > p:last-of-type {
   margin-bottom: 0px;
 }
 
-table {
+table,
+table.table {
   margin-top: 0.5rem;
   margin-bottom: 0.5rem;
 }

src/resources/formats/revealjs/quarto.scss

@@ -669,7 +669,7 @@ $panel-sidebar-padding: 0.5em;
 
 // https://github.com/quarto-dev/quarto-cli/issues/3380
 
-div.cell-output-display div.pagedtable-wrapper table {
+div.cell-output-display div.pagedtable-wrapper table.table {
   font-size: 0.6em;
 }
 

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/docs/playwright/ojs/.gitignore

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

tests/docs/smoke-all/2023/10/10/issue-7187-b.qmd

@@ -5,7 +5,7 @@ _quarto:
     html:
       ensureHtmlElements:
         - []
-        - ["div[data-html-table-processing]"]
+        - ["table.table", "div[data-html-table-processing]"]
 ---
 
 ::: {html-table-processing="none"}

tests/docs/smoke-all/2023/10/10/issue-7187.qmd

@@ -6,7 +6,7 @@ _quarto:
     html:
       ensureHtmlElements:
         - []
-        - ["table[data-quarto-postprocess='true']"]
+        - ["table.table"]
 ---
 
 

tests/docs/smoke-all/crossrefs/float/html/html-knitr-table-captions-1.qmd

@@ -5,9 +5,9 @@ _quarto:
     html:
       ensureHtmlElements:
         - 
-          - "figure.quarto-float-tbl div#tbl-cars figure.quarto-subfloat-tbl table"
+          - "figure.quarto-float-tbl div#tbl-cars figure.quarto-subfloat-tbl table.table"
           - "figure.quarto-float-tbl div#tbl-cars figure.quarto-subfloat-tbl figcaption.quarto-subfloat-caption"
-          - "figure.quarto-float-tbl div#tbl-pressure figure.quarto-subfloat-tbl table"
+          - "figure.quarto-float-tbl div#tbl-pressure figure.quarto-subfloat-tbl table.table"
           - "figure.quarto-float-tbl div#tbl-pressure figure.quarto-subfloat-tbl figcaption.quarto-subfloat-caption"
           - "div#tbl-tables > figure.quarto-float-tbl > figcaption.quarto-float-caption"
         - []

tests/docs/smoke-all/crossrefs/float/revealjs/revealjs-knitr-table-captions-1.qmd

@@ -5,9 +5,9 @@ title: Knitr Table Test
 #     revealjs:
 #       ensureHtmlElements:
 #         - 
-#           - "figure.quarto-float-tbl div#tbl-cars figure.quarto-float-tbl table"
+#           - "figure.quarto-float-tbl div#tbl-cars figure.quarto-float-tbl table.table"
 #           - "figure.quarto-float-tbl div#tbl-cars figure.quarto-float-tbl figcaption.quarto-subfloat-caption"
-#           - "figure.quarto-float-tbl div#tbl-pressure figure.quarto-float-tbl table"
+#           - "figure.quarto-float-tbl div#tbl-pressure figure.quarto-float-tbl table.table"
 #           - "figure.quarto-float-tbl div#tbl-pressure figure.quarto-float-tbl figcaption.quarto-subfloat-caption"
 #           - "div#tbl-tables > figure.quarto-float-tbl > figcaption.quarto-float-caption"
 #         - []

tests/docs/smoke-all/crossrefs/float/typst/typst-knitr-table-captions-1.qmd

@@ -6,9 +6,9 @@ format: typst
 #     html:
 #       ensureHtmlElements:
 #         - 
-#           - "figure.quarto-float-tbl div#tbl-cars figure.quarto-float-tbl table"
+#           - "figure.quarto-float-tbl div#tbl-cars figure.quarto-float-tbl table.table"
 #           - "figure.quarto-float-tbl div#tbl-cars figure.quarto-float-tbl figcaption.quarto-subfloat-caption"
-#           - "figure.quarto-float-tbl div#tbl-pressure figure.quarto-float-tbl table"
+#           - "figure.quarto-float-tbl div#tbl-pressure figure.quarto-float-tbl table.table"
 #           - "figure.quarto-float-tbl div#tbl-pressure figure.quarto-float-tbl figcaption.quarto-subfloat-caption"
 #           - "div#tbl-tables > figure.quarto-float-tbl > figcaption.quarto-float-caption"
 #         - []

tests/integration/playwright-tests.test.ts

@@ -52,7 +52,7 @@ Deno.test({
     try {
       // run playwright
       const res = await execProcess({
-        cmd: [Deno.build.os == "windows" ? "npx.cmd" : "npx", "playwright", "test"],
+        cmd: [Deno.build.os == "windows" ? "npx.cmd" : "npx", "playwright", "test", "--ignore-snapshots"],
         cwd: "integration/playwright",
       });
       if (!res.success) {

tests/integration/playwright/playwright.config.ts

@@ -6,12 +6,15 @@ import { defineConfig, devices } from '@playwright/test';
  */
 // require('dotenv').config();
 
+const isCI = !!process.env.CI;
+
 /**
  * See https://playwright.dev/docs/test-configuration.
  */
 export default defineConfig({
   /* Look for test files in the "tests" directory, relative to this configuration file. */
   testDir: "./tests",
+  snapshotPathTemplate: "{testDir}/__screenshots__/{testFilePath}/{platform}/{arg}{ext}",
   /* Maximum time one test can run for. */
   timeout: 30 * 1000,
   expect: {
@@ -24,13 +27,16 @@ export default defineConfig({
   /* Run tests in files in parallel */
   fullyParallel: true,
   /* Fail the build on CI if you accidentally left test.only in the source code. */
-  forbidOnly: !!process.env.CI,
+  forbidOnly: isCI,
   /* Retry on CI only */
-  retries: process.env.CI ? 2 : 0,
+  retries: isCI ? 2 : 0,
   /* Opt out of parallel tests on CI. */
-  workers: process.env.CI ? 1 : undefined,
+  workers: isCI ? 1 : undefined,
   /* Reporter to use. See https://playwright.dev/docs/test-reporters */
-  reporter: [["html", { open: "never" }]],
+  reporter: [
+    ["html", { open: "never" }],
+    isCI ? ['github'] : ['line'],
+  ],
   /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
   use: {
     /* Base URL to use in actions like `await page.goto('/')`. */
@@ -91,7 +97,7 @@ export default defineConfig({
   webServer: {
     command: 'python -m http.server 8080',
     url: 'http://127.0.0.1:8080',
-    reuseExistingServer: !process.env.CI,
+    reuseExistingServer: !isCI,
     cwd: '../../docs/playwright',
   },
 });

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

@@ -0,0 +1,10 @@
+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');
+
+await expect(page.locator('#computational-table table')).toHaveScreenshot()
+
+});