From fd7893d9b328c50b797e53a407ddb0de986c290e Mon Sep 17 00:00:00 2001
From: dkdk225 <49940741+dkdk225@users.noreply.github.com>
Date: Fri, 19 Jan 2024 05:04:11 +0300
Subject: [PATCH] feat(css): create an example for content-visibility (#2663)

---
 .../container/content-visibility.css          | 19 ++++++++++++++
 .../container/content-visibility.html         | 25 +++++++++++++++++++
 .../css-examples/container/meta.json          |  7 ++++++
 3 files changed, 51 insertions(+)
 create mode 100644 live-examples/css-examples/container/content-visibility.css
 create mode 100644 live-examples/css-examples/container/content-visibility.html

diff --git a/live-examples/css-examples/container/content-visibility.css b/live-examples/css-examples/container/content-visibility.css
new file mode 100644
index 000000000..d64d32657
--- /dev/null
+++ b/live-examples/css-examples/container/content-visibility.css
@@ -0,0 +1,19 @@
+.container {
+  width: 140px;
+  height: 140px;
+  border: 3px solid rgb(64, 28, 163);
+  background-color: rgb(135, 136, 184);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.child {
+  border: 3px solid rgb(64, 28, 163);
+  background-color: wheat;
+  width: 80%;
+  height: 80%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
diff --git a/live-examples/css-examples/container/content-visibility.html b/live-examples/css-examples/container/content-visibility.html
new file mode 100644
index 000000000..5ca53aea1
--- /dev/null
+++ b/live-examples/css-examples/container/content-visibility.html
@@ -0,0 +1,25 @@
+<section id="example-choice-list" class="example-choice-list large" data-property="content-visibility">
+  <div class="example-choice" initial-choice="true">
+    <pre><code class="language-css">content-visibility: visible;</code></pre>
+    <button type="button" class="copy hidden" aria-hidden="true">
+      <span class="visually-hidden">Copy to Clipboard</span>
+    </button>
+  </div>
+
+  <div class="example-choice">
+    <pre><code class="language-css">content-visibility: hidden;</code></pre>
+    <button type="button" class="copy hidden" aria-hidden="true">
+      <span class="visually-hidden">Copy to Clipboard</span>
+    </button>
+  </div>
+</section>
+
+<div id="output" class="output large hidden">
+  <section id="default-example" class="default-example">
+    <div id="example-element" class="container">
+      <div class="child">
+        <span>This is an inner div</span>
+      </div>
+    </div>
+  </section>
+</div>
diff --git a/live-examples/css-examples/container/meta.json b/live-examples/css-examples/container/meta.json
index f44dff432..4765f4291 100644
--- a/live-examples/css-examples/container/meta.json
+++ b/live-examples/css-examples/container/meta.json
@@ -15,6 +15,13 @@
       "fileName": "contain.html",
       "title": "CSS Demo: contain",
       "type": "css"
+    },
+    "content-visibility": {
+      "cssExampleSrc": "./live-examples/css-examples/container/content-visibility.css",
+      "exampleCode": "./live-examples/css-examples/container/content-visibility.html",
+      "fileName": "content-visibility.html",
+      "title": "CSS Demo: content-visibility",
+      "type": "css"
     }
   }
 }