54644 - -moz-float-edge sucks, should be taken out and shot

Status: RESOLVED INVALID

(Core :: Layout, defect, P3)

Description

[Hixie (not reading bugmail)]

The CSS extension -moz-float-edge cannot be said to be buggy, since there is no
documentation (that I can find) telling us what it is supposed to do.

However, it is not a good solution to the problem it was trying to solve.

THE ORIGINAL PROBLEM:

The markup:

   <float> float </float>
   <block>
    <item> list item </item>
    <item> list item </item>
    <item> a much longer list item that must wrap </item>
    <item> final list item </item>  
   </block>


The wanted result:

   +-----------+ - - - - - - - - +
   | float     | 1. list item   
   |           | 2. list item    |
   +-----------+ 3. a much longer    
   |    list item that must wrap |
     4. final list item
   + - - - - - - - - - - - - - - +


The per-spec result:

   +-----------+ - - - - - - - - +
   | 1loat     | list item   
   | 2.        | list item       |
   +-3.--------+ a much longer    
   |    list item that must wrap |
     4. final list item
   + - - - - - - - - - - - - - - +


Our current result:

   +-----------+ - - - - - - - - +
   | float     | 1. list item   
   |           | 2. list item    |
   +-----------+ 3. a much longer    
                    list item that 
   |                must wrap    |
     4. final list item
   + - - - - - - - - - - - - - - +

Analagous situations exist for the right hand side.


AN ADDITIONAL PROBLEM THAT THIS PROPERTY INTRODUCES 

Markup:

   <float>
      <float> a float that overflows the parent </float>
      <item> an item with -moz-float-edge set </item>
   </float>

Rendering:

   +------------+
   |+-----------+-----------------------+ +-----------------+
   || a float that overflows the parent | | an item with    |
   |+-----------+-----------------------+ | -moz-float-edge |
   |            |                         | set             |
   +------------+                         +-----------------+

That is SO wrong!!! (see test case)


THE SOLUTION

My proposed solution involves changing the spec to say that the marker box, in
the presence of floats, should be placed relative to the first line box. I have
already sent this proposal to www-style (from way back in 1998!):

   http://lists.w3.org/Archives/Public/www-style/1998Dec/0066.html

I will send this to the WG again at some point.

I propose that we get rid of -moz-float-edge and use this solution instead.

Comment 1

[Hixie (not reading bugmail)]

Attachment: Test case showing one reason why -moz-float-edge sucks

Comment 2

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

I don't see how this is a CSS1 bug (in a strict sense, anyway, although it is
related to the CSS1 float property...).  Removing CSS1 keyword.  However, I
filed bug 54696 and added the CSS1 keyword to that bug.

Comment 3

[Hixie (not reading bugmail)]

It's a CSS1 bug because the test case renders incorrectly per CSS1.

Comment 4

[Hixie (not reading bugmail)]

Taking QA per managerial policy.

Comment 5

[Hixie (not reading bugmail)]

Taking QA per managerial policy.

Comment 6

[Hixie (not reading bugmail)]

We discused this at the W3C CSS Face to Face this week. The tentative 
conclusion was that -moz-float-edge in fact did not suck, but was merely a part
of a bigger solution, that includes the marker thing.

The additional problem listed above is a separate bug that we should fix.
Marking this bug INVALID for now. I will open the other bugs.

Comment 7

[Hixie (not reading bugmail)]

reassigning qa since i resolved the bug