mirror of
https://github.com/mozilla/gecko-dev.git
synced 2024-11-06 17:16:12 +00:00
e915e08a19
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).
30 lines
1.0 KiB
HTML
30 lines
1.0 KiB
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="transparent">still underlined</span></span>
|
|
<span style="text-decoration: underline">Underlined <span> </span></span>
|
|
<span class="sup transparent">Offset</span>
|
|
</p>
|
|
<p>
|
|
<span class="alllines">
|
|
Before<span class="transparent">highlow</span>After</span>
|
|
</span>
|
|
<span class="highVert transparent">Offset</span><span class="lowVert transparent">text</span>
|
|
</p>
|
|
<p>
|
|
<span class="alllines">Before</span><span class="highRel alllines">high</span><span class="lowRel alllines">low</span><span class="alllines">After</span>
|
|
</p>
|
|
</body>
|
|
</html>
|