Attachment #83841 for bug #46500

View Details Raw Unified Return to Bug 46500

| Differences between

and this patch



2011-02-25  David Hyatt  <hyatt@apple.com>

        Reviewed by NOBODY (OOPS!).

        https://bugs.webkit.org/show_bug.cgi?id=46500, make positioned elements work with vertical text.
        
        Patch computePositionedLogicalHeightReplaced to be writing-mode aware.
        
        Added six new tests in fast/replaced.

        * rendering/RenderBox.cpp:
        (WebCore::RenderBox::computePositionedLogicalHeightReplaced):

2011-02-25  Ned Holbrook  <nholbrook@apple.com>

        Reviewed by Dan Bernstein.

Lines 2883-2896 void RenderBox::computePositionedLogical Source/WebCore/rendering/RenderBox.cpp_sec1
- Source/WebCore/rendering/RenderBox.cpp -46 / +69 lines
2883	// We don't use containingBlock(), since we may be positioned by an enclosing relpositioned inline.	2883	// We don't use containingBlock(), since we may be positioned by an enclosing relpositioned inline.
2884	const RenderBoxModelObject* containerBlock = toRenderBoxModelObject(container());	2884	const RenderBoxModelObject* containerBlock = toRenderBoxModelObject(container());
2885		2885
2886	const int containerHeight = containingBlockLogicalHeightForPositioned(containerBlock);	2886	const int containerLogicalHeight = containingBlockLogicalHeightForPositioned(containerBlock);
2887		2887
2888	// Variables to solve.	2888	// Variables to solve.
2889	Length top = style()->top();	2889	bool isHorizontal = style()->isHorizontalWritingMode();
2890	Length bottom = style()->bottom();	2890	bool isFlipped = style()->isFlippedBlocksWritingMode();
2891	Length marginTop = style()->marginTop();	2891	Length marginBefore = style()->marginBefore();
2892	Length marginBottom = style()->marginBottom();	2892	Length marginAfter = style()->marginAfter();
		2893	int& marginBeforeAlias = isHorizontal ? (isFlipped ? m_marginBottom : m_marginTop) : (isFlipped ? m_marginRight: m_marginLeft);
		2894	int& marginAfterAlias = isHorizontal ? (isFlipped ? m_marginTop : m_marginBottom) : (isFlipped ? m_marginLeft: m_marginRight);
2893		2895
		2896	Length logicalTop = style()->logicalTop();
		2897	Length logicalBottom = style()->logicalBottom();
2894		2898
2895	/-----------------------------------------------------------------------\	2899	/-----------------------------------------------------------------------\
2896	* 1. The used value of 'height' is determined as for inline replaced	2900	* 1. The used value of 'height' is determined as for inline replaced
Lines 2899-2920 void RenderBox::computePositionedLogical Source/WebCore/rendering/RenderBox.cpp_sec2
2899	// NOTE: This value of height is FINAL in that the min/max height calculations	2903	// NOTE: This value of height is FINAL in that the min/max height calculations
2900	// are dealt with in computeReplacedHeight(). This means that the steps to produce	2904	// are dealt with in computeReplacedHeight(). This means that the steps to produce
2901	// correct max/min in the non-replaced version, are not necessary.	2905	// correct max/min in the non-replaced version, are not necessary.
2902	setHeight(computeReplacedLogicalHeight() + borderAndPaddingHeight());	2906	setLogicalHeight(computeReplacedLogicalHeight() + borderAndPaddingLogicalHeight());
2903	const int availableSpace = containerHeight - height();	2907	const int availableSpace = containerLogicalHeight - logicalHeight();
2904		2908
2905	/-----------------------------------------------------------------------\	2909	/-----------------------------------------------------------------------\
2906	* 2. If both 'top' and 'bottom' have the value 'auto', replace 'top'	2910	* 2. If both 'top' and 'bottom' have the value 'auto', replace 'top'
2907	* with the element's static position.	2911	* with the element's static position.
2908	\-----------------------------------------------------------------------/	2912	\-----------------------------------------------------------------------/
2909	// see FIXME 2	2913	// see FIXME 2
2910	if (top.isAuto() && bottom.isAuto()) {	2914	// FIXME: The static distance computation has not been patched for writing modes yet.
		2915	if (logicalTop.isAuto() && logicalBottom.isAuto()) {
2911	// staticY should already have been set through layout of the parent().	2916	// staticY should already have been set through layout of the parent().
2912	int staticTop = layer()->staticY() - containerBlock->borderTop();	2917	int staticTop = layer()->staticY() - containerBlock->borderTop();
2913	for (RenderObject* po = parent(); po && po != containerBlock; po = po->parent()) {	2918	for (RenderObject* po = parent(); po && po != containerBlock; po = po->parent()) {
2914	if (po->isBox() && !po->isTableRow())	2919	if (po->isBox() && !po->isTableRow())
2915	staticTop += toRenderBox(po)->y();	2920	staticTop += toRenderBox(po)->y();
2916	}	2921	}
2917	top.setValue(Fixed, staticTop);	2922	logicalTop.setValue(Fixed, staticTop);
2918	}	2923	}
2919		2924
2920	/-----------------------------------------------------------------------\	2925	/-----------------------------------------------------------------------\
Lines 2923-2933 void RenderBox::computePositionedLogical Source/WebCore/rendering/RenderBox.cpp_sec3
2923	\-----------------------------------------------------------------------/	2928	\-----------------------------------------------------------------------/
2924	// FIXME: The spec. says that this step should only be taken when bottom is	2929	// FIXME: The spec. says that this step should only be taken when bottom is
2925	// auto, but if only top is auto, this makes step 4 impossible.	2930	// auto, but if only top is auto, this makes step 4 impossible.
2926	if (top.isAuto() \|\| bottom.isAuto()) {	2931	if (logicalTop.isAuto() \|\| logicalBottom.isAuto()) {
2927	if (marginTop.isAuto())	2932	if (marginBefore.isAuto())
2928	marginTop.setValue(Fixed, 0);	2933	marginBefore.setValue(Fixed, 0);
2929	if (marginBottom.isAuto())	2934	if (marginAfter.isAuto())
2930	marginBottom.setValue(Fixed, 0);	2935	marginAfter.setValue(Fixed, 0);
2931	}	2936	}
2932		2937
2933	/-----------------------------------------------------------------------\	2938	/-----------------------------------------------------------------------\
Lines 2935-2993 void RenderBox::computePositionedLogical Source/WebCore/rendering/RenderBox.cpp_sec4
2935	* 'auto', solve the equation under the extra constraint that the two	2940	* 'auto', solve the equation under the extra constraint that the two
2936	* margins must get equal values.	2941	* margins must get equal values.
2937	\-----------------------------------------------------------------------/	2942	\-----------------------------------------------------------------------/
2938	int topValue = 0;	2943	int logicalTopValue = 0;
2939	int bottomValue = 0;	2944	int logicalBottomValue = 0;
2940		2945
2941	if (marginTop.isAuto() && marginBottom.isAuto()) {	2946	if (marginBefore.isAuto() && marginAfter.isAuto()) {
2942	// 'top' and 'bottom' cannot be 'auto' due to step 2 and 3 combined.	2947	// 'top' and 'bottom' cannot be 'auto' due to step 2 and 3 combined.
2943	ASSERT(!(top.isAuto() \|\| bottom.isAuto()));	2948	ASSERT(!(logicalTop.isAuto() \|\| logicalBottom.isAuto()));
2944		2949
2945	topValue = top.calcValue(containerHeight);	2950	logicalTopValue = logicalTop.calcValue(containerLogicalHeight);
2946	bottomValue = bottom.calcValue(containerHeight);	2951	logicalBottomValue = logicalBottom.calcValue(containerLogicalHeight);
2947		2952
2948	int difference = availableSpace - (topValue + bottomValue);	2953	int difference = availableSpace - (logicalTopValue + logicalBottomValue);
2949	// NOTE: This may result in negative values.	2954	// NOTE: This may result in negative values.
2950	m_marginTop = difference / 2; // split the difference	2955	marginBeforeAlias = difference / 2; // split the difference
2951	m_marginBottom = difference - m_marginTop; // account for odd valued differences	2956	marginAfterAlias = difference - marginBeforeAlias; // account for odd valued differences
2952		2957
2953	/-----------------------------------------------------------------------\	2958	/-----------------------------------------------------------------------\
2954	* 5. If at this point there is only one 'auto' left, solve the equation	2959	* 5. If at this point there is only one 'auto' left, solve the equation
2955	* for that value.	2960	* for that value.
2956	\-----------------------------------------------------------------------/	2961	\-----------------------------------------------------------------------/
2957	} else if (top.isAuto()) {	2962	} else if (logicalTop.isAuto()) {
2958	m_marginTop = marginTop.calcValue(containerHeight);	2963	marginBeforeAlias = marginBefore.calcValue(containerLogicalHeight);
2959	m_marginBottom = marginBottom.calcValue(containerHeight);	2964	marginAfterAlias = marginAfter.calcValue(containerLogicalHeight);
2960	bottomValue = bottom.calcValue(containerHeight);	2965	logicalBottomValue = logicalBottom.calcValue(containerLogicalHeight);
2961		2966
2962	// Solve for 'top'	2967	// Solve for 'top'
2963	topValue = availableSpace - (bottomValue + m_marginTop + m_marginBottom);	2968	logicalTopValue = availableSpace - (logicalBottomValue + marginBeforeAlias + marginAfterAlias);
2964	} else if (bottom.isAuto()) {	2969	} else if (logicalBottom.isAuto()) {
2965	m_marginTop = marginTop.calcValue(containerHeight);	2970	marginBeforeAlias = marginBefore.calcValue(containerLogicalHeight);
2966	m_marginBottom = marginBottom.calcValue(containerHeight);	2971	marginAfterAlias = marginAfter.calcValue(containerLogicalHeight);
2967	topValue = top.calcValue(containerHeight);	2972	logicalTopValue = logicalTop.calcValue(containerLogicalHeight);
2968		2973
2969	// Solve for 'bottom'	2974	// Solve for 'bottom'
2970	// NOTE: It is not necessary to solve for 'bottom' because we don't ever	2975	// NOTE: It is not necessary to solve for 'bottom' because we don't ever
2971	// use the value.	2976	// use the value.
2972	} else if (marginTop.isAuto()) {	2977	} else if (marginBefore.isAuto()) {
2973	m_marginBottom = marginBottom.calcValue(containerHeight);	2978	marginAfterAlias = marginAfter.calcValue(containerLogicalHeight);
2974	topValue = top.calcValue(containerHeight);	2979	logicalTopValue = logicalTop.calcValue(containerLogicalHeight);
2975	bottomValue = bottom.calcValue(containerHeight);	2980	logicalBottomValue = logicalBottom.calcValue(containerLogicalHeight);
2976		2981
2977	// Solve for 'margin-top'	2982	// Solve for 'margin-top'
2978	m_marginTop = availableSpace - (topValue + bottomValue + m_marginBottom);	2983	marginBeforeAlias = availableSpace - (logicalTopValue + logicalBottomValue + marginAfterAlias);
2979	} else if (marginBottom.isAuto()) {	2984	} else if (marginAfter.isAuto()) {
2980	m_marginTop = marginTop.calcValue(containerHeight);	2985	marginBeforeAlias = marginBefore.calcValue(containerLogicalHeight);
2981	topValue = top.calcValue(containerHeight);	2986	logicalTopValue = logicalTop.calcValue(containerLogicalHeight);
2982	bottomValue = bottom.calcValue(containerHeight);	2987	logicalBottomValue = logicalBottom.calcValue(containerLogicalHeight);
2983		2988
2984	// Solve for 'margin-bottom'	2989	// Solve for 'margin-bottom'
2985	m_marginBottom = availableSpace - (topValue + bottomValue + m_marginTop);	2990	marginAfterAlias = availableSpace - (logicalTopValue + logicalBottomValue + marginBeforeAlias);
2986	} else {	2991	} else {
2987	// Nothing is 'auto', just calculate the values.	2992	// Nothing is 'auto', just calculate the values.
2988	m_marginTop = marginTop.calcValue(containerHeight);	2993	marginBeforeAlias = marginBefore.calcValue(containerLogicalHeight);
2989	m_marginBottom = marginBottom.calcValue(containerHeight);	2994	marginAfterAlias = marginAfter.calcValue(containerLogicalHeight);
2990	topValue = top.calcValue(containerHeight);	2995	logicalTopValue = logicalTop.calcValue(containerLogicalHeight);
2991	// NOTE: It is not necessary to solve for 'bottom' because we don't ever	2996	// NOTE: It is not necessary to solve for 'bottom' because we don't ever
2992	// use the value.	2997	// use the value.
2993	}	2998	}
Lines 2999-3007 void RenderBox::computePositionedLogical Source/WebCore/rendering/RenderBox.cpp_sec5
2999	// NOTE: It is not necessary to do this step because we don't end up using	3004	// NOTE: It is not necessary to do this step because we don't end up using
3000	// the value of 'bottom' regardless of whether the values are over-constrained	3005	// the value of 'bottom' regardless of whether the values are over-constrained
3001	// or not.	3006	// or not.
		3007
		3008	// FIXME: Deal with differing writing modes here. Our offset needs to be in the containing block's coordinate space, so that
		3009	// can make the result here rather complicated to compute.
3002		3010
3003	// Use computed values to calculate the vertical position.	3011	// Use computed values to calculate the vertical position.
3004	m_frameRect.setY(topValue + m_marginTop + containerBlock->borderTop());	3012	int logicalTopPos = logicalTopValue + marginBeforeAlias;
		3013
		3014	// Our offset is from the logical bottom edge in a flipped environment, e.g., right for vertical-rl and bottom for horizontal-bt.
		3015	if (isFlipped) {
		3016	if (isHorizontal)
		3017	logicalTopPos += containerBlock->borderBottom();
		3018	else
		3019	logicalTopPos += containerBlock->borderRight();
		3020	} else {
		3021	if (isHorizontal)
		3022	logicalTopPos += containerBlock->borderTop();
		3023	else
		3024	logicalTopPos += containerBlock->borderLeft();
		3025	}
		3026
		3027	setLogicalTop(logicalTopPos);
3005	}	3028	}
3006		3029
3007	IntRect RenderBox::localCaretRect(InlineBox* box, int caretOffset, int* extraWidthToEndOfLine)	3030	IntRect RenderBox::localCaretRect(InlineBox* box, int caretOffset, int* extraWidthToEndOfLine)



2011-02-25  David Hyatt  <hyatt@apple.com>

        Reviewed by NOBODY (OOPS!).

        https://bugs.webkit.org/show_bug.cgi?id=46500, make positioned elements work with vertical text.
        
        Patch computePositionedLogicalHeightReplaced to be writing-mode aware.
        
        Added six new tests in fast/replaced.

        * fast/replaced/vertical-lr: Added.
        * fast/replaced/vertical-lr/absolute-position-percentage-width.html: Added.
        * fast/replaced/vertical-lr/absolute-position-with-auto-height-and-top-and-bottom.html: Added.
        * fast/replaced/vertical-lr/absolute-position-with-auto-width-and-left-and-right.html: Added.
        * fast/replaced/vertical-rl: Added.
        * fast/replaced/vertical-rl/absolute-position-percentage-width.html: Added.
        * fast/replaced/vertical-rl/absolute-position-with-auto-height-and-top-and-bottom.html: Added.
        * fast/replaced/vertical-rl/absolute-position-with-auto-width-and-left-and-right.html: Added.

2011-02-25  Jessie Berlin  <jberlin@apple.com>

        [Windows 7 Release Tests] fast/ruby/base-shorter-than-text.html failing since introduction



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">

<html>
<head>
 <title>Percentage logical width of absolute-positioned replaced elements</title>
  <style type="text/css">
   .box img {
   height: 100%;
   left: 0px;
   position: absolute;
   top: 0px;
   width: 100%;
   z-index: 0;
   }
   .box {
   background-color: red;
   border: solid black 2px;
   position: relative;
   padding: 5px;
   height: 300px;
   }
   .box * {
   position: relative;
   text-align: center;
   z-index: 1;
   }
   
   body { -webkit-writing-mode: vertical-lr }
   </style>
   <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#the-width-property" title="10.2 Content width: the 'width' property - <percentage> value">
</head>
<body>
<div class="box">
  <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAIAAAACDbGyAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAABVJREFUeNpiZPjPgAyYGBgo4gMEGABPkgEJUvO9mgAAAABJRU5ErkJggg==">
  <p>There should be no red on this page</p>
</div>
</body>
</html>



<html>
<head>
    <style>
        #a { position: relative; height: 150px; width: 100px; border: 2px solid black; }
        #b { position: absolute; top: 25px; height: auto; left: 0; bottom: 25px; }
        body { -webkit-writing-mode: vertical-lr }
    </style>
</head>
<body>
    <p>The blue box should be vertically centered in the black box with 25px of white on the top and bottom.</p>
    <div id="a">
        <img id="b" src="../resources/square-blue-100x100.png">
    </div>
</body>
</html>



<html>
<head>
    <style>
        #a { position: relative; height: 100px; width: 150px; border: 2px solid black; }
        #b { position: absolute; left: 25px; height: auto; right: 25px; top:0 }
        body { -webkit-writing-mode: vertical-lr }
    </style>
</head>
<body>
    <p>The blue box should be horizontally centered in the black box with 25px of white on the left and right.</p>
    <div id="a">
        <img id="b" src="../resources/square-blue-100x100.png">
    </div>
</body>
</html>



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">

<html>
<head>
 <title>Percentage logical width of absolute-positioned replaced elements</title>
  <style type="text/css">
   .box img {
   height: 100%;
   right: 0px;
   position: absolute;
   top: 0px;
   width: 100%;
   z-index: 0;
   }
   .box {
   background-color: red;
   border: solid black 2px;
   position: relative;
   padding: 5px;
   height: 300px;
   }
   .box * {
   position: relative;
   text-align: center;
   z-index: 1;
   }
   
   body { -webkit-writing-mode: vertical-rl }

   </style>
   <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#the-width-property" title="10.2 Content width: the 'width' property - <percentage> value">
</head>
<body>
<div class="box">
  <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAIAAAACDbGyAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAABVJREFUeNpiZPjPgAyYGBgo4gMEGABPkgEJUvO9mgAAAABJRU5ErkJggg==">
  <p>There should be no red on this page</p>
</div>
</body>
</html>



<html>
<head>
    <style>
        #a { position: relative; height: 150px; width: 100px; border: 2px solid black; }
        #b { position: absolute; top: 25px; height: auto; right: 0; bottom: 25px; }
        body { -webkit-writing-mode: vertical-rl }
    </style>
</head>
<body>
    <p>The blue box should be vertically centered in the black box with 25px of white on the top and bottom.</p>
    <div id="a">
        <img id="b" src="../resources/square-blue-100x100.png">
    </div>
</body>
</html>



<html>
<head>
    <style>
        #a { position: relative; height: 100px; width: 150px; border: 2px solid black; }
        #b { position: absolute; left: 25px; height: auto; right: 25px; top:0 }
        body { -webkit-writing-mode: vertical-rl }
    </style>
</head>
<body>
    <p>The blue box should be horizontally centered in the black box with 25px of white on the left and right.</p>
    <div id="a">
        <img id="b" src="../resources/square-blue-100x100.png">
    </div>
</body>
</html>

Line 0 LayoutTests/platform/mac/fast/replaced/vertical-lr/absolute-position-percentage-width-expected.checksum_sec1
- LayoutTests/platform/mac/fast/replaced/vertical-lr/absolute-position-percentage-width-expected.checksum +1 lines
		1	8109ba3e777c6823eb9db49de59eb831



layer at (0,0) size 800x600
  RenderView at (0,0) size 800x600
layer at (0,0) size 80x600
  RenderBlock {HTML} at (0,0) size 80x600
    RenderBody {BODY} at (8,8) size 64x584
layer at (8,8) size 64x314
  RenderBlock (relative positioned) {DIV} at (0,0) size 64x314 [bgcolor=#FF0000] [border: (2px solid #000000)]
layer at (10,10) size 60x310
  RenderImage {IMG} at (2,2) size 60x310
layer at (31,15) size 18x300
  RenderBlock (relative positioned) zI: 1 {P} at (23,7) size 18x300
    RenderText zI: 1 {#text} at (0,37) size 18x226
      text run at (0,37) width 226: "There should be no red on this page"

Line 0 LayoutTests/platform/mac/fast/replaced/vertical-lr/absolute-position-with-auto-height-and-top-and-bottom-expected.checksum_sec1
- LayoutTests/platform/mac/fast/replaced/vertical-lr/absolute-position-with-auto-height-and-top-and-bottom-expected.checksum +1 lines
		1	fe546f08e3ac4844349bb12f9dee990d



layer at (0,0) size 800x600
  RenderView at (0,0) size 800x600
layer at (0,0) size 800x600
  RenderBlock {HTML} at (0,0) size 800x600
    RenderBody {BODY} at (8,8) size 784x584
      RenderBlock {P} at (0,0) size 36x584
        RenderText {#text} at (0,0) size 36x564
          text run at (0,0) width 564: "The blue box should be vertically centered in the black box with 25px of white on the top"
          text run at (18,0) width 75: "and bottom."
layer at (60,8) size 104x154
  RenderBlock (relative positioned) {DIV} at (52,0) size 104x154 [border: (2px solid #000000)]
layer at (62,35) size 100x100
  RenderImage {IMG} at (2,27) size 100x100

Line 0 LayoutTests/platform/mac/fast/replaced/vertical-lr/absolute-position-with-auto-width-and-left-and-right-expected.checksum_sec1
- LayoutTests/platform/mac/fast/replaced/vertical-lr/absolute-position-with-auto-width-and-left-and-right-expected.checksum +1 lines
		1	561bcc401951776f6ec3762d40ab9f74



layer at (0,0) size 800x600
  RenderView at (0,0) size 800x600
layer at (0,0) size 800x600
  RenderBlock {HTML} at (0,0) size 800x600
    RenderBody {BODY} at (8,8) size 784x584
      RenderBlock {P} at (0,0) size 36x584
        RenderText {#text} at (0,0) size 36x581
          text run at (0,0) width 581: "The blue box should be horizontally centered in the black box with 25px of white on the left"
          text run at (18,0) width 60: "and right."
layer at (60,8) size 154x104
  RenderBlock (relative positioned) {DIV} at (52,0) size 154x104 [border: (2px solid #000000)]
layer at (87,10) size 100x100
  RenderImage {IMG} at (27,2) size 100x100

Line 0 LayoutTests/platform/mac/fast/replaced/vertical-rl/absolute-position-percentage-width-expected.checksum_sec1
- LayoutTests/platform/mac/fast/replaced/vertical-rl/absolute-position-percentage-width-expected.checksum +1 lines
		1	e74b31ac964d7e79a2068becdf53802a



layer at (0,0) size 800x600
  RenderView at (0,0) size 800x600
layer at (720,0) size 80x600
  RenderBlock {HTML} at (0,0) size 80x600
    RenderBody {BODY} at (8,8) size 64x584
layer at (728,8) size 64x314
  RenderBlock (relative positioned) {DIV} at (0,0) size 64x314 [bgcolor=#FF0000] [border: (2px solid #000000)]
layer at (730,10) size 60x310
  RenderImage {IMG} at (2,2) size 60x310
layer at (751,15) size 18x300
  RenderBlock (relative positioned) zI: 1 {P} at (23,7) size 18x300
    RenderText zI: 1 {#text} at (0,37) size 18x226
      text run at (0,37) width 226: "There should be no red on this page"

Line 0 LayoutTests/platform/mac/fast/replaced/vertical-rl/absolute-position-with-auto-height-and-top-and-bottom-expected.checksum_sec1
- LayoutTests/platform/mac/fast/replaced/vertical-rl/absolute-position-with-auto-height-and-top-and-bottom-expected.checksum +1 lines
		1	de238ceaa99b281a4327ec2694132ede



layer at (0,0) size 800x600
  RenderView at (0,0) size 800x600
layer at (0,0) size 800x600
  RenderBlock {HTML} at (0,0) size 800x600
    RenderBody {BODY} at (8,8) size 784x584
      RenderBlock {P} at (0,0) size 36x584
        RenderText {#text} at (0,0) size 36x564
          text run at (0,0) width 564: "The blue box should be vertically centered in the black box with 25px of white on the top"
          text run at (18,0) width 75: "and bottom."
layer at (636,8) size 104x154
  RenderBlock (relative positioned) {DIV} at (52,0) size 104x154 [border: (2px solid #000000)]
layer at (638,35) size 100x100
  RenderImage {IMG} at (2,27) size 100x100

Line 0 LayoutTests/platform/mac/fast/replaced/vertical-rl/absolute-position-with-auto-width-and-left-and-right-expected.checksum_sec1
- LayoutTests/platform/mac/fast/replaced/vertical-rl/absolute-position-with-auto-width-and-left-and-right-expected.checksum +1 lines
		1	e699d65e63f89e95b9bb7d2fe04f24ec



layer at (0,0) size 800x600
  RenderView at (0,0) size 800x600
layer at (0,0) size 800x600
  RenderBlock {HTML} at (0,0) size 800x600
    RenderBody {BODY} at (8,8) size 784x584
      RenderBlock {P} at (0,0) size 36x584
        RenderText {#text} at (0,0) size 36x581
          text run at (0,0) width 581: "The blue box should be horizontally centered in the black box with 25px of white on the left"
          text run at (18,0) width 60: "and right."
layer at (586,8) size 154x104
  RenderBlock (relative positioned) {DIV} at (52,0) size 154x104 [border: (2px solid #000000)]
layer at (613,10) size 100x100
  RenderImage {IMG} at (27,2) size 100x100

Line 12 LayoutTests/platform/mac/fast/replaced/vertical-rl/absolute-position-with-auto-width-and-left-and-right-expected.png_sec1
- LayoutTests/platform/mac/fast/replaced/vertical-rl/absolute-position-with-auto-width-and-left-and-right-expected.png

Return to Bug 46500

Lines 1-3 Source/WebCore/ChangeLog_sec1
- Source/WebCore/ChangeLog +13 lines
		1	2011-02-25 David Hyatt <hyatt@apple.com>
		2
		3	Reviewed by NOBODY (OOPS!).
		4
		5	https://bugs.webkit.org/show_bug.cgi?id=46500, make positioned elements work with vertical text.
		6
		7	Patch computePositionedLogicalHeightReplaced to be writing-mode aware.
		8
		9	Added six new tests in fast/replaced.
		10
		11	* rendering/RenderBox.cpp:
		12	(WebCore::RenderBox::computePositionedLogicalHeightReplaced):
		13
1	2011-02-25 Ned Holbrook <nholbrook@apple.com>	14	2011-02-25 Ned Holbrook <nholbrook@apple.com>
2		15
3	Reviewed by Dan Bernstein.	16	Reviewed by Dan Bernstein.

Lines 1-3 LayoutTests/ChangeLog_sec1
- LayoutTests/ChangeLog +19 lines
		1	2011-02-25 David Hyatt <hyatt@apple.com>
		2
		3	Reviewed by NOBODY (OOPS!).
		4
		5	https://bugs.webkit.org/show_bug.cgi?id=46500, make positioned elements work with vertical text.
		6
		7	Patch computePositionedLogicalHeightReplaced to be writing-mode aware.
		8
		9	Added six new tests in fast/replaced.
		10
		11	* fast/replaced/vertical-lr: Added.
		12	* fast/replaced/vertical-lr/absolute-position-percentage-width.html: Added.
		13	* fast/replaced/vertical-lr/absolute-position-with-auto-height-and-top-and-bottom.html: Added.
		14	* fast/replaced/vertical-lr/absolute-position-with-auto-width-and-left-and-right.html: Added.
		15	* fast/replaced/vertical-rl: Added.
		16	* fast/replaced/vertical-rl/absolute-position-percentage-width.html: Added.
		17	* fast/replaced/vertical-rl/absolute-position-with-auto-height-and-top-and-bottom.html: Added.
		18	* fast/replaced/vertical-rl/absolute-position-with-auto-width-and-left-and-right.html: Added.
		19
1	2011-02-25 Jessie Berlin <jberlin@apple.com>	20	2011-02-25 Jessie Berlin <jberlin@apple.com>
2		21
3	[Windows 7 Release Tests] fast/ruby/base-shorter-than-text.html failing since introduction	22	[Windows 7 Release Tests] fast/ruby/base-shorter-than-text.html failing since introduction

Line 0 LayoutTests/fast/replaced/vertical-lr/absolute-position-percentage-width.html_sec1
- LayoutTests/fast/replaced/vertical-lr/absolute-position-percentage-width.html +38 lines
	1	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
	2
	3	<html>
	4	<head>
	5	<title>Percentage logical width of absolute-positioned replaced elements</title>
	6	<style type="text/css">
	7	.box img {
	8	height: 100%;
	9	left: 0px;
	10	position: absolute;
	11	top: 0px;
	12	width: 100%;
	13	z-index: 0;
	14	}
	15	.box {
	16	background-color: red;
	17	border: solid black 2px;
	18	position: relative;
	19	padding: 5px;
	20	height: 300px;
	21	}
	22	.box * {
	23	position: relative;
	24	text-align: center;
	25	z-index: 1;
	26	}
	27
	28	body { -webkit-writing-mode: vertical-lr }
	29	</style>
	30	<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#the-width-property" title="10.2 Content width: the 'width' property - <percentage> value">
	31	</head>
	32	<body>
	33	<div class="box">
	34	<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAIAAAACDbGyAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAABVJREFUeNpiZPjPgAyYGBgo4gMEGABPkgEJUvO9mgAAAABJRU5ErkJggg==">
	35	<p>There should be no red on this page</p>
	36	</div>
	37	</body>
	38	</html>

Line 0 LayoutTests/fast/replaced/vertical-rl/absolute-position-percentage-width.html_sec1
- LayoutTests/fast/replaced/vertical-rl/absolute-position-percentage-width.html +39 lines
	1	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
	2
	3	<html>
	4	<head>
	5	<title>Percentage logical width of absolute-positioned replaced elements</title>
	6	<style type="text/css">
	7	.box img {
	8	height: 100%;
	9	right: 0px;
	10	position: absolute;
	11	top: 0px;
	12	width: 100%;
	13	z-index: 0;
	14	}
	15	.box {
	16	background-color: red;
	17	border: solid black 2px;
	18	position: relative;
	19	padding: 5px;
	20	height: 300px;
	21	}
	22	.box * {
	23	position: relative;
	24	text-align: center;
	25	z-index: 1;
	26	}
	27
	28	body { -webkit-writing-mode: vertical-rl }
	29
	30	</style>
	31	<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#the-width-property" title="10.2 Content width: the 'width' property - <percentage> value">
	32	</head>
	33	<body>
	34	<div class="box">
	35	<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAIAAAACDbGyAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAABVJREFUeNpiZPjPgAyYGBgo4gMEGABPkgEJUvO9mgAAAABJRU5ErkJggg==">
	36	<p>There should be no red on this page</p>
	37	</div>
	38	</body>
	39	</html>

Line 0 LayoutTests/platform/mac/fast/replaced/vertical-lr/absolute-position-percentage-width-expected.txt_sec1
- LayoutTests/platform/mac/fast/replaced/vertical-lr/absolute-position-percentage-width-expected.txt +13 lines
	1	layer at (0,0) size 800x600
	2	RenderView at (0,0) size 800x600
	3	layer at (0,0) size 80x600
	4	RenderBlock {HTML} at (0,0) size 80x600
	5	RenderBody {BODY} at (8,8) size 64x584
	6	layer at (8,8) size 64x314
	7	RenderBlock (relative positioned) {DIV} at (0,0) size 64x314 [bgcolor=#FF0000] [border: (2px solid #000000)]
	8	layer at (10,10) size 60x310
	9	RenderImage {IMG} at (2,2) size 60x310
	10	layer at (31,15) size 18x300
	11	RenderBlock (relative positioned) zI: 1 {P} at (23,7) size 18x300
	12	RenderText zI: 1 {#text} at (0,37) size 18x226
	13	text run at (0,37) width 226: "There should be no red on this page"