What does visibility: collapse really mean (and do)?

[Jukka K. Korpela]

I have noticed that the meaning of visibility: collapse has been discussed
on different forums, but with no consensus on what it really means.
Besides, implementations differ.

The specification says:
"The 'visibility' property takes the value 'collapse' for row, row group,
column, and column group elements. This value causes the entire row or
column to be removed from the display, and the space normally taken up by
the row or column to be made available for other content. The suppression
of the row or column, however, does not otherwise affect the layout of the
table. This allows dynamic effects to remove table rows or columns without
forcing a re-layout of the table in order to account for the potential
change in column constraints."
http://www.w3.org/TR/CSS2/tables.html#dynamic-effects

I've composed a trivial test page at
http://www.cs.tut.fi/~jkorpela/test/collapse.html
where the second row has visibility: collapse.

Does removing a row entirely from the display etc. mean that the display
is as if the row were not there? If yes, does it differ from display: none
in any other way than by being overridable in inner elements? If not, what
_does_ it mean? Specifically, how would it differ from visibility: hidden?

Does the obscure formulation "for the potential change in column
constraints" mean that visibility: collapse should behave the same way as
display: none but the allocation of widths and heights should take place
as if the element were present? This would make some sense in some weird
way. For example, if a table occupies the full width of the canvas (either
because it simply requires that much or has width: 100% set) and I
dynamically (i.e., via client-side scripting) set the visibility of a
column to collapse, then that column would be removed and all the columns
on the right of it shiften to the left accordingly, without changing thei
widths. This might make some practical sense, maybe.

Assuming this is the intended interpretation, does any browser support it?
IE 6 does not support visibility: collapse at all, which normally means
that the initial value visibility: visible is used. Opera 7 is said not to
support it, but it seems that it actually treats it as visibility: hidden.
The same applies to Mozilla 1.3, which has been said to support the
visibility: collapse. So I'm confused.

--
Yucca, http://www.cs.tut.fi/~jkorpela/

[Stan Brown]

In article <Xn*****************************@193.229.0.31> in
comp.infosystems.www.authoring.stylesheets, Jukka K. Korpela
<jk******@cs.tut.fi> wrote:

I've composed a trivial test page at
http://www.cs.tut.fi/~jkorpela/test/collapse.html
where the second row has visibility: collapse.

Neither button seems to have any effect at all. (Win 98 original,
Mozilla 1.4)

--
Stan Brown, Oak Road Systems, Cortland County, New York, USA
http://OakRoadSystems.com/
HTML 4.01 spec: http://www.w3.org/TR/html401/
validator: http://validator.w3.org/
CSS 2 spec: http://www.w3.org/TR/REC-CSS2/
validator: http://jigsaw.w3.org/css-validator/

[Ben M]

> I have noticed that the meaning of visibility: collapse has been

discussed on different forums, but with no consensus on what it
really means. Besides, implementations differ.

The specification says:
"The 'visibility' property takes the value 'collapse' for row, row
group, column, and column group elements. This value causes the
entire row or column to be removed from the display, and the space
normally taken up by the row or column to be made available for other
content. The suppression of the row or column, however, does not
otherwise affect the layout of the table. This allows dynamic effects
to remove table rows or columns without forcing a re-layout of the
table in order to account for the potential change in column
constraints." http://www.w3.org/TR/CSS2/tables.html#dynamic-effects

I've composed a trivial test page at
http://www.cs.tut.fi/~jkorpela/test/collapse.html
where the second row has visibility: collapse.
Having read the specification and tried the test page you set up I do not
believe that any browser properly renders the collapse property.

Both Opera 7 and Mozilla Firebird 0.6 render the page as though the
visibility had been switched to none rather than collapse. Another test page
confirmed that the actual effect was identical in both browsers.

I created another testpage to investigate further, the only difference is
that the text in the second column of the second row is a little longer.

from this test page it can be seen that merely making the row invisible
preserves the width of the second column, when the row that causes the
column to be that width is not visible.
http://www.benmeadowcroft.com/me/arc.../collapse.html

The second testpage mrely confirms that with the display set to none to
width of the second column is not preserved.
http://www.benmeadowcroft.com/me/arc...splaynone.html
Does removing a row entirely from the display etc. mean that the
display is as if the row were not there? If yes, does it differ from
display: none in any other way than by being overridable in inner
elements? If not, what _does_ it mean? Specifically, how would it
differ from visibility: hidden?
What I believe should happen, and what none of the user agents tested
actually does, is resizing of the table, but not a reflowing of the widths
or heights of table cells. i believe this is the intention of this property.
The specification states that "This value causes the entire row or column to
be removed from the display, and the space normally taken up by the row or
column to be made available for other content." If the table itself does not
change in size at all then where is the available space for other content?

I have "doctored" a couple of screen shots that illustrate what I think
should happen.

shows the table with a visibility set to visible
http://www.benmeadowcroft.com/me/arc.../collapse1.gif

shows the table with a visibility set to collapse
http://www.benmeadowcroft.com/me/arc.../collapse2.gif

The second screenshot shows how I believe the table should be reformatted.
The width of the second column is preserved, unlike when the display is set
to none. The difference between setting the visibility to collapse and the
visibility to hidden is that when an entire row (or column) is collapsed its
"box" is removed from the display, however it still has an effect on other
cells in the table.
Does the obscure formulation "for the potential change in column
constraints" mean that visibility: collapse should behave the same
way as display: none but the allocation of widths and heights should
take place as if the element were present? This would make some sense
in some weird way. For example, if a table occupies the full width of
the canvas (either because it simply requires that much or has width:
100% set) and I dynamically (i.e., via client-side scripting) set the
visibility of a column to collapse, then that column would be removed
and all the columns on the right of it shiften to the left
accordingly, without changing thei widths. This might make some
practical sense, maybe.
I think my doctored images make some sense in their application. Unlike
simply removing the row using display:none and causing a recalculation of
the table cell widths and heights etc a fairly simple mechanism (from some
points of view) is provided to remove rows and columns from the display,
without affecting the rest of the table.

I actually think there are some potential uses in the display of data. I
have a background in finance so I have made extensive use of pivot tables
and can quickly grasp the potential utility of quickly showing and hiding
and sub totals and grand totals etc. By retaining the widths and heights of
the columns and rows it is much easier to "keep your place on the screen" as
it were, if the table columns changed widths every time you hid a row
keeping track of where you are in the table could become increasingly
problematic.
Assuming this is the intended interpretation, does any browser
support it? IE 6 does not support visibility: collapse at all, which
normally means that the initial value visibility: visible is used.
Opera 7 is said not to support it, but it seems that it actually
treats it as visibility: hidden. The same applies to Mozilla 1.3,
which has been said to support the visibility: collapse. So I'm
confused.

I do not know of any browser that supports it.

I hope I have made clear my understanding of the matter, I think it could be
quite useful where it to be implemented. I feel like a bug report for
mozilla coming on!

--
BenM
http://www.benmeadowcroft.com/

[Ben M]

> I hope I have made clear my understanding of the matter, I think it

could be quite useful where it to be implemented. I feel like a bug
report for mozilla coming on!

Just looked in bugzilla and found this bug
http://bugzilla.mozilla.org/show_bug.cgi?id=77019

from the comments
"Oh Noooooo, we had the collapse code working in the tree for years and it
was
simply optimized away. Hmm may be optimized is not the correct word for it."

I guess someone didn't understand what "refactoring" is supposed to mean and
screwed up!
The bug is still marked as NEW so I'll pop in a vote for it.
--
BenM
http://www.benmeadowcroft.com/