[Webkit-unassigned] [Bug 218339] New: HTML template element does not respect input type="color"

[bugzilla-daemon at webkit.org]

https://bugs.webkit.org/show_bug.cgi?id=218339

            Bug ID: 218339
           Summary: HTML template element does not respect input
                    type="color"
           Product: WebKit
           Version: Safari 14
          Hardware: Macintosh
                OS: macOS 10.15
            Status: NEW
          Severity: Normal
          Priority: P2
         Component: DOM
          Assignee: webkit-unassigned at lists.webkit.org
          Reporter: cafebab3 at gmail.com

Created attachment 412647

  --> https://bugs.webkit.org/attachment.cgi?id=412647&action=review

Minimal sample html page to reproduce the bug.

### Overview

The HTML Content Template element `<template>` does not respect the HTML5 input type="color".
Instead of rendering a color picker, an ordinary input field is shown.

### Steps to Reproduce

Open the attached html file in a Safari browser.

### Actual Results

An input text field is rendered.

### Expected Results

A color picker should be rendered.

### Additional Builds and Platforms

Doesn't occur on current version of Chrome and Firefox.

### Additional Information

Above, we reproduced the bug using a template tag as part of the markup of a html document.

The bug also occurs, when create a template element dynamically using javascript:

    const template = document.createElement('template')
    template.innerHTML = '<input type="color">'
    const fragment = template.content
    document.body.appendChild(fragment.cloneNode(true))

The bug does not occur when rendering to a div.
The following code can be used as a **workaround** for the bug:

    const div = document.createElement('div')
    div.innerHTML = '<input type="color">'
    const fragment = document.createDocumentFragment()
    fragment.append(...div.childNodes)
    document.body.appendChild(fragment.cloneNode(true))

Here you can find a benchmark that compares the workaround with the canonical solution:

    https://esbench.com/bench/5f9ac111b4632100a7dcd4e0

Thanks!

Daniel

-- 
You are receiving this mail because:
You are the assignee for the bug.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.webkit.org/pipermail/webkit-unassigned/attachments/20201029/5aade45d/attachment-0001.htm>