test: Add "lh and rlh units" and "margin-break property" tests

- add lh-rlh-units.html - add margin-break.html - fix typo in inset-shorthand.html
vivliostyle · Dec 16, 2022 · dd4e64c · dd4e64c · vercel · Dec 16, 2022
1 parent 5c0235b
commit dd4e64c
Show file tree

Hide file tree

Showing 4 changed files with 309 additions and 1 deletion.
diff --git a/packages/core/test/files/file-list.js b/packages/core/test/files/file-list.js
@@ -136,6 +136,14 @@ module.exports = [
         file: "inset-shorthand.html",
         title: "inset shorthand property",
       },
+      {
+        file: "lh-rlh-units.html",
+        title: "lh and rlh units",
+      },
+      {
+        file: "margin-break.html",
+        title: "margin-break property",
+      }
     ],
   },
   {

diff --git a/packages/core/test/files/inset-shorthand.html b/packages/core/test/files/inset-shorthand.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-  <meta charset="UTF-A">
+  <meta charset="UTF-8">
   <title>inset shorthand property</title>
   <style>
     @page {

diff --git a/packages/core/test/files/lh-rlh-units.html b/packages/core/test/files/lh-rlh-units.html
@@ -0,0 +1,79 @@
+<!doctype html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<title>lh and rlh units</title>
+<style>
+@page {
+  size: 36rlh;
+  margin: 3rlh;
+  outline: 1px dotted;
+  @bottom-center {
+    content: "Page " counter(page);
+  }
+}
+
+:root {
+  font-size: 20px;
+  line-height: 1.5;
+  background-image: linear-gradient(to bottom, #ccc 0, #ccc 1px, #fff 1px);
+  background-size: auto 30px;
+}
+* {
+  margin-block: 0;
+}
+hgroup:has(h1) {
+  display: grid;
+  align-content: center;
+  text-align: center;
+  line-height: 1.2;
+  block-size: 4rlh;
+}
+h2, h3 {
+  display: grid;
+  align-content: center;
+  text-align: center;
+  line-height: 1.2;
+  block-size: 3rlh;
+}
+p + p {
+  margin-block-start: 1lh;
+}
+</style>
+</head>
+<body>
+  <hgroup>
+    <h1>H1: Title</h1>
+    <p>with Subtitle</p>
+  </hgroup>
+  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui consequatur quod natus molestiae eaque cupiditate placeat eius deserunt fugiat repudiandae, ea, dolor praesentium accusantium nesciunt voluptates porro. Qui, non, hic!</p>
+  <p>Possimus ullam recusandae, iure quae, similique illo, a quasi nam excepturi dolore veritatis vero! Iure doloremque libero consequatur sequi pariatur officia ab!</p>
+  <h2>H2: Heading Level 2</h2>
+  <p>Harum ducimus placeat quia reiciendis nulla voluptatum repellat mollitia expedita nemo voluptatem. Laudantium, deserunt facilis maxime dolorum enim, sit! Nulla quod, repellat!</p>
+  <h3>H3: Heading Level 3 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio, accusantium.</h3>
+  <p>Dicta quae voluptatibus beatae. Molestiae animi repudiandae quia, et ratione ducimus esse expedita nisi deleniti illum laborum doloribus incidunt quisquam cum, magni?</p>
+  <p>Quod praesentium obcaecati eos ea expedita quia, minus ducimus, officiis error illum laboriosam nam deleniti cum. Rem amet obcaecati odio illum animi!</p>
+  <hgroup>
+    <h1>H1: Title</h1>
+    <p>with Subtitle</p>
+  </hgroup>
+  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui consequatur quod natus molestiae eaque cupiditate placeat eius deserunt fugiat repudiandae, ea, dolor praesentium accusantium nesciunt voluptates porro. Qui, non, hic!</p>
+  <p>Possimus ullam recusandae, iure quae, similique illo, a quasi nam excepturi dolore veritatis vero! Iure doloremque libero consequatur sequi pariatur officia ab!</p>
+  <h2>H2: Heading Level 2</h2>
+  <p>Harum ducimus placeat quia reiciendis nulla voluptatum repellat mollitia expedita nemo voluptatem. Laudantium, deserunt facilis maxime dolorum enim, sit! Nulla quod, repellat!</p>
+  <h3>H3: Heading Level 3 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio, accusantium.</h3>
+  <p>Dicta quae voluptatibus beatae. Molestiae animi repudiandae quia, et ratione ducimus esse expedita nisi deleniti illum laborum doloribus incidunt quisquam cum, magni?</p>
+  <p>Quod praesentium obcaecati eos ea expedita quia, minus ducimus, officiis error illum laboriosam nam deleniti cum. Rem amet obcaecati odio illum animi!</p>
+  <hgroup>
+    <h1>H1: Title</h1>
+    <p>with Subtitle</p>
+  </hgroup>
+  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui consequatur quod natus molestiae eaque cupiditate placeat eius deserunt fugiat repudiandae, ea, dolor praesentium accusantium nesciunt voluptates porro. Qui, non, hic!</p>
+  <p>Possimus ullam recusandae, iure quae, similique illo, a quasi nam excepturi dolore veritatis vero! Iure doloremque libero consequatur sequi pariatur officia ab!</p>
+  <h2>H2: Heading Level 2</h2>
+  <p>Harum ducimus placeat quia reiciendis nulla voluptatum repellat mollitia expedita nemo voluptatem. Laudantium, deserunt facilis maxime dolorum enim, sit! Nulla quod, repellat!</p>
+  <h3>H3: Heading Level 3 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio, accusantium.</h3>
+  <p>Dicta quae voluptatibus beatae. Molestiae animi repudiandae quia, et ratione ducimus esse expedita nisi deleniti illum laborum doloribus incidunt quisquam cum, magni?</p>
+  <p>Quod praesentium obcaecati eos ea expedita quia, minus ducimus, officiis error illum laboriosam nam deleniti cum. Rem amet obcaecati odio illum animi!</p>
+</body>
+</html>
diff --git a/packages/core/test/files/margin-break.html b/packages/core/test/files/margin-break.html
@@ -0,0 +1,221 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="UTF-8">
+  <title>margin-break property</title>
+  <style>
+    @page {
+      outline: 1px dotted;
+
+      @bottom-center {
+        content: "Page " counter(page);
+      }
+    }
+
+    h1 {
+      margin-break: discard;
+    }
+
+    h2 {
+      margin-break: keep;
+    }
+
+    h3 {
+      margin-break: auto;
+    }
+
+    .break {
+      break-before: page;
+    }
+
+    .break::before {
+      content: "(Forced break) ";
+      color: purple;
+    }
+  </style>
+</head>
+
+<body>
+  <h1>H1 {margin-break: dicard}</h1>
+  <h2>H2 {margin-break: keep}</h2>
+  <h3>H3 {margin-break: auto}</h3>
+  <p>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet
+    lacinia elit. Sed ornare at erat ac dictum. Vestibulum sit amet placerat
+    turpis, at viverra enim. Praesent dignissim quis arcu quis cursus. Quisque
+    nunc augue, rutrum sed iaculis eget, ultricies nec massa. Sed suscipit eu
+    diam posuere convallis. Ut vitae eleifend nibh. Morbi mollis leo metus. Nunc
+    varius vestibulum nulla sed tristique. Vivamus semper risus at sem
+    vestibulum aliquet. Morbi viverra, justo finibus ultrices dignissim, tellus
+    ipsum pharetra justo, vel sodales purus turpis ut mauris. Nam vitae commodo
+    nisl, in bibendum arcu. Phasellus sed congue metus.
+  </p>
+  <h1 class="break">H1 {margin-break: dicard}</h1>
+  <p>
+    Donec mattis, diam eget ornare posuere, neque augue ultrices erat, eu
+    pulvinar sem sem sit amet nibh. Ut facilisis congue dolor at ultrices. Duis
+    et nisi augue. Vivamus suscipit sem sed mi varius volutpat. Praesent varius
+    sapien facilisis, sollicitudin nisi non, bibendum odio. Curabitur
+    pellentesque dictum libero eget gravida. Nulla vitae nisl non urna
+    scelerisque mattis ut sed risus.
+  </p>
+  <h2 class="break">H2 {margin-break: keep}</h2>
+  <p>
+    Nam scelerisque sem eu ex condimentum auctor. Sed bibendum euismod sapien,
+    et blandit turpis tempus pellentesque. Phasellus vel elit semper, egestas
+    ligula sit amet, luctus ante. Vestibulum ante ipsum primis in faucibus orci
+    luctus et ultrices posuere cubilia curae; Fusce sed accumsan risus. Ut a
+    nunc pulvinar, interdum mauris sit amet, dignissim dui. Nam sit amet est
+    sollicitudin, pellentesque risus ac, mollis elit. Integer sed aliquet leo.
+    Duis tincidunt, ipsum eget semper sodales, neque dui consequat tortor,
+    pellentesque sollicitudin sem neque a turpis. Aliquam lobortis euismod nunc
+    eu interdum. Vestibulum condimentum et ipsum ut cursus.
+  </p>
+  <h3 class="break">H3 {margin-break: auto}</h3>
+  <p>
+    Quisque et elit ut neque consequat hendrerit. In semper nisl eget velit
+    ornare laoreet. Nulla gravida, nunc in iaculis malesuada, justo justo
+    accumsan ante, in volutpat nunc erat vitae ante. Ut diam justo, cursus nec
+    turpis in, congue molestie tellus. Praesent consectetur nunc ut arcu
+    bibendum imperdiet. In maximus, sem nec ullamcorper sodales, diam leo
+    porttitor nisi, id ullamcorper magna purus eget augue. Cras posuere, mauris
+    vulputate consequat lobortis, magna dui elementum elit, eget consectetur
+    justo tortor a ipsum.
+  </p>
+  <p>
+    In eget ligula ac dui vulputate pretium quis vel arcu. Nam vel magna ac erat
+    sollicitudin suscipit. Sed quam elit, varius quis neque nec, vestibulum
+    eleifend massa. Cras dolor nibh, sodales in rhoncus tincidunt, semper sed
+    tortor. Etiam lobortis, magna ac vehicula tempor, libero ligula dignissim
+    libero, vel ullamcorper turpis diam ac neque. Sed gravida sodales leo ac
+    cursus. Aliquam ipsum tellus, varius at ultricies at, dignissim sit amet
+    est. Ut euismod ex dapibus nisi dignissim rhoncus.
+  </p>
+  <h1>H1 {margin-break: dicard}</h1>
+  <p>
+    Nam tellus tellus, finibus sit amet lectus non, facilisis luctus diam. Donec
+    vel tortor ante. Donec non vehicula ligula. Pellentesque fringilla molestie
+    nisi et auctor.
+  </p>
+  <h2>H2 {margin-break: keep}</h2>
+  <p>
+    Vivamus facilisis tempus ullamcorper. Orci varius natoque penatibus et
+    magnis dis parturient montes, nascetur ridiculus mus. Cras scelerisque
+    consectetur arcu, a laoreet elit consequat ut.
+  </p>
+  <h3>H3 {margin-break: auto}</h3>
+  <p>
+    Aenean congue consectetur ligula, eget pulvinar sem ultrices eget. Etiam ut
+    imperdiet turpis. Nulla facilisi. Nam viverra risus vitae tellus maximus
+    volutpat. Quisque ut metus vitae augue semper convallis et id quam.
+  </p>
+  <p>
+    Morbi vulputate lectus quis augue porttitor, dignissim lobortis justo
+    varius. Sed imperdiet laoreet dictum. Mauris blandit, odio non congue
+    dapibus, massa tellus convallis ligula, quis egestas felis nibh eget sem.
+    Pellentesque lacinia id est ut maximus.
+  </p>
+  <h1>H1 {margin-break: dicard}</h1>
+  <p>
+    Ut id ex dictum sem pharetra molestie. Pellentesque a tellus arcu. Donec sed
+    sapien sit amet metus ornare faucibus. Phasellus aliquet interdum lorem, vel
+    rhoncus urna luctus at. Ut non fringilla nunc. Morbi laoreet rutrum pretium.
+    Donec dictum justo pharetra laoreet laoreet. Pellentesque quis felis et orci
+    vulputate cursus.
+  </p>
+  <h2>H2 {margin-break: keep}</h2>
+  <p>
+    In ac faucibus risus. Quisque eget fringilla urna. Donec auctor placerat
+    sem, in pretium risus dignissim quis. Maecenas velit dolor, faucibus sit
+    amet purus vestibulum, tempus ullamcorper nulla.
+  </p>
+  <h3>H3 {margin-break: auto}</h3>
+  <p>
+    Donec id vehicula erat. Cras sed tellus at nunc porta luctus et quis purus.
+    Suspendisse potenti. Nulla varius commodo urna quis venenatis. Vestibulum ut
+    neque id urna rutrum condimentum.
+  </p>
+  <h1>H1 {margin-break: dicard}</h1>
+  <p>
+    Nam tellus tellus, finibus sit amet lectus non, facilisis luctus diam. Donec
+    vel tortor ante. Donec non vehicula ligula. Pellentesque fringilla molestie
+    nisi et auctor.
+  </p>
+  <h2>H2 {margin-break: keep}</h2>
+  <p>
+    Vivamus facilisis tempus ullamcorper. Orci varius natoque penatibus et
+    magnis dis parturient montes, nascetur ridiculus mus. Cras scelerisque
+    consectetur arcu, a laoreet elit consequat ut.
+  </p>
+  <h3>H3 {margin-break: auto}</h3>
+  <p>
+    Aenean congue consectetur ligula, eget pulvinar sem ultrices eget. Etiam ut
+    imperdiet turpis. Nulla facilisi. Nam viverra risus vitae tellus maximus
+    volutpat. Quisque ut metus vitae augue semper convallis et id quam. Sed
+    mattis magna nec dui mattis varius.
+  </p>
+  <p>
+    Morbi vulputate lectus quis augue porttitor, dignissim lobortis justo
+    varius. Sed imperdiet laoreet dictum. Mauris blandit, odio non congue
+    dapibus, massa tellus convallis ligula, quis egestas felis nibh eget sem.
+    Pellentesque lacinia id est ut maximus.
+  </p>
+  <h1>H1 {margin-break: dicard}</h1>
+  <p>
+    Ut id ex dictum sem pharetra molestie. Pellentesque a tellus arcu. Donec sed
+    sapien sit amet metus ornare faucibus.
+  </p>
+  <h2>H2 {margin-break: keep}</h2>
+  <p>
+    In ac faucibus risus. Quisque eget fringilla urna. Donec auctor placerat
+    sem, in pretium risus dignissim quis. Maecenas velit dolor, faucibus sit
+    amet purus vestibulum, tempus ullamcorper nulla.
+  </p>
+  <h3>H3 {margin-break: auto}</h3>
+  <p>
+    Donec id vehicula erat. Cras sed tellus at nunc porta luctus et quis purus.
+    Suspendisse potenti. Nulla varius commodo urna quis venenatis.
+  </p>
+  <h1>H1 {margin-break: dicard}</h1>
+  <p>
+    Nam tellus tellus, finibus sit amet lectus non, facilisis luctus diam. Donec
+    vel tortor ante. Donec non vehicula ligula. Pellentesque fringilla molestie
+    nisi et auctor. Suspendisse sollicitudin erat ut porta mattis.
+  </p>
+  <h2>H2 {margin-break: keep}</h2>
+  <p>
+    Vivamus facilisis tempus ullamcorper. Orci varius natoque penatibus et
+    magnis dis parturient montes, nascetur ridiculus mus.
+  </p>
+  <h3>H3 {margin-break: auto}</h3>
+  <p>
+    Aenean congue consectetur ligula, eget pulvinar sem ultrices eget. Etiam ut
+    imperdiet turpis. Nulla facilisi. Nam viverra risus vitae tellus maximus
+    volutpat.
+  </p>
+  <p>
+    Morbi vulputate lectus quis augue porttitor, dignissim lobortis justo
+    varius. Sed imperdiet laoreet dictum. Mauris blandit, odio non congue
+    dapibus, massa tellus convallis ligula, quis egestas felis nibh eget sem.
+  </p>
+  <h1>H1 {margin-break: dicard}</h1>
+  <p>
+    Ut id ex dictum sem pharetra molestie. Pellentesque a tellus arcu. Donec sed
+    sapien sit amet metus ornare faucibus.
+  </p>
+  <h2>H2 {margin-break: keep}</h2>
+  <p>
+    In ac faucibus risus. Quisque eget fringilla urna. Donec auctor placerat
+    sem, in pretium risus dignissim quis. Maecenas velit dolor, faucibus sit
+    amet purus vestibulum, tempus ullamcorper nulla.
+  </p>
+  <h3>H3 {margin-break: auto}</h3>
+  <p>
+    Donec id vehicula erat. Cras sed tellus at nunc porta luctus et quis purus.
+    Suspendisse potenti. Nulla varius commodo urna quis venenatis. Vestibulum ut
+    neque id urna rutrum condimentum. Aliquam erat volutpat.
+  </p>
+</body>
+
+</html>