The HTML sanitizer removes SVG elements with camel case names like linearGradient

The secure HTML element sanitizer compares element names case-sensitively, while its lists of allowed SVG elements are lowercase (except for the filter elements, which are in camel case). Attribute names are already compared case-insensitively.

As a consequence, in restricted HTML cleaning (e.g., HTML macros written by users without script right):

• SVG elements written with their standard camel case name, like linearGradient, radialGradient, clipPath or textPath, are removed, together with their content. Only the lowercase spelling lineargradient is kept. Browsers serialize SVG elements in camel case, so content copied from a browser loses its gradients and clip paths.
• SVG filter elements are only kept in camel case, e.g., feGaussianBlur is kept but fegaussianblur is removed.
• Uppercase names like <RECT> are removed.
• The tag names configured in xml.htmlElementSanitizer.forbidTags and xml.htmlElementSanitizer.extraAllowedTags are also matched case-sensitively, so, e.g., forbidding feimage doesn't forbid feImage.

Browsers parse element names case-insensitively, and DOMPurify, which the sanitizer is based on, lowercases them before checking them.

Steps to reproduce

1. As a user without script right, create a page with:

   {{html}}
   <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 10"><defs><linearGradient id="g"><stop offset="0" stop-color="red"></stop><stop offset="1" stop-color="blue"></stop></linearGradient></defs><rect fill="url(#g)" width="10" height="10"></rect></svg>
   {{/html}}
   

Expected: the rectangle is displayed with a gradient.
Actual: the linearGradient element is removed and the rectangle is black.