Attachment 361061 Details for Bug 105023 – [HTML] Test page for node highlighting

[HTML] Test page for node highlighting

OverlayTest-nodes.html (text/html), 3.23 KB, created by Devin Rousso on 2019-02-04 09:33:13 PST

(hide)

Description:

Filename:

MIME Type:

Creator: Devin Rousso

Created: 2019-02-04 09:33:13 PST

Size: 3.23 KB

patch

obsolete

><style>
>p {
>    position: fixed;
>    right: 20px;
>    bottom: 20px;
>    margin: 0;
>}
>[id^="test"] {
>    position: relative;
>    pointer-events: none;
>
>    --content: 0;
>    --padding: 0;
>    --border: 0;
>    --margin: 0;
>
>    --content-color: rgba(246, 178, 107, 0.66);
>    --padding-color: rgba(255, 229, 153, 0.66);
>    --border-color: rgba(147, 196, 125, 0.66);
>    --margin-color: rgba(111, 168, 220, 0.66);
>}
>.expected {
>    position: absolute;
>    top: 0;
>    left: 0;
>    z-index: -1;
>    pointer-events: none;
>}
>.expected > .margin {
>    position: absolute;
>    top: 0;
>    left: 0;
>    width: calc((var(--border) * 2) + (var(--padding) * 2) + var(--content));
>    height: calc((var(--border) * 2) + (var(--padding) * 2) + var(--content));
>    border: var(--margin) solid var(--content-color);
>}
>.expected > .border {
>    position: absolute;
>    top: var(--margin);
>    left: var(--margin);
>    width: calc((var(--padding) * 2) + var(--content));
>    height: calc((var(--padding) * 2) + var(--content));
>    border: var(--border) solid var(--padding-color);
>}
>.expected > .padding {
>    position: absolute;
>    top: calc(var(--margin) + var(--border));
>    left: calc(var(--margin) + var(--border));
>    width: var(--content);
>    height: var(--content);
>    border: var(--padding) solid var(--border-color);
>}
>.expected > .content {
>    position: absolute;
>    top: calc(var(--margin) + var(--border) + var(--padding));
>    left: calc(var(--margin) + var(--border) + var(--padding));
>    width: var(--content);
>    height: var(--content);
>    background-color: var(--margin-color);
>}
>.actual {
>    display: inline-block;
>    pointer-events: all;
>    width: var(--content);
>    height: var(--content);
>    margin: var(--margin);
>    padding: var(--padding);
>    border: var(--border) solid transparent;
>}
>.clear {
>    clear: both;
>}
>
>#test1 {
>    --content: 10px;
>    --padding: 20px;
>    --border: 30px;
>    --margin: 40px;
>}
>
>#test2 {
>    --content: 100px;
>}
>#test2 > .expected > .content::after {
>    display: block;
>    width: 100%;
>    height: 100%;
>    content: "";
>    background-color: rgba(96, 82, 127, 0.8);
>    border-radius: 50%;
>}
>#test2 > .actual {
>    float: left;
>    shape-outside: ellipse(50%);
>}
></style>
><body>
>    <div id="test1">
>        <div class="expected" hidden>
>            <div class="margin"></div>
>            <div class="border"></div>
>            <div class="padding"></div>
>            <div class="content"></div>
>        </div>
>        <div class="actual"></div>
>        <div class="clear"></div>
>    </div>
>
>    <hr>
>
>    <div id="test2">
>        <div class="expected" hidden>
>            <div class="margin"></div>
>            <div class="border"></div>
>            <div class="padding"></div>
>            <div class="content"></div>
>        </div>
>        <div class="actual"></div>
>        <div class="clear"></div>
>    </div>
>
>    <p>Inspect this page and hover each test area in the Elements tab.  Click <button>Show Expected</button> to compare with the expected result.</p>
>    <script>
>let showingExpected = false;
>document.querySelector("button").addEventListener("click", (event) => {
>    showingExpected = !showingExpected;
>    for (let node of document.querySelectorAll(".expected"))
>        node.hidden = !showingExpected;
>});
>    </script>
></body>

<style>
p {
    position: fixed;
    right: 20px;
    bottom: 20px;
    margin: 0;
}
[id^="test"] {
    position: relative;
    pointer-events: none;

    --content: 0;
    --padding: 0;
    --border: 0;
    --margin: 0;

    --content-color: rgba(246, 178, 107, 0.66);
    --padding-color: rgba(255, 229, 153, 0.66);
    --border-color: rgba(147, 196, 125, 0.66);
    --margin-color: rgba(111, 168, 220, 0.66);
}
.expected {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    pointer-events: none;
}
.expected > .margin {
    position: absolute;
    top: 0;
    left: 0;
    width: calc((var(--border) * 2) + (var(--padding) * 2) + var(--content));
    height: calc((var(--border) * 2) + (var(--padding) * 2) + var(--content));
    border: var(--margin) solid var(--content-color);
}
.expected > .border {
    position: absolute;
    top: var(--margin);
    left: var(--margin);
    width: calc((var(--padding) * 2) + var(--content));
    height: calc((var(--padding) * 2) + var(--content));
    border: var(--border) solid var(--padding-color);
}
.expected > .padding {
    position: absolute;
    top: calc(var(--margin) + var(--border));
    left: calc(var(--margin) + var(--border));
    width: var(--content);
    height: var(--content);
    border: var(--padding) solid var(--border-color);
}
.expected > .content {
    position: absolute;
    top: calc(var(--margin) + var(--border) + var(--padding));
    left: calc(var(--margin) + var(--border) + var(--padding));
    width: var(--content);
    height: var(--content);
    background-color: var(--margin-color);
}
.actual {
    display: inline-block;
    pointer-events: all;
    width: var(--content);
    height: var(--content);
    margin: var(--margin);
    padding: var(--padding);
    border: var(--border) solid transparent;
}
.clear {
    clear: both;
}

#test1 {
    --content: 10px;
    --padding: 20px;
    --border: 30px;
    --margin: 40px;
}

#test2 {
    --content: 100px;
}
#test2 > .expected > .content::after {
    display: block;
    width: 100%;
    height: 100%;
    content: "";
    background-color: rgba(96, 82, 127, 0.8);
    border-radius: 50%;
}
#test2 > .actual {
    float: left;
    shape-outside: ellipse(50%);
}
</style>
<body>
    <div id="test1">
        <div class="expected" hidden>
            <div class="margin"></div>
            <div class="border"></div>
            <div class="padding"></div>
            <div class="content"></div>
        </div>
        <div class="actual"></div>
        <div class="clear"></div>
    </div>

    <hr>

    <div id="test2">
        <div class="expected" hidden>
            <div class="margin"></div>
            <div class="border"></div>
            <div class="padding"></div>
            <div class="content"></div>
        </div>
        <div class="actual"></div>
        <div class="clear"></div>
    </div>

    <p>Inspect this page and hover each test area in the Elements tab.  Click <button>Show Expected</button> to compare with the expected result.</p>
    <script>
let showingExpected = false;
document.querySelector("button").addEventListener("click", (event) => {
    showingExpected = !showingExpected;
    for (let node of document.querySelectorAll(".expected"))
        node.hidden = !showingExpected;
});
    </script>
</body>

Actions: View

Attachments on bug 105023: 357882 | 358151 | 358152 | 358153 | 358158 | 358160 | 358161 | 358162 | 358163 | 358165 | 358215 | 358222 | 358223 | 358226 | 360812 | 360821 | 361060 | 361061 | 361062 | 362873 | 362874