Web Inspector: Inspecting <aside> produces wrong highlight rectangle.

• Component: Web Inspector
• Status: RESOLVED INVALID

[zalan]

1. load http://jsfiddle.net/b9WCW/1/
2. inspect <aside class=side>
->highlight rectangle expands beyond the <aside> box.

[Radar WebKit Bug Importer]

<rdar://problem/17317549>

[Joseph Pecoraro]

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)
  }
...

[zalan]

omg that margin!

[Joseph Pecoraro]

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>

[zalan]

(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.