[css-break] Behavior of breaks in <BR> elements

Hi,

lately I've been playing with some examples of breaks in <BR> elements
and the behavior is not consistent in different implementations (Gecko
vs WebKit/Blink).

Summarizing my tests:
* Page breaks:
  * Gecko: They work in <BR> elements.
  * WebKit/Blink: You need to set "display:block;" and "content:"";" in
order to have a break.
* Column breaks:
  * Gecko: They do not work in <BR> elements.
  * WebKit/Blink: Like in previous case you need to set display block
and content in order to have break. The same happens for region breaks.

It seems that <BR> elements are considered inline. According to the
css-break spec [1], forced breaks can only happen in block elements.

So the question is if the following example should break or not:
p {
    column-count: 2;
    height: 200px;
}
br.break {
    column-break-after: always;
}

<p>First column<br class="break" />Second column</p>

What should be the expected behavior?
Should it break if you add "display:block;"?
And if you add "content:"";" too?

Thanks for your time,
   Rego

PS: JFTR, the special behavior described above in WebKit/Blink is
because of a <BR> element is created as a normal RenderObject if it has
content (so it takes into account display block properly and it's
considered block), otherwise a <BR> is always inline. The source code
related to that is in Source/WebCore/html/HTMLBRElement.cpp [2].

[1] http://dev.w3.org/csswg/css-break/#forced-breaks
[2]
http://trac.webkit.org/browser/trunk/Source/WebCore/html/HTMLBRElement.cpp#L74

Received on Thursday, 25 July 2013 10:44:16 UTC