gecko/layout/reftests/text-decoration/decoration-css21.html

<html>
	<head>
		<style>
			.sup {vertical-align: super;}
			.transparent {color: transparent;}
			.alllines {text-decoration:line-through overline underline; color: purple;}
			.highRel {position: relative; top: -4em;}
			.lowRel {position: relative; top: 4em;}
			.lowVert {vertical-align: -4em;}
			.highVert {vertical-align: 4em;}
		</style>
	</head>
	<body>
		<p>
			<span style="text-decoration: underline">Underlined <span class="sup transparent">still underlined</span></span>
			<span style="text-decoration: underline">Underlined <span class="sup">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span></span>
		</p>
		<p>
			<span class="alllines">
				Before<span class="highVert transparent">high</span><span class="lowVert transparent">low</span>After
			</span>
		</p>
		<p>
			<span class="alllines">
				Before<span class="highRel">high</span><span class="lowRel">low</span>After</span>
			</span>
		</p>
	</body>
</html>
Fix text-decoration positioning in quirks mode and set overflow areas to match. (Bug 403524) r=dbaron Change the quirks mode text-decoration code (soon to be used for all modes) to follow CSS 2.1's rules for positioning of decoration lines. Decorations are now drawn at a constant vertical position established by the element creating the decoration, and more than one of the same type (underline, overline, line-through) of decoration are supported on the same piece of text. This means that text-decorations can now significantly overflow a text frame, since the vertical-alignment of the element with text-decoration may be substantially different from the vertical alignment of the text. Set overflow areas for text frames with text decorations in nsLineLayout::RelativePositionFrames since it must happen after vertical alignment is done, and when relative positioning data are consistent (nsIFrame::GetRelativeOffset matches the offset that has been applied). 2011-08-03 11:30:58 -07:00			`<html>`
			`<head>`
			`<style>`
			`.sup {vertical-align: super;}`
			`.transparent {color: transparent;}`
			`.alllines {text-decoration:line-through overline underline; color: purple;}`
			`.highRel {position: relative; top: -4em;}`
			`.lowRel {position: relative; top: 4em;}`
			`.lowVert {vertical-align: -4em;}`
			`.highVert {vertical-align: 4em;}`
			`</style>`
			`</head>`
			`<body>`
			`<p>`
			`<span style="text-decoration: underline">Underlined <span class="sup transparent">still underlined</span></span>`
			`<span style="text-decoration: underline">Underlined <span class="sup">     </span></span>`
			`</p>`
			`<p>`
			`<span class="alllines">`
			`Before<span class="highVert transparent">high</span><span class="lowVert transparent">low</span>After`
			`</span>`
			`</p>`
			`<p>`
			`<span class="alllines">`
			`Before<span class="highRel">high</span><span class="lowRel">low</span>After</span>`
			`</span>`
			`</p>`
			`</body>`
			`</html>`