test: test whether '--backgroundColor' works

Adds some simple tests that check whether the backgroundColor option
works.

It looks like it doesn't work for PDFs. If we want to enable PDF
background colors, we need to set the puppeteer option
`printBackground: true`,
see https://pptr.dev/api/puppeteer.pdfoptions.printbackground

.github/workflows/compile-mermaid.yml

@@ -60,6 +60,8 @@ jobs:
           # This will overwite any PNG files with the same name that have been created by run-tests.sh
           $(npm bin)/convert-svg-to-png ${{env.INPUT_DATA}}/graph-with-br.mmd.svg
           $(npm bin)/convert-svg-to-png ${{env.INPUT_DATA}}/graph-with-br.mmd-stdin.svg
+          # svg file is named `-svg` so it doesn't overwrite .png file
+          $(npm bin)/convert-svg-to-png ${{env.INPUT_DATA}}/flowchart1-red-background-svg.svg
 
       - name: Upload diagrams for manual inspection
         uses: actions/upload-artifact@v3

run-tests.sh

@@ -13,6 +13,13 @@ for i in $(ls $INPUT_DATA/*.md); do docker run --rm -v $(pwd):/data $IMAGETAG -i
 # Test if the CLI actually works (PDF)
 for i in $(ls $INPUT_DATA/*.mmd); do docker run --rm -v $(pwd):/data $IMAGETAG -i /data/$i -o /data/$i.pdf; done
 
+# Test if passing background colors works
+for format in "svg" "png"; do
+  # must have different names, since we convert .svg to .png for percy upload
+  outputFileName="/data/$INPUT_DATA/flowchart1-red-background-${format}.${format}"
+  docker run --rm -v $(pwd):/data $IMAGETAG -i /data/$INPUT_DATA/flowchart1.mmd --backgroundColor "red" -o "$outputFileName"
+done
+
 # Test if a diagram from STDIN can be understood
 cat $INPUT_DATA/flowchart1.mmd | docker run --rm -i -v $(pwd):/data $IMAGETAG -o /data/$INPUT_DATA/flowchart1-stdin.png -w 800
 

src-test/test.js

@@ -176,6 +176,13 @@ describe("mermaid-cli", () => {
       expectBytesAreFormat(await fs.readFile(file), 'svg')
     }))
   }, timeout)
+
+  test.concurrent.each(['svg', 'png', 'pdf'])('should set red background to %s', async (format) => {
+    await promisify(execFile)('node', [
+      'src/cli.js', '-i', 'test-positive/flowchart1.mmd', '-o', `test-output/flowchart1-red-background.${format}`,
+      '--backgroundColor', 'red'
+    ])
+  }, timeout)
 });
 
 describe("NodeJS API (import ... from '@mermaid-js/mermaid-cli')", () => {

src/index.js

@@ -75,7 +75,7 @@ commander
   .option('-H, --height [height]', 'Height of the page. Optional. Default: 600', /^\d+$/, '600')
   .option('-i, --input <input>', 'Input mermaid file. Files ending in .md will be treated as Markdown and all charts (e.g. ```mermaid (...)```) will be extracted and generated. Required.')
   .option('-o, --output [output]', 'Output file. It should be either md, svg, png or pdf. Optional. Default: input + ".svg"')
-  .option('-b, --backgroundColor [backgroundColor]', 'Background color. Example: transparent, red, \'#F0F0F0\'. Optional. Default: white')
+  .option('-b, --backgroundColor [backgroundColor]', 'Background color for pngs/svgs (not pdfs). Example: transparent, red, \'#F0F0F0\'. Optional. Default: white')
   .option('-c, --configFile [configFile]', 'JSON configuration file for mermaid. Optional')
   .option('-C, --cssFile [cssFile]', 'CSS file for the page. Optional')
   .option('-s, --scale [scale]', 'Puppeteer scale factor, default 1. Optional')