635637 - No support for display: run-in (a CSS 2.1 incompatibility)

Status: VERIFIED DUPLICATE of bug 2056

(Core :: Layout: Block and Inline, defect)

Description

[Alan{H}]

User-Agent:       Mozilla/5.0 (Macintosh; Intel Mac OS X 10.6; rv:2.0b11) Gecko/20100101 Firefox/4.0b11
Build Identifier: 4.0b11

CSS 2.1 defines `display: run-in`.[^1] Firefox 4 does not support this yet, despite supporting virtually every other part of the CSS standard.

Furthermore, it is the only major browser to lack such support. Even IE8 supports the `run-in` property correctly, as does Safari (which has supported it for a while, and added fully correct support in Safari 5.) [^2]

`run-in` is certainly an unusual `display` property, but not without its uses.

For example, consider this snippet:

<h3>Fred C.</h3>
<div class="bio-title">Co-Founder</div>

With CSS like this:

h3 { display: run-in; font-size: 1em; }
h3:after {content: ", ";}

then this could be rendered as:

"Fred C., Co- Founder" on one line.

This use-case has workarounds, but I hope to convince you they are notwithout downsides (implying unique advantages to proper run-in support):

1. First work-around: Include the co-founder bit as a <span> in the <h3>.
   Downside: This pollutes the H3, for example, slowing down users of assistive technologies. In VoiceOver’s “Rotor” feature, for example, a list of all heading-level elements is generated. Now it includes the title as well as the name. The document author should be able to make this decision.

2. Second work-around: Wrap both elements in an extra div, and render its contents with display: inline.
   Downside: Extra markup, which is not always desirable (this isn’t semantic) or possible (e.g. user stylesheets, either in a browser or to modify a social networking profile page on a site which allows users to specify stylesheets).

3. Third workaround: Modify the DOM using JS to simulate work-arounds #1 or #2
   Downsides: requires javascript, which is not always possible or desirable, as well as incurring the downsides of options #1 or #2.

I understand there is probably a feature freeze for 4.0 already, and understand that.  But I am really hoping for `display: run-in` support as soon as possible.


[^1]: http://www.w3.org/TR/CSS21/visuren.html#display-prop
[^2]: http://www.quirksmode.org/css/display.html

Reproducible: Always

Steps to Reproduce:
1. Attempt to use `display: run-in`
Actual Results:  
Not supported

Expected Results:  
Element with `display: run-in` appears as if it were part of the next block-level element.

I understand this is sort of a feature request, but as it, after all, a core CSS2.1 property, I’m marking it as a major broken feature.