Attachment 343235 Details for Bug 186887 – reproduction sample html page

reproduction sample html page

index.html (text/html), 2.90 KB, created by Dave on 2018-06-21 04:19:20 PDT

(hide)

Description:

Filename:

MIME Type:

Creator: Dave

Created: 2018-06-21 04:19:20 PDT

Size: 2.90 KB

patch

obsolete

><!doctype html>
><html lang=en-us>
>
><head>
>    <meta name=viewport content="width=device-width,initial-scale=1">
>    <style>
>        /* bug related */
>
>        .overlay {
>            z-index: 500;
>        }
>
>        .position-relative {
>            position: relative;
>        }
>
>        .height-auto {
>            height: auto !important;
>        }
>
>        .absolute-wrapper {
>            position: absolute;
>            width: 95%;
>        }
>
>        .overflow-hidden {
>            overflow: hidden;
>        }
>
>        .fixed-underlay {
>            top: 150px;
>            right: 20px;
>            width: 50px;
>            height: 50px;
>            position: fixed;
>        }
>
>        /* .fixed {
>            position: fixed;
>            right: 20px;
>            bottom: 20px;
>
>        } */
>
>
>  
>        /* pretty */
>
>        .overlay {
>            border: 2px inset rgb(58, 141, 235);
>        }
>
>        .fixed-underlay {
>            border: 1px solid red;
>            background-color: rgba(255, 0, 0, 0.4);
>        }
>
>        .absolute-wrapper {
>            border: 2px inset rgb(230, 68, 18);
>        }
>
>        #spacer {
>            background-color: rgba(255, 150, 0, 0.4);
>        }
>
>
>        .collapsed {
>            background: rgba(150, 150, 150, 1.0);
>        }
>
>              .buttons {
>            position: fixed;
>            bottom: 0px;
>            margin:1em;
>            left: 0px;
>        }
>
>    </style>
></head>
>
><body style="background-color: rgba(200,200,200,1.0);">
>
>
>
>    <div class="overlay position-relative">
>        <p>Overlay: Z-5. When the spacer covers the fixed red square, transitioning height to auto, doesn't render the contents.
>            When the spacer is small, the contents render.</p>
>        <div class="absolute-wrapper">
>
>            <div id="collapsed-div" class="collapsed overflow-hidden" style="height:0;">
>                <div class="position-relative">Relative Item</div>
>            </div>
>
>            <div id="spacer">Spacer Div</div>
>
>
>        </div>
>
>    </div>
>    <div class="fixed-underlay">Z-1</div>
>
>
>
>    <div class="buttons">
>        <button id="show-150" type="button" onclick="sizeSpacer(30)" class="fixed-button">Small Spacer</button>
>        <button id="show-200" type="button" onclick="sizeSpacer(200)" class="fixed-button">Large Spacer</button>
>        <button id="show-200" type="button" onclick="showHide()" class="fixed-button">Show/Hide</button>
>    </div>
>  
>
>
>
></body>
>
>
><script>
>
>    function sizeSpacer(size) {
>        var spacer = document.getElementById("spacer");
>        spacer.style.height = size + "px";
>    }
>    function showHide() {
>
>
>
>        var collapsedDiv = document.getElementById("collapsed-div");
>
>
>        if (collapsedDiv.classList.contains("height-auto")) {
>            collapsedDiv.classList.remove("height-auto");
>        }
>        else {
>            collapsedDiv.classList.add("height-auto");
>        }
>
>    }
>
>
></script>
>
></html>

<!doctype html>
<html lang=en-us>

<head>
    <meta name=viewport content="width=device-width,initial-scale=1">
    <style>
        /* bug related */

        .overlay {
            z-index: 500;
        }

        .position-relative {
            position: relative;
        }

        .height-auto {
            height: auto !important;
        }

        .absolute-wrapper {
            position: absolute;
            width: 95%;
        }

        .overflow-hidden {
            overflow: hidden;
        }

        .fixed-underlay {
            top: 150px;
            right: 20px;
            width: 50px;
            height: 50px;
            position: fixed;
        }

        /* .fixed {
            position: fixed;
            right: 20px;
            bottom: 20px;

        } */


  
        /* pretty */

        .overlay {
            border: 2px inset rgb(58, 141, 235);
        }

        .fixed-underlay {
            border: 1px solid red;
            background-color: rgba(255, 0, 0, 0.4);
        }

        .absolute-wrapper {
            border: 2px inset rgb(230, 68, 18);
        }

        #spacer {
            background-color: rgba(255, 150, 0, 0.4);
        }


        .collapsed {
            background: rgba(150, 150, 150, 1.0);
        }

              .buttons {
            position: fixed;
            bottom: 0px;
            margin:1em;
            left: 0px;
        }

    </style>
</head>

<body style="background-color: rgba(200,200,200,1.0);">

<!-- Bug Html -->

    <div class="overlay position-relative">
        <p>Overlay: Z-5. When the spacer covers the fixed red square, transitioning height to auto, doesn't render the contents.
            When the spacer is small, the contents render.</p>
        <div class="absolute-wrapper">

            <div id="collapsed-div" class="collapsed overflow-hidden" style="height:0;">
                <div class="position-relative">Relative Item</div>
            </div>

            <div id="spacer">Spacer Div</div>


        </div>

    </div>
    <div class="fixed-underlay">Z-1</div>

<!-- Show Hide -->

    <div class="buttons">
        <button id="show-150" type="button" onclick="sizeSpacer(30)" class="fixed-button">Small Spacer</button>
        <button id="show-200" type="button" onclick="sizeSpacer(200)" class="fixed-button">Large Spacer</button>
        <button id="show-200" type="button" onclick="showHide()" class="fixed-button">Show/Hide</button>
    </div>
  



</body>


<script>

    function sizeSpacer(size) {
        var spacer = document.getElementById("spacer");
        spacer.style.height = size + "px";
    }
    function showHide() {



        var collapsedDiv = document.getElementById("collapsed-div");


        if (collapsedDiv.classList.contains("height-auto")) {
            collapsedDiv.classList.remove("height-auto");
        }
        else {
            collapsedDiv.classList.add("height-auto");
        }

    }


</script>

</html>

Actions: View

Attachments on bug 186887: 343235