Attachment 340460 Details for Bug 128482 – [HTML] Test Page

[HTML] Test Page

overlay-element-title-test.html (text/html), 1.92 KB, created by Matt Baker on 2018-05-15 18:20:19 PDT

(hide)

Description:

Filename:

MIME Type:

Creator: Matt Baker

Created: 2018-05-15 18:20:19 PDT

Size: 1.92 KB

patch

obsolete

><html>
><style>
>body {
>    margin: 0;
>    padding: 0;
>}
>
>.box {
>    position: absolute;
>    width: 100px;
>    height: 100px;
>    line-height: 100px;
>    text-align: center;
>    background-color: #ccc;
>}
>
>.box.hint {
>    background: none;
>    border: solid 1px black;
>    border-style: dashed;
>}
>
>/* Corners */
>#box1 {
>    left: 0;
>    top: 0;
>}
>
>#box2 {
>    right: 0;
>    top: 0;
>}
>
>#box3 {
>    left: 0;
>    bottom: 0;
>}
>
>#box4 {
>    right: 0;
>    bottom: 0;
>}
>
>/* Outside of the view edges */
>
>/* top edge */
>#box5, #box5-hint {
>    left: 50%;
>    transform: translateX(-50%);
>    top: 0;
>}
>#box5 { top: -100px; }
>
>/* right edge */
>#box6, #box6-hint {
>    top: 50%;
>    transform: translateY(-50%);
>    right: 0px;
>}
>#box6 { right: -100px; }
>
>/* bottom edge */
>#box7, #box7-hint {
>    left: 50%;
>    transform: translateX(-50%);
>    bottom: 0;
>}
>#box7 { bottom: -100px; }
>
>/* left edge */
>#box8, #box8-hint {
>    top: 50%;
>    transform: translateY(-50%);
>    left: 0px;
>}
>#box8 { left: -100px; }
>
>.title {
>    font-size: 20px;
>    position: absolute;
>    text-align: center;
>    width: 100px;
>    left: 50%;
>    top: 50%;
>    transform: translate(-50%, -50%);
>
>}
>
></style>
><body>
>    <div class="title">After</div>
>    
>    <div id="box1" class="box">1</div>
>    <div id="box2" class="box">2</div>
>    <div id="box3" class="box">3</div>
>    <div id="box4" class="box">4</div>
>
>    
>    <div id="box5" class="box">5</div>
>    <div id="box6" class="box">6</div>
>    <div id="box7" class="box">7</div>
>    <div id="box8" class="box">8</div>
>
>    
>    <div id="box5-hint" class="box hint">5</div>
>    <div id="box6-hint" class="box hint">6</div>
>    <div id="box7-hint" class="box hint">7</div>
>    <div id="box8-hint" class="box hint">8</div>
></body>
></html>

<html>
<style>
body {
    margin: 0;
    padding: 0;
}

.box {
    position: absolute;
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
    background-color: #ccc;
}

.box.hint {
    background: none;
    border: solid 1px black;
    border-style: dashed;
}

/* Corners */
#box1 {
    left: 0;
    top: 0;
}

#box2 {
    right: 0;
    top: 0;
}

#box3 {
    left: 0;
    bottom: 0;
}

#box4 {
    right: 0;
    bottom: 0;
}

/* Outside of the view edges */

/* top edge */
#box5, #box5-hint {
    left: 50%;
    transform: translateX(-50%);
    top: 0;
}
#box5 { top: -100px; }

/* right edge */
#box6, #box6-hint {
    top: 50%;
    transform: translateY(-50%);
    right: 0px;
}
#box6 { right: -100px; }

/* bottom edge */
#box7, #box7-hint {
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
}
#box7 { bottom: -100px; }

/* left edge */
#box8, #box8-hint {
    top: 50%;
    transform: translateY(-50%);
    left: 0px;
}
#box8 { left: -100px; }

.title {
    font-size: 20px;
    position: absolute;
    text-align: center;
    width: 100px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);

}

</style>
<body>
    <div class="title">After</div>
    <!-- Corners: top left, top right, bottom right, bottom left -->
    <div id="box1" class="box">1</div>
    <div id="box2" class="box">2</div>
    <div id="box3" class="box">3</div>
    <div id="box4" class="box">4</div>

    <!-- Sides, outside of the view: middle top, middle right, middle bottom, middle left -->
    <div id="box5" class="box">5</div>
    <div id="box6" class="box">6</div>
    <div id="box7" class="box">7</div>
    <div id="box8" class="box">8</div>

    <!-- Hints indicating where the offscreen boxes are -->
    <div id="box5-hint" class="box hint">5</div>
    <div id="box6-hint" class="box hint">6</div>
    <div id="box7-hint" class="box hint">7</div>
    <div id="box8-hint" class="box hint">8</div>
</body>
</html>

Actions: View

Attachments on bug 128482: 340455 | 340457 | 340458 | 340460