From 10b16dba22925a1fe16267d10b4ee91be6443801 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Niedzi=C3=B3=C5=82ka?=
 <niedziolek@hotmail.com>
Date: Fri, 21 Jul 2023 06:32:48 +0200
Subject: [PATCH] feat(css): Add example of `@page` (#2216)

---
 .../css-examples/fragmentation/at-rule-page.css       |  4 ++++
 .../css-examples/fragmentation/at-rule-page.html      |  5 +++++
 .../css-examples/fragmentation/at-rule-page.js        |  5 +++++
 live-examples/css-examples/fragmentation/meta.json    | 11 +++++++++++
 4 files changed, 25 insertions(+)
 create mode 100644 live-examples/css-examples/fragmentation/at-rule-page.css
 create mode 100644 live-examples/css-examples/fragmentation/at-rule-page.html
 create mode 100644 live-examples/css-examples/fragmentation/at-rule-page.js

diff --git a/live-examples/css-examples/fragmentation/at-rule-page.css b/live-examples/css-examples/fragmentation/at-rule-page.css
new file mode 100644
index 000000000..5ac388da5
--- /dev/null
+++ 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
new file mode 100644
index 000000000..78ecefd3b
--- /dev/null
+++ 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
new file mode 100644
index 000000000..97c5a258b
--- /dev/null
+++ 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
index 958039392..6d78d6afa 100644
--- 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",