feat(css): Add example of @page (#2216)

mdn · Jul 21, 2023 · 10b16db · 10b16db
1 parent 87fc49c
commit 10b16db
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 0 deletions.
diff --git a/live-examples/css-examples/fragmentation/at-rule-page.css b/live-examples/css-examples/fragmentation/at-rule-page.css
@@ -0,0 +1,4 @@
+@page {
+    margin-top: 2em;
+    margin-left: 10em;
+}
diff --git a/live-examples/css-examples/fragmentation/at-rule-page.html b/live-examples/css-examples/fragmentation/at-rule-page.html
@@ -0,0 +1,5 @@
+<p>The effect of this at-rule can be noticed only when the document is being printed or a preview of a print is displayed.</p>
+
+<p>Paragraphs are moved away from the left side of the page and have a slightly lower position than by default.</p>
+
+<button id="print-btn">Show Print Preview</button>
diff --git a/live-examples/css-examples/fragmentation/at-rule-page.js b/live-examples/css-examples/fragmentation/at-rule-page.js
@@ -0,0 +1,5 @@
+const btn = document.getElementById('print-btn');
+
+btn.addEventListener('click', () => {
+  print();
+});
diff --git a/live-examples/css-examples/fragmentation/meta.json b/live-examples/css-examples/fragmentation/meta.json
@@ -1,5 +1,16 @@
 {
     "pages": {
+        "atRulePage": {
+            "cssExampleSrc": "./live-examples/css-examples/fragmentation/at-rule-page.css",
+            "exampleCode": "./live-examples/css-examples/fragmentation/at-rule-page.html",
+            "jsExampleSrc": "./live-examples/css-examples/fragmentation/at-rule-page.js",
+            "fileName": "at-rule-page.html",
+            "title": "CSS Demo: @page",
+            "type": "tabbed",
+            "defaultTab": "css",
+            "tabs": "html,css,js",
+            "height": "tabbed-shorter"
+        },
         "boxDecorationBreak": {
             "cssExampleSrc": "./live-examples/css-examples/fragmentation/box-decoration-break.css",
             "exampleCode": "./live-examples/css-examples/fragmentation/box-decoration-break.html",