create-mailto.js 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 can be modified to include a mailto: link. The second shows your browser's rendering of that fragment after being processed by create-mailto.js.

The test passes if each row contains one <a href="mailto:"> link.

HTML code fragment browser rendering
inline element with single class name and one child text node
<span class="email">username@example.com</span>
block element with two class names and one child text node
<p class="email foo">username@example.com</p>
inline element with itemprop attribute
<b itemprop="email">username@example.com</b>
username@example.com
inline element with itemprop attribute
<span itemprop="email foo">username@example.com</span>
username@example.com
inline element with data-email attribute
<em data-email="username@example.com">email me</em>
email me
inline elements with 2 class names
<span class="email foo"><i>username</i>@example.com</span>
block element with itemprop attribute and a child inline element
<p itemprop="email foo"><i>username</i>@example.com</p>

username@example.com
block element with data-email attribute and a child inline element 
<div data-email="username@example.com">
    <em>email</em> me
</div>
email me
image with data-email attribute
<img data-email="username@example.com" ... >
test
blockquote with data-email attribute and child paragraph element 
<blockquote data-email="username@example.com">
    <p>Lorem ipsum dolor sit amet....</p>
</blockquote>

Lorem ipsum dolor sit amet....

svg element with class attribute 
<svg class="email">
    <circle/>
    <text>username@example.com</text>
</svg>