Re: Question on clear applying to run-ins

On 09/07/2010 06:18 PM, Boris Zbarsky wrote:
> On 9/7/10 8:24 PM, fantasai wrote:
>>> What does that mean exactly? Is the block supposed to clear whatever the
>>> run-in would clear (in addition to whatever the block itself clears)? Or
>>> is this just saying that the block is the right block formatting context
>>> for the run-in's clearance? Or something else?
>>
>> The WG believes that the intent is to apply 'clear' to the run-in itself,
>> if it turns into a block, else to the block that contains it, if it turns
>> into an inline.
>>
>> Proposed changes to make this clearer, I suggest changing the above
>> quoted
>> sentence to:
>>
>> | For a run-in element that is rendered as an 'inline' element,
>> | this property applies to the block box that contains it.
>
> This doesn't actually answer my question (though it does eliminate tome
> possible answers). Here's what I'm asking about:
>
> <span style="display: run-in; clear: right;"></span>
> <div style="clear: left"></div>
>
> What should the <div> be clearing? Right floats? Left floats? Both? For
> right floats that come between the run-in and the block, should the
> block be clearing them (sounds like "yes")?

Proposal A:

Change
   # For run-in boxes, this property applies to the final block box to
   # which the run-in box belongs.
to
   | For a run-in element that is rendered as an 'inline' element,
   | this property combines with the 'clear' value on the block box
   | that contains it, resulting in used 'clear' value that honors
   | the requirements of both elements: 'left' and 'none' combine
   | to 'left', 'right' and 'none' combine to 'right, 'left' and
   | 'right' combine to 'both', and 'both' and any other value
   | combine to 'both'.

Proposal B:

Change
   # For run-in boxes, this property applies to the final block box to
   # which the run-in box belongs.
to
   | Note that while this property applies to 'run-in' elements that
   | render as 'block' boxes, it does not apply to 'run-in' elements
   | that render as 'inline' boxes.

Testcase as Snippet:

   <!DOCTYPE html>
   <title>Clearance applied to Run-ins</title>

   <div style="float: left; border: 2em solid fuchsia;"></div>
   <div style="float: right; border: 1em solid aqua;"></div>
   <span style="display: run-in; clear: right; color: aqua;">Run-in</span>
   <div style="clear: left; border: solid silver; color: fuchsia">Paragraph</div>

   <div style="border: solid; clear: both"></div>

   <div style="float: left; border: 1em solid fuchsia;"></div>
   <div style="float: right; border: 2em solid aqua;"></div>
   <span style="display: run-in; clear: right; color: aqua">Run-in</span>
   <div style="clear: left; border: solid silver; color: fuchsia">Paragraph</div>

Testcase as Data URL:

data:text/html;base64,PCFET0NUWVBFIGh0bWw%2BDQo8dGl0bGU%2BQ2xlYXJhbmNlIGFwcGxpZWQgdG8gUnVuLWluczwvdGl0bGU%2BDQoNCjxkaXYgc3R5bGU9ImZsb2F0OiBsZWZ0OyBib3JkZXI6IDJlbSBzb2xpZCBmdWNoc2lhOyI%2BPC9kaXY%2BDQo8ZGl2IHN0eWxlPSJmbG9hdDogcmlnaHQ7IGJvcmRlcjogMWVtIHNvbGlkIGFxdWE7Ij48L2Rpdj4NCjxzcGFuIHN0eWxlPSJkaXNwbGF5OiBydW4taW47IGNsZWFyOiByaWdodDsgY29sb3I6IGFxdWE7Ij5SdW4taW48L3NwYW4%2BDQo8ZGl2IHN0eWxlPSJjbGVhcjogbGVmdDsgYm9yZGVyOiBzb2xpZCBzaWx2ZXI7IGNvbG9yOiBmdWNoc2lhIj5QYXJhZ3JhcGg8L2Rpdj4NCg0KPGRpdiBzdHlsZT0iYm9yZGVyOiBzb2xpZDsgY2xlYXI6IGJvdGgiPjwvZGl2Pg0KDQo8ZGl2IHN0eWxlPSJmbG9hdDogbGVmdDsgYm9yZGVyOiAxZW0gc29saWQgZnVjaHNpYTsiPjwvZGl2Pg0KPGRpdiBzdHlsZT0iZmxvYXQ6IHJpZ2h0OyBib3JkZXI6IDJlbSBzb2xpZCBhcXVhOyI%2BPC9kaXY%2BDQo8c3BhbiBzdHlsZT0iZGlzcGxheTogcnVuLWluOyBjbGVhcjogcmlnaHQ7IGNvbG9yOiBhcXVhIj5SdW4taW48L3NwYW4%2BDQo8ZGl2IHN0eWxlPSJjbGVhcjogbGVmdDsgYm9yZGVyOiBzb2xpZCBzaWx2ZXI7IGNvbG9yOiBmdWNoc2lhIj5QYXJhZ3JhcGg8L2Rpdj4NCg0KDQo%3D

Arron, what are the test results?

~fantasai

Received on Wednesday, 22 September 2010 13:03:21 UTC