1. load http://jsfiddle.net/b9WCW/1/ 2. inspect <aside class=side> ->highlight rectangle expands beyond the <aside> box.
<rdar://problem/17317549>
The inspector highlight information comes from the renderer. The RenderBox for the <aside> seems to say it is huge. renderBox->marginRight() is 31104. lldb> f frame #0: 0x00000001142908c5 WebCore`WebCore::(anonymous namespace)::buildRendererHighlight(renderer=0x00007ff8d17ad960, region=0x0000000000000000, highlightConfig=0x00007ff8d141d970, highlight=0x00007fff54751e80) + 741 at InspectorOverlay.cpp:141 138 139 LayoutBoxExtent margins(renderBox->marginTop(), renderBox->marginRight(), renderBox->marginBottom(), renderBox->marginLeft()); 140 -> 141 if (!renderBox->isOutOfFlowPositioned() && region) { 142 RenderBox::LogicalExtentComputedValues computedValues; 143 renderBox->computeLogicalWidthInRegion(computedValues, region); 144 margins.mutableLogicalLeft(renderBox->style().writingMode()) = computedValues.m_margins.m_start; lldb> p *renderBox ... m_frameRect = { m_location = { m_x = (m_value = 31296) m_y = (m_value = 192) } m_size = { m_width = (m_value = 19712) m_height = (m_value = 5760) } } m_marginBox = { m_top = (m_value = 0) m_right = (m_value = 31104) m_bottom = (m_value = 0) m_left = (m_value = 0) } ...
omg that margin!
Can reproduce without <aside> just pure <div>s. Seems to affect a div with overflow:hidden next to a float: <style> div.one { float: left; width: 3em; } div.two { overflow: hidden; } </style> <div class="one"><p>x</p></div> <div class="two"><p>x</p></div>
(In reply to comment #2) > The inspector highlight information comes from the renderer. The RenderBox for the <aside> seems to say it is huge. renderBox->marginRight() is 31104. > > lldb> f > frame #0: 0x00000001142908c5 WebCore`WebCore::(anonymous namespace)::buildRendererHighlight(renderer=0x00007ff8d17ad960, region=0x0000000000000000, highlightConfig=0x00007ff8d141d970, highlight=0x00007fff54751e80) + 741 at InspectorOverlay.cpp:141 > 138 > 139 LayoutBoxExtent margins(renderBox->marginTop(), renderBox->marginRight(), renderBox->marginBottom(), renderBox->marginLeft()); > 140 > -> 141 if (!renderBox->isOutOfFlowPositioned() && region) { > 142 RenderBox::LogicalExtentComputedValues computedValues; > 143 renderBox->computeLogicalWidthInRegion(computedValues, region); > 144 margins.mutableLogicalLeft(renderBox->style().writingMode()) = computedValues.m_margins.m_start; > > > lldb> p *renderBox > ... > m_frameRect = { > m_location = { > m_x = (m_value = 31296) > m_y = (m_value = 192) > } > m_size = { > m_width = (m_value = 19712) > m_height = (m_value = 5760) > } > } > m_marginBox = { > m_top = (m_value = 0) > m_right = (m_value = 31104) > m_bottom = (m_value = 0) > m_left = (m_value = 0) > } > ... You don't seem to have the LayoutUnit <-> CSS px conversion lldb helper applied. 31296 is 489px which looks to me like normal right margin value.