Base: Add a test page for the various element classList APIs

author: Timothy Flynn <trflynn89@pm.me> 2021-10-18 13:23:15 -0400
committer: Andreas Kling <kling@serenityos.org> 2021-10-18 23:33:56 +0200
commit: 72b409a2f7e63fe4f283788df8aba489278fcc2c (patch)
tree: 69268ca1737d4cc1746faa85e32dc6e06b8e4488 /Base/res/html
parent: 14349f058a8a8f3ca47e271aeb3bc53eb0047718 (diff)
download: serenity-72b409a2f7e63fe4f283788df8aba489278fcc2c.zip
2 files changed, 244 insertions, 0 deletions
diff --git a/Base/res/html/misc/class-list.html b/Base/res/html/misc/class-list.html
new file mode 100644
index 0000000000..be03164bd9
--- /dev/null
+++ b/Base/res/html/misc/class-list.html
@@ -0,0 +1,243 @@
+<head>
+    <style>
+        .pass, .fail {
+            height: 30px;
+            line-height: 30px;
+            color: white;
+            display: block;
+            border: 1px solid black;
+            margin: 3px;
+            padding: 3px;
+        }
+
+        .pass { background-color: green; }
+        .fail { background-color: red; }
+    </style>
+</head>
+<body>
+    <div id=test0></div>
+    <div id=test1></div>
+    <div id=test2></div>
+
+    <script>
+        let test0 = document.getElementById('test0');
+        let test1 = document.getElementById('test1');
+        let test2 = document.getElementById('test2');
+
+        const bindMethodsForTest = (method) => {
+            let failures = 0;
+
+            const pass = (message) => {
+                if (failures > 0)
+                    return;
+
+                const span = document.createElement('span');
+                span.innerHTML = `Pass! ${method}`;
+                span.setAttribute('class', 'pass');
+                document.body.appendChild(span);
+
+                test0.className = '';
+                test1.className = '';
+                test2.className = '';
+            };
+
+            const fail = (message) => {
+                const span = document.createElement('span');
+                span.innerHTML = `Fail! ${method}: ${message}`;
+                span.setAttribute('class', 'fail');
+                document.body.appendChild(span);
+                ++failures;
+            };
+
+            const invalidTokenTest = () => {
+                const test = (args1, args2) => {
+                    try {
+                        test0.classList[method](...args1);
+                        fail(`Expected classList.${method}(${args1}) to throw due to empty token`);
+                    } catch (error) {
+                        if (error.name !== 'SyntaxError')
+                            fail(`Expected exception to be a DOMException of type SyntaxError but is "${error.name}"`);
+                    }
+
+                    try {
+                        test0.classList[method](...args2);
+                        fail(`Expected classList.${method}(${args2}) to throw due to token containing a space`);
+                    } catch (error) {
+                        if (error.name !== 'InvalidCharacterError')
+                            fail(`Expected exception to be a DOMException of type InvalidCharacterError but is "${error.name}"`);
+                    }
+                };
+
+                if (test0.classList[method].length === 2) {
+                    test(['', 'foo'], ['foo bar', 'foobar']);
+                    test(['foo', ''], ['foobar', 'foo bar']);
+                } else {
+                    test([''], ['foo bar']);
+                }
+            };
+
+            return [pass, fail, invalidTokenTest];
+        };
+
+        (() => {
+            const [pass, fail] = bindMethodsForTest('contains');
+
+            test0.className = 'foo';
+            test1.className = 'foo bar';
+
+            if (!test0.classList.contains('foo'))
+                fail('test0 should contain class "foo"');
+            if (test0.classList.contains('bar'))
+                fail('test0 should not contain class "bar"');
+
+            if (!test1.classList.contains('foo'))
+                fail('test1 should contain class "foo"');
+            if (!test1.classList.contains('bar'))
+                fail('test1 should contain class "bar"');
+
+            pass();
+        })();
+
+        (() => {
+            const [pass, fail, invalidTokenTest] = bindMethodsForTest('add');
+            invalidTokenTest();
+
+            test0.classList.add('foo');
+            test1.classList.add('foo', 'bar');
+            test2.classList.add('foo', 'bar', 'foo');
+
+            if (test0.className !== 'foo')
+                fail(`test0 should have a class name of "foo" but has "${test0.className}"`)
+            if (test1.className !== 'foo bar')
+                fail(`test1 should have a class name of "foo bar" but has "${test1.className}"`)
+            if (test2.className !== 'foo bar')
+                fail(`test2 should have a class name of "foo bar" but has "${test2.className}"`)
+
+            pass();
+        })();
+
+        (() => {
+            const [pass, fail, invalidTokenTest] = bindMethodsForTest('remove');
+            invalidTokenTest();
+
+            test0.className = 'foo';
+            test1.className = 'foo bar';
+            test2.className = 'foo bar';
+
+            test0.classList.remove('foo');
+            test1.classList.remove('foo', 'bar');
+            test2.classList.remove('bar');
+
+            if (test0.className !== '')
+                fail(`test0 should have a class name of "" but has "${test0.className}"`)
+            if (test1.className !== '')
+                fail(`test1 should have a class name of "" but has "${test1.className}"`)
+            if (test2.className !== 'foo')
+                fail(`test2 should have a class name of "foo" but has "${test2.className}"`)
+
+            pass();
+        })();
+
+        (() => {
+            const [pass, fail, invalidTokenTest] = bindMethodsForTest('toggle');
+            invalidTokenTest();
+
+            if (!test0.classList.toggle('foo'))
+                fail('test0 should contain class "foo"');
+            if (!test0.classList.toggle('bar', true))
+                fail('test0 should contain class "bar"');
+            if (test0.classList.toggle('baz', false))
+                fail('test0 should not contain class "baz"');
+
+            if (test0.classList.toggle('foo'))
+                fail('test0 should not contain class "foo"');
+            if (!test0.classList.toggle('bar', true))
+                fail('test0 should contain class "bar"');
+            if (test0.classList.toggle('bar', false))
+                fail('test0 should not contain class "bar"');
+
+            pass();
+        })();
+
+        (() => {
+            const [pass, fail, invalidTokenTest] = bindMethodsForTest('replace');
+            invalidTokenTest();
+
+            if (test0.classList.replace('foo', 'bar'))
+                fail('test0 should not have contained class "bar"');
+            if (test0.className !== '')
+                fail(`test0 should have a class name of "" but has "${test0.className}"`)
+
+            test0.className = 'foo';
+
+            if (!test0.classList.replace('foo', 'bar'))
+                fail('test0 should have contained class "bar"');
+            if (test0.className !== 'bar')
+                fail(`test0 should have a class name of "bar" but has "${test0.className}"`)
+
+            test0.className = 'foo bar';
+
+            if (!test0.classList.replace('bar', 'baz'))
+                fail('test0 should have contained class "bar"');
+            if (test0.className !== 'foo baz')
+                fail(`test0 should have a class name of "foo baz" but has "${test0.className}"`)
+
+            test0.className = 'foo bar baz';
+
+            if (!test0.classList.replace('foo', 'baz'))
+                fail('test0 should have contained class "bar"');
+            if (test0.className !== 'baz bar')
+                fail(`test0 should have a class name of "baz bar" but has "${test0.className}"`)
+
+            test0.className = 'baz bar foo';
+
+            if (!test0.classList.replace('foo', 'baz'))
+                fail('test0 should have contained class "bar"');
+            if (test0.className !== 'baz bar')
+                fail(`test0 should have a class name of "baz bar" but has "${test0.className}"`)
+
+            test0.className = 'foo bar baz';
+
+            if (!test0.classList.replace('baz', 'baz'))
+                fail('test0 should have contained class "bar"');
+            if (test0.className !== 'foo bar baz')
+                fail(`test0 should have a class name of "foo bar baz" but has "${test0.className}"`)
+
+            pass();
+        })();
+
+        (() => {
+            const [pass, fail] = bindMethodsForTest('supports');
+
+            try {
+                test0.classList.supports('foo');
+                fail('Expected supports to throw due to no defined supported tokens');
+            } catch (error) {
+                if (error.name !== 'TypeError')
+                    fail(`Expected exception to be a DOMException of type TypeError but is "${error.name}"`);
+            }
+
+            pass();
+        })();
+
+        (() => {
+            const [pass, fail] = bindMethodsForTest('value');
+
+            test0.classList.value = 'foo';
+
+            if (test0.className !== 'foo')
+                fail(`test0 should have a class name of "foo" but has "${test0.className}"`)
+            if (test0.classList.value !== 'foo')
+                fail(`test0 should have a class name of "foo" but has "${test0.className}"`)
+
+            test0.classList.value = 'foo bar';
+
+            if (test0.className !== 'foo bar')
+                fail(`test0 should have a class name of "foo bar" but has "${test0.className}"`)
+            if (test0.classList.value !== 'foo bar')
+                fail(`test0 should have a class name of "foo bar" but has "${test0.className}"`)
+
+            pass();
+        })();
+    </script>
+</body>
diff --git a/Base/res/html/misc/welcome.html b/Base/res/html/misc/welcome.html
index 135b63df75..51aa68eb68 100644
--- a/Base/res/html/misc/welcome.html
+++ b/Base/res/html/misc/welcome.html
@@ -111,6 +111,7 @@
             <li><a href="clear-1.html">Float clearing</a></li>
             <li><a href="overflow.html">Overflow</a></li>
             <li><a href="attributes.html">Attributes</a></li>
+            <li><a href="class-list.html">Class List</a></li>
             <li><h3>Features</h3></li>
             <li><a href="css.html">Basic functionality</a></li>
             <li><a href="colors.html">css colors</a></li>
author	Timothy Flynn <trflynn89@pm.me>	2021-10-18 13:23:15 -0400
committer	Andreas Kling <kling@serenityos.org>	2021-10-18 23:33:56 +0200
commit	72b409a2f7e63fe4f283788df8aba489278fcc2c (patch)
tree	69268ca1737d4cc1746faa85e32dc6e06b8e4488 /Base/res/html
parent	14349f058a8a8f3ca47e271aeb3bc53eb0047718 (diff)
download	serenity-72b409a2f7e63fe4f283788df8aba489278fcc2c.zip