create-mailto.js exclude test

This page tests create-mailto.js on different HTML fragments. The table below contains one example per row. The first column shows a code fragment that should not, according the rules of anchor links in HTML be modified to add a mailto: link. The second column shows your browser's rendering of that fragment after create-mailto.js has processed the document.

The test passes if table contains no <a href="mailto:"> links.

HTML output
a element
<a class="email" href="./">username@example.com</a>
a element
<a class="u-email" href="./">username@example.com</a>
username@example.com
a element
<a itemprop="email" href="./">username@example.com</a>
username@example.com
inline element with child a element
<span class="email"><a href="./">username</a>@example.com</span>
block element with child a element
<p itemprop="email"><a href="./">username</a>@example.com</p>

username@example.com
inline element with child a element
<em data-email="username@example.com">email <a href="./">me</a></em>
email me
block element with child a element 
                                    
<blockquote data-email="username@example.com">
    <p>
        Lorem
            <a href="./">ipsum dolor</a>
            sit amet...
    </p>
</blockquote>

Lorem ipsum dolor sit amet....

inline element with ancestor a element
<a href="./">foo <span class="email">username@example.com</span></a>
foo
inline element with ancestor a element 
                                    
<a href="./">
    bar <span itemprop="email">username@example.com</span>
</a>
bar username@example.com
inline element with ancestor a element 
                                    
<a href="./">
    <span data-email="username@example.com">email me</span>
</a>
baz email me
block element with ancestor a element 
                                
<a href="./">
    <blockquote data-email="username@example.com">
        <p>
            Lorem ipsum dolor sit amet
        </p>
    </blockquote>
</a>

Lorem ipsum dolor sit amet

image element with data-email attribute and parent a element
<a href="./"><img data-email="username@example.com" ... ></a>
test
svg element with class name email and a element as parent of email address 
                                    
<svg class="email">
    <a href="./">
        <circle/>
        <text>username@example.com</text>
    </a>
</svg>