Add test case for :watch-attr

Rudxain · Jun 22, 2019 · a436102 · a436102
1 parent b2fb650
commit a436102
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 2 deletions.
diff --git a/docs/tests/procedural-cosmetic-filters.html b/docs/tests/procedural-cosmetic-filters.html
@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html>
 <head>
+<meta charset="utf-8">
 <title>Procedural cosmetic filters</title>
 <style>
     .filters {
@@ -25,7 +26,7 @@
         justify-content: center;
     }
     .tile > div {
-        height: 100px;
+        height: 50px;
         position: relative;
     }
     .tile > div > div {
@@ -141,6 +142,20 @@ <h3>Tests</h3>
     <code>#pcf #a14 .pass > a:has(b) + .fail:has(b)</code>
     </div>
 
+<div id="a15" class="tile">
+    <div class="pass"><div class="pass"><a><b class="ok"></b></a></div></div>
+    <code>#pcf #a15 .pass:watch-attrs(class) > .fail:has(b.notok)</code>
+    <script>
+        self.setTimeout(( ) =>
+            {
+                document.querySelector('#a15 .pass > .pass').className = 'fail';
+                document.querySelector('#a15 .pass > .fail b.ok').className = 'notok';
+            },
+            500
+        );
+    </script>
+    </div>
+
 </div>
 
 <script>

diff --git a/docs/tests/procedural-html-filters.html b/docs/tests/procedural-html-filters.html
@@ -1,6 +1,7 @@
 <!DOCTYPE html>
 <html>
 <head>
+<meta charset="utf-8">
 <title>Procedural HTML filters</title>
 <style>
     .filters {
@@ -25,7 +26,7 @@
         justify-content: center;
     }
     .tile > div {
-        height: 100px;
+        height: 50px;
         position: relative;
     }
     .tile > div > div {