Subpixel layout: Horizontal centered content with auto margin needs bias rounding (cnn.com).

• Component: Layout and Rendering
• Status: RESOLVED INVALID

[zalan]

Created attachment 219609 [details]
test case

When calculating the horizontal margin values for centered content in RenderBox::computeInlineDirectionMargins, we snap to a floored CSS pixel value when subpixel is off, while with subpixel on, the .5 CSS px gets accumulated and later rounded. -> 1px off.

observer on cnn.com

LayoutUnit centeredMarginBoxStart = std::max<LayoutUnit>(0, (containerWidth - childWidth - marginStartWidth - marginEndWidth) / 2);


frame #0: 0x0000000111a3dc98 WebCore`WebCore::RenderBox::computeInlineDirectionMargins(this=0x00007f9481c4f870, containingBlock=0x00007f94819eb480, containerWidth=LayoutUnit at 0x00007fff52d12180, childWidth=LayoutUnit at 0x00007fff52d12178, marginStart=0x00007fff52d12580, marginEnd=0x00007fff52d12584) const + 888 at RenderBox.cpp:2424
    frame #1: 0x0000000111a3cd54 WebCore`WebCore::RenderBox::computeLogicalWidthInRegion(this=0x00007f9481c4f870, computedValues=0x00007fff52d12570, region=0x0000000000000000) const + 2996 at RenderBox.cpp:2253
    frame #2: 0x0000000111a3c137 WebCore`WebCore::RenderBox::updateLogicalWidth(this=0x00007f9481c4f870) + 55 at RenderBox.cpp:2176
    frame #3: 0x00000001119d34ef WebCore`WebCore::RenderBlock::updateLogicalWidthAndColumnWidth(this=0x00007f9481c4f870) + 63 at RenderBlock.cpp:1561
    frame #4: 0x0000000112243fc7 WebCore`WebCore::RenderBlockFlow::layoutBlock(this=0x00007f9481c4f870, relayoutChildren=false, pageLogicalHeight=LayoutUnit at 0x00007fff52d12910) + 263 at RenderBlockFlow.cpp:315
    frame #5: 0x00000001119d1ded WebCore`WebCore::RenderBlock::layout(this=0x00007f9481c4f870) + 125 at RenderBlock.cpp:1323
    frame #6: 0x000000011224774b WebCore`WebCore::RenderBlockFlow::layoutBlockChild(this=0x00007f94819eb480, child=0x00007f9481c4f870, marginInfo=0x00007fff52d12d98, previousFloatLogicalBottom=0x00007fff52d12d78, maxFloatLogicalBottom=0x00007fff52d13078) + 1323 at RenderBlockFlow.cpp:597
    frame #7: 0x0000000112245371 WebCore`WebCore::RenderBlockFlow::layoutBlockChildren(this=0x00007f94819eb480, relayoutChildren=true, maxFloatLogicalBottom=0x00007fff52d13078) + 625 at RenderBlockFlow.cpp:516
    frame #8: 0x0000000112244388 WebCore`WebCore::RenderBlockFlow::layoutBlock(this=0x00007f94819eb480, relayoutChildren=true, pageLogicalHeight=LayoutUnit at 0x00007fff52d13110) + 1224 at RenderBlockFlow.cpp:363
    frame #9: 0x00000001119d1ded WebCore`WebCore::RenderBlock::layout(this=0x00007f94819eb480) + 125 at RenderBlock.cpp:1323
    frame #10: 0x000000011224774b WebCore`WebCore::RenderBlockFlow::layoutBlockChild(this=0x00007f9481c430c0, child=0x00007f94819eb480, marginInfo=0x00007fff52d13598, previousFloatLogicalBottom=0x00007fff52d13578, maxFloatLogicalBottom=0x00007fff52d13878) + 1323 at RenderBlockFlow.cpp:597
    frame #11: 0x0000000112245371 WebCore`WebCore::RenderBlockFlow::layoutBlockChildren(this=0x00007f9481c430c0, relayoutChildren=true, maxFloatLogicalBottom=0x00007fff52d13878) + 625 at RenderBlockFlow.cpp:516
    frame #12: 0x0000000112244388 WebCore`WebCore::RenderBlockFlow::layoutBlock(this=0x00007f9481c430c0, relayoutChildren=true, pageLogicalHeight=LayoutUnit at 0x00007fff52d13910) + 1224 at RenderBlockFlow.cpp:363
    frame #13: 0x00000001119d1ded WebCore`WebCore::RenderBlock::layout(this=0x00007f9481c430c0) + 125 at RenderBlock.cpp:1323
    frame #14: 0x000000011224774b WebCore`WebCore::RenderBlockFlow::layoutBlockChild(this=0x00007f9481c51490, child=0x00007f9481c430c0, marginInfo=0x00007fff52d13d98, previousFloatLogicalBottom=0x00007fff52d13d78, maxFloatLogicalBottom=0x00007fff52d14078) + 1323 at RenderBlockFlow.cpp:597
    frame #15: 0x0000000112245371 WebCore`WebCore::RenderBlockFlow::layoutBlockChildren(this=0x00007f9481c51490, relayoutChildren=true, maxFloatLogicalBottom=0x00007fff52d14078) + 625 at RenderBlockFlow.cpp:516
    frame #16: 0x0000000112244388 WebCore`WebCore::RenderBlockFlow::layoutBlock(this=0x00007f9481c51490, relayoutChildren=true, pageLogicalHeight=LayoutUnit at 0x00007fff52d14110) + 1224 at RenderBlockFlow.cpp:363
    frame #17: 0x00000001119d1ded WebCore`WebCore::RenderBlock::layout(this=0x00007f9481c51490) + 125 at RenderBlock.cpp:1323
    frame #18: 0x0000000111c9767d WebCore`WebCore::RenderView::layoutContent(this=0x00007f9481c51490, state=0x00007f948056d100) + 93 at RenderView.cpp:158
    frame #19: 0x0000000111c98827 WebCore`WebCore::RenderView::layout(this=0x00007f9481c51490) + 2087 at RenderView.cpp:342
    frame #20: 0x0000000110d501ce WebCore`WebCore::FrameView::layout(this=0x00007f9481c4b200, allowSubtree=true) + 3422 at FrameView.cpp:1261
    frame #21: 0x0000000110a60910 WebCore`WebCore::Document::implicitClose(this=0x00007f948289de00) + 1008 at Document.cpp:2472
    frame #22: 0x0000000110d19beb WebCore`WebCore::FrameLoader::checkCallImplicitClose(this=0x00007f948043eda8) + 155 at FrameLoader.cpp:849
    frame #23: 0x0000000110d19866 WebCore`WebCore::FrameLoader::checkCompleted(this=0x00007f948043eda8) + 358 at FrameLoader.cpp:792
    frame #24: 0x0000000110d18178 WebCore`WebCore::FrameLoader::finishedParsing(this=0x00007f948043eda8) + 184 at FrameLoader.cpp:725
    frame #25: 0x0000000110a6b70b WebCore`WebCore::Document::finishedParsing(this=0x00007f948289de00) + 379 at Document.cpp:4490

[zalan]

<rdar://problem/15696159>

[zalan]

Created attachment 219610 [details]
screenshots

anim gif to demonstrate the off-by-one issue.

[zalan]

Created attachment 220043 [details]
screenshot(cnn.com)

[zalan]

Created attachment 220044 [details]
test case (RenderBox::computeInlineDirectionMargins)

[zalan]

Created attachment 221286 [details]
screenshots of FF/subpixel on/subpixel off

[zalan]

FF's rendering (v26) is right in-between subpixel on an off. Go with current subpixel on calculation (preferred)