Closed Bug 91060 Opened 23 years ago Closed 23 years ago

[ABSPOS]DOM-inserted absolutely positioned elements given wrong containing block

Categories

(Core :: Layout, defect, P2)

Product:
Core
Component:
Layout
Platform:
x86
Windows 2000
Type:
defect

Tracking

()

Status:
RESOLVED FIXED
Milestone:
mozilla0.9.7

People

(Reporter: kgrimaldi11585, Assigned: dbaron)

References

(
URL
)

Details

(Keywords: css2, testcase)

Attachments

(3 files)

testcase provided
774 bytes, text/html
Details
testcase showing bug with dynamic insertion of content
938 bytes, text/html
Details
variount of previous testcase showing we handle it correctly for static content
726 bytes, text/html
Details 
From Bugzilla Helper:
User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.0; en-US; rv:0.9.2) Gecko/20010628
BuildID:    20010628

If you have a dynamically created element placed inside an element whose
overflow property is set to auto, the dynamically created element will not render.

In the example URL, there SHOULD be a green box inside the yellow box. If you
change the overflow property of the yellow box to visible, you can see the green
box, or if you write the box into the HTML code instead of making it dynamically
it shows up.

Reproducible: Always
Steps to Reproduce:
1. Go to the example URL

Actual Results:  There is no green box!! It just disappeared...

Expected Results:  There should be a green box!!

The following is the code used in the example URL:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<style>
  #mainDiv {
    background-color: #FFFFCC; 
    position: absolute; 
    top: 150px; 
    left: 150px; 
    height: 200px;
    width: 200px; 
    overflow: auto;}

  #subDiv {
    background-color: #00FF00;
    position: absolute;
    top: 5px;
    left: 5px;
    width: 100px;
    margin: 0px;
    border: 0px;
    height: 100px;}
</style>
<script>
  <!--
  function bodyLoad()
  {
    subDivNode = document.createElement("div");
    subDivNode.setAttribute("id", "subDiv");
    document.getElementById("mainDiv").appendChild(subDivNode);
  };
  -->
</script>
<body onLoad="bodyLoad();">
  <div id='mainDiv'>
  </div>
</body>
</html>
What's happening here is that we're doing the frame construction incorrectly
when the content is added dynamically.  An absolutely positioned element should
be in the absolute-list of its containing block, as defined by section 10.1 of
CSS2.  In this case, the containing block of "subDiv" should be "mainDiv".  We
do that correctly when the content is there to begin with, but incorrectly when
it's inserted dynamically.

Giving this to waterson since he understands frame construction and I don't. :-)
Assignee: karnaze → waterson
Status: UNCONFIRMED → NEW
Ever confirmed: true
Keywords: css2
Summary: Absolutely position elements inside element with overflow property of auto do not show up → [ABSPOS]DOM-inserted absolutely positioned elements given wrong containing block
Oh yeah, and the parent div has to be 'overflow: auto', as the original bug said.
Keywords: testcase
I attached a fix to bug 111849.
Assignee: waterson → dbaron
Priority: -- → P2
Target Milestone: --- → mozilla0.9.7
Status: NEW → ASSIGNED
Fix checked in 2001-11-27 20:57 PDT.  See bug 111849.
Status: ASSIGNED → RESOLVED
Closed: 23 years ago
Resolution: --- → FIXED
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Creator:
Created:
Updated:
Size: