feat(css): Add example of :scope and :fullscreen (#2196)

* scope, fullscreen

* lint

* Update live-examples/css-examples/pseudo-class/scope.html

---------

Co-authored-by: Estelle Weyl <estelle@openwebdocs.org>

live-examples/css-examples/pseudo-class/fullscreen.css

@@ -0,0 +1,10 @@
+#full-screen-section {
+    border: 1px solid black;
+    padding: 0.5rem;
+}
+
+#full-screen-section:fullscreen {
+    background-color: khaki;
+    color: black;
+    text-align: center;
+}

live-examples/css-examples/pseudo-class/fullscreen.html

@@ -0,0 +1,7 @@
+<p>This paragraph will not be shown in Full-Screen mode, so it will not be matched.</p>
+
+<div id="full-screen-section">
+    <p>This paragraph along with button located below will be shown in Full-Screen mode.</p>
+
+    <button id="full-screen-btn">Open/Close Full-Screen mode</button>
+</div>

live-examples/css-examples/pseudo-class/fullscreen.js

@@ -0,0 +1,10 @@
+const btn = document.getElementById('full-screen-btn');
+const section = document.getElementById('full-screen-section');
+
+btn.addEventListener('click', () => {
+  if (!document.fullscreenElement) {
+    section.requestFullscreen();
+  } else {
+    document.exitFullscreen();
+  }
+});

live-examples/css-examples/pseudo-class/meta.json

@@ -195,6 +195,17 @@
             "defaultTab": "css",
             "height": "tabbed-shorter"
         },
+        "fullscreen": {
+            "cssExampleSrc": "./live-examples/css-examples/pseudo-class/fullscreen.css",
+            "exampleCode": "./live-examples/css-examples/pseudo-class/fullscreen.html",
+            "jsExampleSrc": "./live-examples/css-examples/pseudo-class/fullscreen.js",
+            "fileName": "pseudo-class-fullscreen.html",
+            "title": "CSS Demo: :fullscreen",
+            "type": "tabbed",
+            "defaultTab": "css",
+            "tabs": "html,css,js",
+            "height": "tabbed-shorter"
+        },
         "lastChild": {
             "cssExampleSrc": "./live-examples/css-examples/pseudo-class/last-child.css",
             "exampleCode": "./live-examples/css-examples/pseudo-class/last-child.html",
@@ -359,6 +370,17 @@
             "defaultTab": "css",
             "height": "tabbed-shorter"
         },
+        "scope": {
+            "cssExampleSrc": "./live-examples/css-examples/pseudo-class/scope.css",
+            "exampleCode": "./live-examples/css-examples/pseudo-class/scope.html",
+            "jsExampleSrc": "./live-examples/css-examples/pseudo-class/scope.js",
+            "fileName": "pseudo-class-scope.html",
+            "title": "CSS Demo: :scope",
+            "type": "tabbed",
+            "defaultTab": "js",
+            "tabs": "html,css,js",
+            "height": "tabbed-shorter"
+        },
         "valid": {
             "cssExampleSrc": "./live-examples/css-examples/pseudo-class/valid.css",
             "exampleCode": "./live-examples/css-examples/pseudo-class/valid.html",

live-examples/css-examples/pseudo-class/scope.css

@@ -0,0 +1,8 @@
+#special-paragraph {
+    font-weight: bold;
+}
+
+.special-s {
+    text-decoration: underline overline line-through;
+    color: crimson;
+}

live-examples/css-examples/pseudo-class/scope.html

@@ -0,0 +1,5 @@
+<div>
+        <p id="special-paragraph">The love of my life and the most intriguing woman in the whole world is <s>Alice</s> Ava.</p>
+
+    <p>From the moment I saw her in a <s>coffeehouse</s> bar, I knew she completed me.</p>
+</div>

live-examples/css-examples/pseudo-class/scope.js

@@ -0,0 +1,4 @@
+const p = document.getElementById('special-paragraph');
+const specialS = p.querySelectorAll(':scope > s');
+
+specialS.forEach(s => s.classList.add('special-s'));