84245 - Reload and window resizing produce odd effects with <text> in <html:div> in <box style="overflow: hidden;" orient="vertical"> in a XUL document

Status: NEW

(Core :: XUL, defect)

Description

[Roger D]

NOTE: I'm not sure if this is a Layout component bug or an XP Toolkit/Widgets
component bug.
------
From Bugzilla Helper:
User-Agent: Mozilla/5.0 (Windows; U; WinNT4.0; en-US; rv:0.9+) Gecko/20010605
BuildID:    Build ID: 2001060504

In the above page, the collumns are initially displayed with unequal width when
(re)loaded into certain window sizes, and only become equal when you start to
resize the page.

Reproducible: Always
Steps to Reproduce:
1. Load the following XUL file (also available for download at the URL above):

<?xml version="1.0" encoding="US-ASCII"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<?xml-stylesheet href="http://jazz.mcom.com/users/rogerd/publish/test.css"
type="text/css"?>

<window id="main"
 align="center"
 valign="middle" 
 xmlns:html="http://www.w3.org/TR/REC-html40" 
 xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" >
    <box class="trans" flex="1" equalsize="always" >
      <box class="timecanvas" flex="1" orient="vertical" >
        <spring flex="120" />
        <box class="event" id="firstone" flex="60" min-height="0px" height="0px"
min-width="0px" width="0px" >
          <window class="trans" flex="1" min-height="0px" height="0px"
min-width="0px" width="0px" orient="vertical" >
            <html:div>
              <text value="Meeting with a Very Long Name" />                 
            </html:div>
          </window>
        </box>
        <spring flex="480" />
      </box>
      <box class="timecanvas" flex="1" />
    </box>
</window>

2. Rezive the window to about 200 pixels wide, then click Reload:
collumn sizes are unequal, despite the equalsize="always" attribute on the
outermost <box>.

3. Resize the window by a few pixels: the columns click to being equal widths.

4. Repeat 2 and 3 to your heart's content.


Actual Results:  Columns are initially displayed as unuequal widths: first
collumn is always either the full width of the text or half the width of the
text. Immediatly on starting to resize, the collumns move to being equal widths
with the text clipped to the available space, producing a jarring visual jump.


Expected Results:  Columns should always be of equal widths, with text clipped
to display only inside the window.

Putting other things inside the <html:div> causes a bunch of other odd effects,
but this is the only one I have found so far that is clearly a bug.

It would be nice to have some simple way to do what I'm trying to do with the
<window><html:div> tags: make a box be sized without reference to the size of
its contents, and then display only those parts of the contents that will fit in
the available space. Possibly some way of doing this exists, but if so I havn't
found it yet after several days of pouring over the online XUL reference on
mozilla.org and experimenting. If anyone knows an easy way, please e-mail me a
description at [e-mail]

Comment 1

[John Morrison]

Placing a <window> inside another <window> is not allowed. (So, invalid, as 
in not a bug). 

I'm not entirely clear from the rest of your example what you need to do, 
although, (1) you could ask your question in the newsgroup 
netscape.public.mozilla.xpfe, and (2) you could look into the use of 
max-width and overflow styles. But, in typical mode, XUL is designed to 
flex to accomodate the size of its contained elements.

Comment 2

[Roger D]

True, my use of <window> was illegal, and what I was looking for was
style="overflow: hidden;" on box. However, the same bug happens if you replace
the invalid <window> with a valid
<box style="overflow: hidden; " orient="vertical" > thus:

?xml version="1.0" encoding="US-ASCII"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<?xml-stylesheet href="http://jazz.mcom.com/users/rogerd/publish/resizebug.css"
type="text/css"?>

<window id="main"
 align="center"
 valign="middle" 
 xmlns:html="http://www.w3.org/TR/REC-html40" 
 xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" >
    <box class="trans" flex="1" equalsize="always" >
      <box class="timecanvas" flex="1" orient="vertical" >
        <spring flex="120" />
        <box class="event" id="firstone" style="overflow: hidden;" flex="60"
min-height="0px" height="0px" min-width="0px" width="0px" orient="vertical" >
          <html:div>
            <text value="Meeting with a Very Long Name" />                 
          </html:div>
        </box>
        <spring flex="480" />
      </box>
      <box class="timecanvas" flex="1" />
    </box>
</window>

I have updated the contents of the sample URL
http://jazz.mcom.com/users/rogerd/publish/resizebug.xul
to contain the above and am reopening the bug.

As for what I'm doing, I'm trying to use XUL to lay out a calendar view so that
the boxes representing events in the calendar are NOT sized according to the
size of their contents (which I want to be mostly HTML interspersed with <text
value="..."> text, so I can insert the text from RDF using a XUL template), but
are sized strictly depending upon their duration, and display just as much of
their content as there is space for (with the full contnet being displayed via a
tto-tip or pop-up-like mechanism).

However, I do seem to be able to get this to work as long as use only native XUL
elements in the content of the event and avoid all use of <html:...> tags, so I
have downgraded this to severity: minor. 

Comment 3

[John Morrison]

Yes, I do see that. And I see that you've noted the crux of the problem. 
This is a somewhat wrong thing to do (but should work). 

   <html:div>
      <text value="Meeting with a Very Long Name" />                 
    </html:div>

You set up a HTML layout element (actually should just say <html> not 
<html:div>, although they are functionally equivalent). And then you follow
it up by specifying a XUL element. So, layout begin as box layout, then 
switches to block layout, and then reenters box layout again [but you never 
needed or used the block layout].

You're better off just to say: 

  <html>Meeting with a Very Long Name</html>

if you want it to wrap, or just say:

  <text value="Meeting with a Very Long Name" />
 
if you want a single line of text that doesn't wrap.

You should avoid using <html:...> elements when possible, and the only 
typical reason that you need to use it is when you want wrapping text.

Comment 4

[Peter Trudelle]

->evaughan, future, assuming jrgm's suggested workaround is okay.

Comment 5

[Roger D]

Attachment: XUL file for test case

Comment 6

[Roger D]

Attachment: CSS file for test case

Comment 7

[John Morrison]

May God have mercy on us all. The 212 bug spam-o-rama is Now!

Comment 8

[Thomas]

The quoted URl is not available anymore and the XUL example give me an empty page...

Comment 9

[BugBot [:suhaib / :marco/ :calixte]]

The bug assignee is inactive on Bugzilla, so the assignee is being reset.