layers color styling misbehaving in scrolling window

RESOLVED INVALID

Status

()

Core
DOM: CSS Object Model
RESOLVED INVALID
16 years ago
16 years ago

People

(Reporter: John La, Assigned: jst)

Tracking

Trunk
x86
Windows 2000
Points:
---

Firefox Tracking Flags

(Not tracked)

Details

Attachments

(1 attachment)

(Reporter)

Description

16 years ago
From Bugzilla Helper:
User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.0; en-US; rv:1.0.0) Gecko/20020530
BuildID:    20020530

When a layer is created outside of the initial viewable area of the page and the
layer size is not explicitly set, color styling fails.  This is true whether or
not the scrollable area is bigger than the viewable area.
Everything is correct when the width and height of the layer is set.

Reproducible: Always
Steps to Reproduce:
1. Run the following HTML and Javascript code:
<html>
<head>
<title>
    Layer styling misbehaving in scrolling window
</title>
</head>
<body>

<form>
    <input type="button" onclick="makelayer(0);" value="Make a blue layer that
will NOT appear blue">
    <br>
    <input type="button" onclick="makelayer(1);" value="Make a green layer that
will appear green">
</form>

<script>

function makelayer(blSetsize){
    var mydiv = document.createElement('div');
    var left = (document.layers)? window.innerWidth:document.body.clientWidth;

    if(blSetsize){
        mydiv.style.width = '75px';
        mydiv.style.height = '20px';

        mydiv.innerHTML = 'green layer';
        mydiv.style.backgroundColor = 'green';
    } else {
        mydiv.innerHTML = 'blue layer';
        mydiv.style.backgroundColor = 'blue';
    }

    mydiv.style.position = 'absolute';
    if(document.all){
        mydiv.style.pixelLeft = left;
    } else {
        mydiv.style.left = left + 'px';
    }

    document.body.appendChild(mydiv);
}

</script>

</body>
</html>


Actual Results:  Running the code and clicking the buttons, the layer supposed
to be blue is not, the layer supposed to be green, is green.

Expected Results:  Browser should have displayed a blue layer and a green layer.

Everything is colored correctly when the width and height of the layers are
explicitly set.

Comment 1

16 years ago
Confirming with Build 2002061707, WinXP. When the blue layer is placed inside
the visible area (i.e. by setting style.left to 0) it is painted with the right
background color while it is painted with a white background with the code given
in the bug report.

When only part of the blue layer is created on screen (i.e. by subtracting 10
from the variable left in the given code) this part (10px in this case) has a
blue background while the part off screen has a white background.
Status: UNCONFIRMED → NEW
Ever confirmed: true

Comment 2

16 years ago
Created attachment 88263 [details]
testcase
The two "off-screen" divs are very narrow, since "right" basically defaults to
"do not go outside the containing block".  As a result, the text overflows the
divs (this is trivial to verify by setting overflow:hidden on them).

The actual divs are correctly colored blue.

Marking invalid, since behavior is correct.
Status: NEW → RESOLVED
Last Resolved: 16 years ago
Resolution: --- → INVALID
You need to log in before you can comment on or make changes to this bug.