buttons w/ interactive descendants

Testing cross-browser compliance with W3C spec that says buttons may only contain "Phrasing content, but there must be no interactive content descendant." http://www.w3.org/TR/html5/forms.html#the-button-element

by Gerald Fullam

HTML

<button>
    <span>
        <span>Button</span>
        <span class="child">1
            <span class="tooltip">Tooltip</span>
        </span>
    </span>
</button>
    (.tooltip as 3rd-level descendant)
<br />
<button>
    <span>Button</span>
    <span class="child">2
        <span class="tooltip">Tooltip</span>
    </span>
</button>
    (.tooltip as 2nd-level descendant)
<br />
<button>
    <span>Button</span>
    <span class="child">3</span>
    <span class="tooltip">Tooltip</span>
</button>
    (.tooltip as direct descendant)
<br />
<div role="button">
    <span>Button</span>
    <span class="child">4
        <span class="tooltip">Tooltip</span>
    </span>
</div>
    (div[role="button"])

CSS

body { font-family: sans-serif; }
button::-moz-focus-inner {
    margin: 0;
    padding: 0;
    border: 0;
}
button,
[role="button"] {
    cursor: pointer;
    position: relative;
    display: inline-block;
    margin: 1px;
    padding: 0.5em 1em;
    border: 1px solid Gainsboro;
    border-radius: 3px;
    background-color: WhiteSmoke;
    font: normal 0.8em sans-serif;
    text-align: center;
}
.child {
    cursor: default;
    position: relative;
    display: inline-block;
    width: 1em;
    padding: 0 .1em;
    background-color: Tomato;
}
:hover>.child {
    background-color: Lime;
}
.tooltip {
    position: absolute;
    top: 0;
    left: 100%;
    display: none;
    padding: 0 .5em;
    color: White;
    background-color: DarkSlateGray;
}
:hover>.tooltip {
    display: block;
}