Closed Bug 182814 Opened 22 years ago Closed 21 years ago

elements positioned off the screen have 0 width

Categories

(Core :: Layout: Positioned, defect, P3)

Product:
Core
Component:
Layout: Positioned
Platform:
x86
Linux
Type:
defect

Tracking

()

Status:
RESOLVED DUPLICATE of bug 201897

People

(Reporter: jefu, Unassigned)

Details

(Keywords: testcase)

Attachments

(2 files, 1 obsolete file)

Source from reporter's initial comment, as attachment
19.76 KB, text/html
Details
testcase
740 bytes, text/html
Details 
User-Agent:       Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.2b) Gecko/20021016
Build Identifier: Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.2b) Gecko/20021016

Load the following.  mouseover on the table elements on the page works as
expected - the width and background colors are not right.  Scroll right. 
Mouseover on rightmost table elements does not work.  The width is wrong and the
background color is not displayed as requested.  

<head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
<style type="text/css">
    td.hours { width : 100px ! important ; color : red ; font-size : 10pt } 
    span.chnum { font-size: 10pt ; } 
    span.chname { font-size: 10pt ; color : blue } 
    span.lst { font-size : x-small ; font-variant:small-caps ; overflow:scroll ;
height: 20pt ! important ; padding : 0px } 
    td.im  { color: pink ; background-color: pink ; } 
    span.lstch { color : green ; font-size : xx-small ; } 
    span.lstch { color : blue ; font-size : xx-small ; } 
    div.desc   { z-layer : 10 ; position : relative ; } 
  </style>
  <script language="javascript" type="text/javascript">
infonode = null ; 
infoelt  = null ; 
normal = "display:block ; max-width:200px ; outline: lightblue ; z-index : 100 ;
position:absolute ; background-color : #F0F0F0 ;  font-weight : bolder " ; 
function doInfo(elt, ev) 
{
   displayProgInfo(elt,ev) ; 
   return true ; 
} 

function displayProgInfo(elt, ev)
{
   if (infoelt != null) 
   {
      infoelt.removeChild(infonode) ; 
      infoelt = null ; 
   }
   infonode = document.createElement("div") ; 
   infonode.setAttribute("style", normal + "left: " + ev.x + "; top : " + ev.y +
";" ) ; 
   tnode = document.createElement("div") ; 
   tnode.setAttribute("style", "text-align:center ; font-weight: boldest ; color
: darkred") ; 
   tnode.appendChild(document.createTextNode(elt.getAttribute("title"))) ; 
   infonode.appendChild(tnode) ; 
   dnode = document.createElement("div") ; 
   dnode.appendChild(document.createTextNode(elt.getAttribute("desc"))) ; 
   infonode.appendChild(dnode) ; 
   chnode = document.createElement("div") ; 
   chnode.setAttribute("style", "font-size : x-small ; color : blue ;
text-align: center") ; 
   chnode . appendChild(document.createTextNode(elt.getAttribute("channel"))); 
   infonode.appendChild(chnode) ; 
   elt.appendChild(infonode) ; 
   infoelt = elt ; 
} 

  </script>
  <title>TV Listings for Saturday, 30 November</title>
</head>
<body>
<h1>TV Listings for Saturday, 30 November</h1>
<table border="1">
<tr>
<td>

<span class="chnum">105</span><br><span class="chname">USA</span>
</td>
<td colspan="60" bgcolor="yellow"></td>
<td colspan="60" onmouseover="return(doInfo(this,event)); " channel="105 USA"
title="Nash Bridges" desc="Hit men target a witness Nash and Joe are
transporting to trial.">
<span class="lst">Nash Bridges</span><br>
</td>
<td colspan="30" onmouseover="return(doInfo(this,event)); " channel="105 USA"
title="Paid Programming" desc="" class="im"></td>
<td colspan="30" onmouseover="return(doInfo(this,event)); " channel="105 USA"
title="Bloomberg Information Television" desc="">
<span class="lst">Bloomberg Information Television</span><br>
</td>
<td colspan="30" onmouseover="return(doInfo(this,event)); " channel="105 USA"
title="Bloomberg Small Business" desc="">
<span class="lst">Bloomberg Small Business</span><br>

</td>
<td colspan="30" onmouseover="return(doInfo(this,event)); " channel="105 USA"
title="Bloomberg Personal" desc="">
<span class="lst">Bloomberg Personal</span><br>
</td>
<td colspan="30" onmouseover="return(doInfo(this,event)); " channel="105 USA"
title="Paid Programming" desc="" class="im"></td>
<td colspan="30" onmouseover="return(doInfo(this,event)); " channel="105 USA"
title="Paid Programming" desc="" class="im"></td>
<td colspan="30" onmouseover="return(doInfo(this,event)); " channel="105 USA"
title="Paid Programming" desc="" class="im"></td>
<td colspan="30" onmouseover="return(doInfo(this,event)); " channel="105 USA"
title="Paid Programming" desc="" class="im"></td>
<td colspan="30" onmouseover="return(doInfo(this,event)); " channel="105 USA"
title="Paid Programming" desc="" class="im"></td>
<td colspan="30" onmouseover="return(doInfo(this,event)); " channel="105 USA"
title="Paid Programming" desc="" class="im"></td>
<td colspan="60" onmouseover="return(doInfo(this,event)); " channel="105 USA"
title="CF Hall of Fame: Echoes of Glory" desc="">
<span class="lst">CF Hall of Fame: Echoes of Glory</span><br>
</td>
<td colspan="120" onmouseover="return(doInfo(this,event)); " channel="105 USA"
title="Beethoven" desc="Children talk their father into letting them keep a St.
Bernard puppy, which grows to be a problem.">
<span class="lst">Beethoven</span><br>

</td>
<td colspan="120" onmouseover="return(doInfo(this,event)); " channel="105 USA"
title="Beethoven's 2nd" desc="A St. Bernard's evil owner tries to abduct her
litter from a family who saved them from death.">
<span class="lst">Beethoven's 2nd</span><br>
</td>
<td colspan="120" onmouseover="return(doInfo(this,event)); " channel="105 USA"
title="Beethoven's 3rd" desc="While traveling with their St. Bernard, the
Newtons accidentally become involved with DVD thieves.">
<span class="lst">Beethoven's 3rd</span><br>
</td>
<td colspan="120" onmouseover="return(doInfo(this,event)); " channel="105 USA"
title="Beethoven's 4th" desc="An obedience school mixes up the Newton's Saint
Bernard with a well-mannered one.">
<span class="lst">Beethoven's 4th</span><br>
</td>
<td colspan="120" onmouseover="return(doInfo(this,event)); " channel="105 USA"
title="The President's Man" desc="A classified agent trains a replacement.">
<span class="lst">The President's Man</span><br>
</td>

<td colspan="120" onmouseover="return(doInfo(this,event)); " channel="105 USA"
title="The President's Man: A Line in the Sand" desc="An agent tries to locate a
nuclear bomb before detonation.">
<span class="lst">The President's Man: A Line in the Sand</span><br>
</td>
<td colspan="60" onmouseover="return(doInfo(this,event)); " channel="105 USA"
title="JAG" desc="Harm and Mac investigate a Marine officer's wife, who is
suspected of smuggling drugs into the U.S.">
<span class="lst">JAG</span><br>
</td>
<td colspan="30" onmouseover="return(doInfo(this,event)); " channel="105 USA"
title="Inside Taken: Behind the Scenes Special" desc="The making of Steven
Spielberg's SCI FI miniseries ``Taken.''">
<span class="lst">Inside Taken: Behind the Scenes Special</span><br>
</td>
<td colspan="150" onmouseover="return(doInfo(this,event)); " channel="105 USA"
title="The Thin Red Line" desc="The men of Charlie Company try to take
Guadalcanal Island from the Japanese in World War II.">
<span class="lst">The Thin Red Line</span><br>
</td>
</tr>

<tr>
<td>
<span class="chnum">106</span><br><span class="chname">TVLAND</span>
</td>
<td colspan="30" onmouseover="return(doInfo(this,event)); " channel="106 TVLAND"
title="The Bob Newhart Show" desc="Jerry decides to follow his love to Hawaii.">
<span class="lst">The Bob Newhart Show</span><br>
</td>
<td colspan="30" onmouseover="return(doInfo(this,event)); " channel="106 TVLAND"
title="Superman" desc="A boy must retrieve a cash-stuffed coat.">
<span class="lst">Superman</span><br>
</td>
<td colspan="30" onmouseover="return(doInfo(this,event)); " channel="106 TVLAND"
title="Batman" desc="Mr. Freeze plots to discredit Batman and Robin.">
<span class="lst">Batman</span><br>

</td>
<td colspan="30" onmouseover="return(doInfo(this,event)); " channel="106 TVLAND"
title="Batman" desc="Fooled by Mr. Freeze, reporters vilify the duo.">
<span class="lst">Batman</span><br>
</td>
<td colspan="30" onmouseover="return(doInfo(this,event)); " channel="106 TVLAND"
title="The Beverly Hillbillies" desc="Granny thinks Jethro will wed Hathaway.">
<span class="lst">The Beverly Hillbillies</span><br>
</td>
<td colspan="30" onmouseover="return(doInfo(this,event)); " channel="106 TVLAND"
title="The Jeffersons" desc="A dream causes George to reconsider his life.">
<span class="lst">The Jeffersons</span><br>
</td>
<td colspan="60" onmouseover="return(doInfo(this,event)); " channel="106 TVLAND"
title="Gunsmoke" desc="Criminal and marshal's identities are confused.">
<span class="lst">Gunsmoke</span><br>
</td>

<td colspan="30" onmouseover="return(doInfo(this,event)); " channel="106 TVLAND"
title="Get Smart" desc="CONTROL wants to find an old bank robber's hidden loot.">
<span class="lst">Get Smart</span><br>
</td>
<td colspan="30" onmouseover="return(doInfo(this,event)); " channel="106 TVLAND"
title="The Brady Bunch" desc="Mike mistakenly thinks Greg wants to be an
architect.">
<span class="lst">The Brady Bunch</span><br>
</td>
<td colspan="30" onmouseover="return(doInfo(this,event)); " channel="106 TVLAND"
title="The Jeffersons" desc="A dream causes George to reconsider his life.">
<span class="lst">The Jeffersons</span><br>
</td>
<td colspan="30" onmouseover="return(doInfo(this,event)); " channel="106 TVLAND"
title="The Bob Newhart Show" desc="Bob learns his tennis-tournament partner is
Emily.">
<span class="lst">The Bob Newhart Show</span><br>
</td>
<td colspan="30" onmouseover="return(doInfo(this,event)); " channel="106 TVLAND"
title="The Mary Tyler Moore Show" desc="Mary finds damaging news on a politician
friend.">

<span class="lst">The Mary Tyler Moore Show</span><br>
</td>
<td colspan="30" onmouseover="return(doInfo(this,event)); " channel="106 TVLAND"
title="The Dick Van Dyke Show" desc="Rob invites 44 PTA members to see the show.">
<span class="lst">The Dick Van Dyke Show</span><br>
</td>
<td colspan="30" onmouseover="return(doInfo(this,event)); " channel="106 TVLAND"
title="I Love Lucy" desc="Lucy is suspected of being a mysterious burglar.">
<span class="lst">I Love Lucy</span><br>
</td>
<td colspan="30" onmouseover="return(doInfo(this,event)); " channel="106 TVLAND"
title="Gomer Pyle, U.S.M.C." desc="Gomer loses the colonel's daughter at a go-go
club.">
<span class="lst">Gomer Pyle, U.S.M.C.</span><br>
</td>
<td colspan="30" onmouseover="return(doInfo(this,event)); " channel="106 TVLAND"
title="Hazel" desc="Hazel publicizes a need for a neighborhood playground.">
<span class="lst">Hazel</span><br>

</td>
<td colspan="30" onmouseover="return(doInfo(this,event)); " channel="106 TVLAND"
title="Leave It to Beaver" desc="Beaver brings home a lost Chihuahua.">
<span class="lst">Leave It to Beaver</span><br>
</td>
<td colspan="60" onmouseover="return(doInfo(this,event)); " channel="106 TVLAND"
title="Gunsmoke" desc="Criminal and marshal's identities are confused.">
<span class="lst">Gunsmoke</span><br>
</td>
<td colspan="60" onmouseover="return(doInfo(this,event)); " channel="106 TVLAND"
title="Maverick" desc="Maverick and Bart try to sell worthless land.">
<span class="lst">Maverick</span><br>
</td>
<td colspan="30" onmouseover="return(doInfo(this,event)); " channel="106 TVLAND"
title="The Brady Bunch" desc="Alice leaves when the children don't trust her.">
<span class="lst">The Brady Bunch</span><br>
</td>

<td colspan="30" onmouseover="return(doInfo(this,event)); " channel="106 TVLAND"
title="The Brady Bunch" desc="Greg must judge Marcia in a cheerleading contest.">
<span class="lst">The Brady Bunch</span><br>
</td>
<td colspan="30" onmouseover="return(doInfo(this,event)); " channel="106 TVLAND"
title="Happy Days" desc="Richie befriends a free-spirited girl.">
<span class="lst">Happy Days</span><br>
</td>
<td colspan="30" onmouseover="return(doInfo(this,event)); " channel="106 TVLAND"
title="Happy Days" desc="An Army buddy asks Howard to be his best man.">
<span class="lst">Happy Days</span><br>
</td>
<td colspan="30" onmouseover="return(doInfo(this,event)); " channel="106 TVLAND"
title="Gilligan's Island" desc="Gilligan unearths a possible treasure chest.">
<span class="lst">Gilligan's Island</span><br>
</td>
<td colspan="30" onmouseover="return(doInfo(this,event)); " channel="106 TVLAND"
title="Gilligan's Island" desc="A mobster lands and pretends to be a missionary.">

<span class="lst">Gilligan's Island</span><br>
</td>
<td colspan="30" onmouseover="return(doInfo(this,event)); " channel="106 TVLAND"
title="The Beverly Hillbillies" desc="Jethro hires a gorgeous cook who speaks no
English.">
<span class="lst">The Beverly Hillbillies</span><br>
</td>
<td colspan="30" onmouseover="return(doInfo(this,event)); " channel="106 TVLAND"
title="The Beverly Hillbillies" desc="Jethro acts like a Roman emperor to
impress Maria.">
<span class="lst">The Beverly Hillbillies</span><br>
</td>
<td colspan="30" onmouseover="return(doInfo(this,event)); " channel="106 TVLAND"
title="Leave It to Beaver" desc="Beaver takes his soapbox racer into the street.">
<span class="lst">Leave It to Beaver</span><br>
</td>
<td colspan="30" onmouseover="return(doInfo(this,event)); " channel="106 TVLAND"
title="Leave It to Beaver" desc="The boys accidentally break the car window.">
<span class="lst">Leave It to Beaver</span><br>

</td>
<td colspan="30" onmouseover="return(doInfo(this,event)); " channel="106 TVLAND"
title="The Beverly Hillbillies" desc="The hillbillies play gangsters in a
commercial.">
<span class="lst">The Beverly Hillbillies</span><br>
</td>
<td colspan="30" onmouseover="return(doInfo(this,event)); " channel="106 TVLAND"
title="The Andy Griffith Show" desc="Howard quits his job to become a beachcomber.">
<span class="lst">The Andy Griffith Show</span><br>
</td>
<td colspan="30" onmouseover="return(doInfo(this,event)); " channel="106 TVLAND"
title="The Brady Bunch" desc="Peter is offered the role of Benedict Arnold.">
<span class="lst">The Brady Bunch</span><br>
</td>
<td colspan="30" onmouseover="return(doInfo(this,event)); " channel="106 TVLAND"
title="Happy Days" desc="Richie tries to negotiate with a gang leader.">
<span class="lst">Happy Days</span><br>
</td>

<td colspan="30" onmouseover="return(doInfo(this,event)); " channel="106 TVLAND"
title="Gilligan's Island" desc="The island is to be a missile-test site.">
<span class="lst">Gilligan's Island</span><br>
</td>
<td colspan="30" onmouseover="return(doInfo(this,event)); " channel="106 TVLAND"
title="The Munsters" desc="Treating her insomnia, Grandpa puts Marilyn in a coma.">
<span class="lst">The Munsters</span><br>
</td>
<td colspan="30" onmouseover="return(doInfo(this,event)); " channel="106 TVLAND"
title="The Andy Griffith Show" desc="Andy and Emmett help Goober buy the gas
station.">
<span class="lst">The Andy Griffith Show</span><br>
</td>
<td colspan="30" onmouseover="return(doInfo(this,event)); " channel="106 TVLAND"
title="Leave It to Beaver" desc="The boys spend their train-ticket money.">
<span class="lst">Leave It to Beaver</span><br>
</td>
<td colspan="30" onmouseover="return(doInfo(this,event)); " channel="106 TVLAND"
title="The Beverly Hillbillies" desc="The clan spends Thanksgiving in Hooterville.">

<span class="lst">The Beverly Hillbillies</span><br>
</td>
<td colspan="30" onmouseover="return(doInfo(this,event)); " channel="106 TVLAND"
title="I Love Lucy" desc="Lucy and Ethel try to improve the men's wardrobes.">
<span class="lst">I Love Lucy</span><br>
</td>
<td colspan="30" onmouseover="return(doInfo(this,event)); " channel="106 TVLAND"
title="My Favorite Martian" desc="Martin borrows a jewel thief's fingerprints.">
<span class="lst">My Favorite Martian</span><br>
</td>
<td colspan="30" onmouseover="return(doInfo(this,event)); " channel="106 TVLAND"
title="Fernwood 2Night" desc="Tom Waits; W.D. ``Bud'' Prize on encouraging
tourism over CB radio.">
<span class="lst">Fernwood 2Night</span><br>
</td>
<td colspan="30" onmouseover="return(doInfo(this,event)); " channel="106 TVLAND"
title="The Flying Nun" desc="Sister Bertrille is becalmed on an island with
castaways Carlos and April.">
<span class="lst">The Flying Nun</span><br>

</td>
<td colspan="30" onmouseover="return(doInfo(this,event)); " channel="106 TVLAND"
title="Tabitha" desc="An unpleasant woman takes over in Paul's absence.">
<span class="lst">Tabitha</span><br>
</td>
<td colspan="30" onmouseover="return(doInfo(this,event)); " channel="106 TVLAND"
title="The Dick Van Dyke Show" desc="Rob invites 44 PTA members to see the show.">
<span class="lst">The Dick Van Dyke Show</span><br>
</td>
<td colspan="30" onmouseover="return(doInfo(this,event)); " channel="106 TVLAND"
title="Barney Miller" desc="Police mistake Harris for a burglar and open fire.">
<span class="lst">Barney Miller</span><br>
</td>
</tr>
</table>
</body>

Reproducible: Always

Steps to Reproduce:
1. load page
2.  mouse around
3. scroll
4. mouse around 
Actual Results:  
Righthand table elements not displayed correctly. 

Expected Results:  
 


Additional note.  I dont know if this is a bug, but when the background-color
for the new element is set to #FFFFFF, it is transparent.  I'd have thunk that 
"background-color : transparent " would do that and that specifiying a
background-color should result in opaqueness.  But the standard is not entirely
clear.
Summary: elements created past window right side not displayed correctly → elements created past window right side not displayed correctly
in the future, you can just create an attachment...

this doesn't work, as described by jeff.  linux trunk build 20021129
> this doesn't work, as described by jeff.

actually, the widths of the cells on the right side is ok (AFAICT), and their
background color is not specified.  Mouseover sort of works for elements on the
right side, but the resulting popups have a transparent background.

I get the same behavior with 1.2b and 20021129.

Jeff: could you be more specific on what you're expecting to see here?
Its the popups that seem wrong to me.  I don't seem to have made that clear in
the bug report - being so focussed on the popup size I didn't even think of the
ambiguity.   For popups further right than the original window border the width
is wrong and the background is ignored.

But, I've just discovered with further playing around that if instead of
"max-width" in the popup style, I use "width" things work as expected - that is,
the popuups have the requested background and the requested size.

So now it may be a question of what css requires max-width to do.  But the
current behavior is at least counter-intuitive.
Attached file testcase (obsolete) — 
I think you hit the nail on the head (max-width vs. width).
Make the browser <500 px wide and then scroll over to the right.  The first div
has 0 width.  The second has the proper width.

this bug seems INVALID to me (Mozilla's rendering seems correct).  If you
disagree, then it's a problem with layout.
I still think its a problem and, if I read the CSS standard correctly, a bug,
but I'll also admit that its not something that will be a problem for most
people.  I'm going to try (at least) to reassign it to "layout" and set the
priority to  
"minor".
Component: DOM Views and Formatting → Layout
reassign (you can select the "reassign bug to owner and QA..." to do this)
resummarizing
Assignee: jst → other
URL: enclosed
Keywords: testcase
QA Contact: stummala → ian
Summary: elements created past window right side not displayed correctly → elements positioned off the screen have 0 width
We need a small (<1kb) testcase for this. I imagine the bug is to do with
absolute positioning taking the remaining space in the containing block into
account when shrink wrapping, but I'm not sure that's wrong per se.
Assignee: other → position
Component: Layout → Layout: R & A Pos
Keywords: testcase
> We need a small (<1kb) testcase for this.

this bug has a 427 byte testcase... attachment 107846 [details]
Keywords: testcase
Comment on attachment 107846 [details]
testcase

Sorry, my Mozilla crashed shortly after I wrote that comment, so I never got to
add what I was going to say, which is:

BTW, the attached patch is not a minimised version of the first attachment. It
seems to be for some other bug.
Attachment #107846 - Attachment is obsolete: true
Attachment #107831 - Attachment description: reporter's testcase → Source from reporter's initial comment, as attachment
> BTW, the attached patch is not a minimised version of the first attachment. It
> seems to be for some other bug.

the original page creates a div via DHTML that is off the screen and the
background appears to be transparent and there is only one word per line.  The
reason for both is that the div has 0 width.

the testcase has a div that is off the screen and has 0 width.

the difference is...?
?

Are we both talking about the same attachment 107846 [details] ? There's no positioning in
that file as far as I can see. I think you probably attached the wrong file.
Attached file testcase — 
a real testcase that is appropriate for this bug and won't morph into the
testcase for bug 182856 without asking my permission!
Ah indeed that's a good testcase. :-)

So my comment 7 is correct. Should shrink wrapping of absolutely positioned
content take into account remaining space in its containing block?
Definitely not.  If it does it's much harder to optimize animation of
left/top/right/bottom.
Then this is a valid bug -- duplicate?
confirming bug based on above comments
Priority: -- → P3
actually confirming
Status: UNCONFIRMED → NEW
Ever confirmed: true
Priority: P3 → --
Priority: -- → P3
Whiteboard: DUPEME
Duping to a much clearer (but later) bug which doesn't have so much
back-and-forth about determining whether it's really a bug.

*** This bug has been marked as a duplicate of 201897 ***
Status: NEW → RESOLVED
Closed: 21 years ago
Resolution: --- → DUPLICATE
Whiteboard: DUPEME
You need to log in before you can comment on or make changes to this bug.

Attachment

General

Creator:
Created:
Updated:
Size: