Absolute elements in the dom tree break InlineFlow collapsing. #2474

glennw · 2014-05-22T21:12:01Z

Consider the following html:

<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            body {
                margin: 0;
            }
            P.fls {
                background-color: yellow;
                width: 25%;
                position: absolute;
                font-size: 64px;
                margin: 0;
            }
            DIV {
                font-size: 32px;
                clear: both;
                background-color: green;
                height: 400px;
            }
        </style>
    </head>
    <body>
        <div class="ch"><span>a b c d e f g h i j k l m n o p q r s t u v q x y z a b c d e f g h i j k l m n o p q r s t u v q x y z</span><p class="fls">F</p><span>A B C D E F G H I J K L M N O P Q R S T U V W X Y Z</span></div>
    </body>
</html>

The flow tree is:

+ RootFlow: (GenericBox  )
| + BlockFlow: (GenericBox  )
| | + BlockFlow: (GenericBox  )
| | | + InlineFlow: (ScannedTextBox  )
| | | + BlockFlow: (GenericBox  )
| | | | + InlineFlow: (ScannedTextBox  )
| | | + InlineFlow: (ScannedTextBox  )

In this case, the block is absolutely positioned, so it is taken out of the flow. In FF, the two spans are then collapsed into a single inline flow, and the lower and upper case characters are joined together. However, in Servo they are not collapsed.

jdm added the A-layout/inline label May 22, 2014

servo / servo

Absolute elements in the dom tree break InlineFlow collapsing. #2474

Absolute elements in the dom tree break InlineFlow collapsing. #2474

glennw commented May 22, 2014

servo / servo

Join GitHub today

Absolute elements in the dom tree break InlineFlow collapsing. #2474

Absolute elements in the dom tree break InlineFlow collapsing. #2474

Comments

glennw commented May 22, 2014