feat: Support printing mixed page sizes

- resolves #751

This change enables mixed page sizes in output PDF together with the following change in vivliostyle-cli:

- vivliostyle/vivliostyle-cli#278

When multiple page sizes are specified, as in the example in Issue 751,
the largest page size both vertically and horizontally are used in PDF output
from Vivliostyle.js.
Then the PDF is post-processed in the Vivliostyle CLI to set the multiple page sizes as specified.

packages/core/src/vivliostyle/adaptive-viewer.ts

@@ -710,13 +710,26 @@ export class AdaptiveViewer {
     spineIndex: number,
     pageIndex: number,
   ) {
-    if (!this.pageSheetSizeAlreadySet && this.pageRuleStyleElement) {
-      let styleText = "";
-      Object.keys(pageSheetSize).forEach((selector) => {
-        styleText += `@page ${selector}{margin:0;size:`;
-        const size = pageSheetSize[selector];
-        styleText += `${size.width}px ${size.height}px;}`;
-      });
+    // In this implementation, it generates one page rule with the largest
+    // page size both in width and height in the multiple page sizes.
+    // (Resolve issue #751)
+    if (
+      this.pageRuleStyleElement &&
+      (!this.pageSheetSizeAlreadySet ||
+        this.pageSizes[pageIndex].width !==
+          this.pageSizes[pageIndex - 1]?.width ||
+        this.pageSizes[pageIndex].height !==
+          this.pageSizes[pageIndex - 1]?.height)
+    ) {
+      const widthMax = Math.max(...this.pageSizes.map((p) => p.width));
+      const heightMax = Math.max(...this.pageSizes.map((p) => p.height));
+
+      // Adjustment to prevent unwanted blank pages due to the rounded
+      // page size problem of Chromium print output.
+      const width = widthMax + 2;
+      const height = heightMax + 2;
+
+      const styleText = `@page {margin:0;size:${width}px ${height}px;}`;
       this.pageRuleStyleElement.textContent = styleText;
       this.pageSheetSizeAlreadySet = true;
     }

packages/core/src/vivliostyle/assets.ts

@@ -152,9 +152,7 @@ export const VivliostyleViewportCss = `
 
   [data-vivliostyle-page-container] {
     display: block !important;
-    max-width: 100%;
-    height: 100% !important;
-    max-height: 100%;
+    break-after: page;
   }
 
   /* Workaround for Chrome printing problem */
@@ -170,13 +168,17 @@ export const VivliostyleViewportCss = `
   }
 
   /* Gecko-only hack, see https://bugzilla.mozilla.org/show_bug.cgi?id=267029#c17 */
-  @-moz-document regexp('.*') {
+  @-moz-document url-prefix()  {
     [data-vivliostyle-page-container]:nth-last-child(n + 2) {
       top: -1px;
       margin-top: 1px;
       margin-bottom: -1px;
     }
-  }
+    /* Workaround Gecko problem on page break */
+    [data-vivliostyle-page-container] {
+      break-after: auto;
+      height: 100% !important;
+    }
 }
 `;