exempt string values from being treated as known booleans unless empty or equal to name

Author: Katja Potensky

Diff for: lib/handle/element.js

@@ -173,8 +173,8 @@ function serializeAttribute(state, key, value) {
   if (info.overloadedBoolean && (value === info.attribute || value === '')) {
     value = true
   } else if (
-    info.boolean ||
-    (info.overloadedBoolean && typeof value !== 'string')
+    (typeof value !== 'string' || value === '' || value === info.attribute) &&
+    (info.boolean || info.overloadedBoolean)
   ) {
     value = Boolean(value)
   }

Diff for: test/attribute.js

@@ -140,6 +140,7 @@ test('`element` attributes', async (t) => {
       }
     )
 
+    // TODO: why? "hidden" is  a valid value for the `hidden` attribute
     await t.test(
       'should serialize known booleans set to their name without value',
       async function () {
@@ -161,6 +162,49 @@ test('`element` attributes', async (t) => {
         )
       }
     )
+
+    await t.test(
+      'should serialize known booleans set to arbitrary strings with value',
+      async function () {
+        assert.deepEqual(
+          toHtml(
+            h('div', {
+              selected: 'some string value for a well known boolean attribute'
+            })
+          ),
+          '<div selected="some string value for a well known boolean attribute"></div>'
+        )
+      }
+    )
+
+    await t.test(
+      'should serialize known booleans set to an empty string without value',
+      async function () {
+        assert.deepEqual(
+          toHtml(
+            h('div', {
+              selected: ''
+            })
+          ),
+          '<div selected></div>'
+        )
+      }
+    )
+
+    await t.test(
+      'should serialize known overloaded booleans set to arbitrary strings with value',
+      async function () {
+        assert.deepEqual(
+          toHtml(
+            h('div', {
+              download:
+                'some string value for a well known overloaded boolean attribute'
+            })
+          ),
+          '<div download="some string value for a well known overloaded boolean attribute"></div>'
+        )
+      }
+    )
   })
 
   await t.test('should support known overloaded booleans', async function (t) {