Attachment 368941 Details for Bug 197562 – Another test case

Another test case

nested-absolute-in-relative-in-scroller.html (text/html), 1.16 KB, created by Simon Fraser (smfr) on 2019-05-03 09:57:12 PDT

(hide)

Description:

Filename:

MIME Type:

Creator: Simon Fraser (smfr)

Created: 2019-05-03 09:57:12 PDT

Size: 1.16 KB

patch

obsolete

><!DOCTYPE html>
><html>
><head>
><meta name="viewport" content="width=device-width, initial-scale=1">
><style>
>    .scrollcontent {
>        height: 500px;
>    }
>    .scroller {
>        margin: 20px;
>        overflow: scroll;
>        height: 300px;
>        width: 300px;
>        border: 2px solid black;
>    }
>    
>    .relative {
>        position: relative;
>        border: 3px solid orange;
>        margin: 10px;
>        height: 100px;
>        z-index: 0;
>    }
>
>    .absolute {
>        position:absolute;
>        left: 50px;
>        top: 50px;
>        width: 100px;
>        height: 100px;
>        background: gray;
>        border: 2px solid purple;
>    }
>    
>    .inner {
>        left:25px;
>        top:25px;
>        width: 200px;
>    }
>
>    .scrollcontent {
>        height: 500px;
>        background-image: repeating-linear-gradient(white, silver 200px);
>    }
>    
>/*FIXME: need compositing trigger.*/
>    
></style>
></head>
><body>
>
>    <div class="scroller">
>        <div class="relative">
>            <div class="absolute">abs
>                <div class="inner absolute">abs</div>
>            </div>
>        </div>
>        <div class="scrollcontent"></div>
>    </div>
>
></body>
></html>

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
    .scrollcontent {
        height: 500px;
    }
    .scroller {
        margin: 20px;
        overflow: scroll;
        height: 300px;
        width: 300px;
        border: 2px solid black;
    }
    
    .relative {
        position: relative;
        border: 3px solid orange;
        margin: 10px;
        height: 100px;
        z-index: 0;
    }

    .absolute {
        position:absolute;
        left: 50px;
        top: 50px;
        width: 100px;
        height: 100px;
        background: gray;
        border: 2px solid purple;
    }
    
    .inner {
        left:25px;
        top:25px;
        width: 200px;
    }

    .scrollcontent {
        height: 500px;
        background-image: repeating-linear-gradient(white, silver 200px);
    }
    
/*FIXME: need compositing trigger.*/
    
</style>
</head>
<body>

    <div class="scroller">
        <div class="relative">
            <div class="absolute">abs
                <div class="inner absolute">abs</div>
            </div>
        </div>
        <div class="scrollcontent"></div>
    </div>

</body>
</html>

Actions: View

Attachments on bug 197562: 368936 | 368941