Merge pull request mdn#87 from bsmth/19452-chore-contain-style

Rumyra · web-flow · commit 83efac68d978 · 2022-08-24T15:46:16.000+01:00
chore: add example for 'contain: style'
diff --git a/contain/contain-style-counter.html b/contain/contain-style-counter.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title>Float interference</title>
+    <style>
+      body {
+        counter-reset: headings;
+      }
+
+      h1::before {
+        counter-increment: headings;
+        content: counter(headings) ": ";
+      }
+
+      .contain {
+        contain: style;
+      }
+    </style>
+  </head>
+  <body>
+    <h1>Introduction</h1>
+    <h1>Background</h1>
+    <div class="contain">
+      <h1>Contained counter</h1>
+    </div>
+    <h1>Conclusion</h1>
+  </body>
+</html>
diff --git a/contain/contain-style-quotes.html b/contain/contain-style-quotes.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title>Float interference</title>
+    <style>
+      body {
+        quotes: "«" "»" "‹" "›";
+      }
+      .open-quote:before {
+        content: open-quote;
+      }
+
+      .close-quote:after {
+        content: close-quote;
+      }
+    </style>
+  </head>
+  <body>
+    <span class="open-quote">
+      outer
+      <span style="contain: style">
+        <span class="open-quote"> inner </span>
+      </span>
+    </span>
+    <span class="close-quote"> close </span>
+  </body>
+</html>
