feat(css): create an example for content-visibility

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;
+}

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>

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"
     }
   }
 }