зеркало из https://github.com/mozilla/gecko-dev.git
Bug 537230 part.1 Paint connection of complex style decoration lines smoothly r=roc
This commit is contained in:
Masayuki Nakano
Родитель
7b2b8a1c8a
Коммит
34bdb7d777
|
|
@ -3249,11 +3249,56 @@ nsCSSRendering::DrawTableBorderSegment(nsRenderingContext& aContext,
|
|||
|
||||
// End table border-collapsing section
|
||||
|
||||
gfxRect
|
||||
nsCSSRendering::ExpandPaintingRectForDecorationLine(nsIFrame* aFrame,
|
||||
const PRUint8 aStyle,
|
||||
const gfxRect& aClippedRect,
|
||||
const gfxFloat aXInFrame,
|
||||
const gfxFloat aCycleLength)
|
||||
{
|
||||
switch (aStyle) {
|
||||
case NS_STYLE_TEXT_DECORATION_STYLE_DOTTED:
|
||||
case NS_STYLE_TEXT_DECORATION_STYLE_DASHED:
|
||||
case NS_STYLE_TEXT_DECORATION_STYLE_WAVY:
|
||||
break;
|
||||
default:
|
||||
NS_ERROR("Invalid style was specified");
|
||||
return aClippedRect;
|
||||
}
|
||||
|
||||
nsBlockFrame* block = nsnull;
|
||||
// Note that when we paint the decoration lines in relative positioned
|
||||
// box, we should paint them like all of the boxes are positioned as static.
|
||||
nscoord relativeX = 0;
|
||||
for (nsIFrame* f = aFrame; f; f = f->GetParent()) {
|
||||
block = do_QueryFrame(f);
|
||||
if (block) {
|
||||
break;
|
||||
}
|
||||
relativeX += f->GetRelativeOffset(f->GetStyleDisplay()).x;
|
||||
}
|
||||
|
||||
NS_ENSURE_TRUE(block, aClippedRect);
|
||||
|
||||
nscoord frameXInBlockAppUnits = aFrame->GetOffsetTo(block).x - relativeX;
|
||||
nsPresContext *pc = aFrame->PresContext();
|
||||
gfxFloat frameXInBlock = pc->AppUnitsToGfxUnits(frameXInBlockAppUnits);
|
||||
PRInt32 rectXInBlock = PRInt32(NS_round(frameXInBlock + aXInFrame));
|
||||
PRInt32 extraLeft =
|
||||
rectXInBlock - (rectXInBlock / PRInt32(aCycleLength) * aCycleLength);
|
||||
gfxRect rect(aClippedRect);
|
||||
rect.x -= extraLeft;
|
||||
rect.width += extraLeft;
|
||||
return rect;
|
||||
}
|
||||
|
||||
void
|
||||
nsCSSRendering::PaintDecorationLine(gfxContext* aGfxContext,
|
||||
nsCSSRendering::PaintDecorationLine(nsIFrame* aFrame,
|
||||
gfxContext* aGfxContext,
|
||||
const gfxRect& aDirtyRect,
|
||||
const nscolor aColor,
|
||||
const gfxPoint& aPt,
|
||||
const gfxFloat aXInFrame,
|
||||
const gfxSize& aLineSize,
|
||||
const gfxFloat aAscent,
|
||||
const gfxFloat aOffset,
|
||||
|
|
@ -3297,6 +3342,8 @@ nsCSSRendering::PaintDecorationLine(gfxContext* aGfxContext,
|
|||
gfxFloat dash[2] = { dashWidth, dashWidth };
|
||||
aGfxContext->SetLineCap(gfxContext::LINE_CAP_BUTT);
|
||||
aGfxContext->SetDash(dash, 2, 0.0);
|
||||
rect = ExpandPaintingRectForDecorationLine(aFrame, aStyle, rect,
|
||||
aXInFrame, dashWidth * 2);
|
||||
// We should continue to draw the last dash even if it is not in the rect.
|
||||
rect.width += dashWidth;
|
||||
break;
|
||||
|
|
@ -3316,6 +3363,8 @@ nsCSSRendering::PaintDecorationLine(gfxContext* aGfxContext,
|
|||
dash[1] = dashWidth;
|
||||
}
|
||||
aGfxContext->SetDash(dash, 2, 0.0);
|
||||
rect = ExpandPaintingRectForDecorationLine(aFrame, aStyle, rect,
|
||||
aXInFrame, dashWidth * 2);
|
||||
// We should continue to draw the last dot even if it is not in the rect.
|
||||
rect.width += dashWidth;
|
||||
break;
|
||||
|
|
@ -3413,10 +3462,13 @@ nsCSSRendering::PaintDecorationLine(gfxContext* aGfxContext,
|
|||
gfxFloat adv = rect.Height() - lineHeight;
|
||||
gfxFloat flatLengthAtVertex = NS_MAX((lineHeight - 1.0) * 2.0, 1.0);
|
||||
|
||||
// Align the start of wavy lines to the nearest ancestor block.
|
||||
gfxFloat cycleLength = 2 * (adv + flatLengthAtVertex);
|
||||
rect = ExpandPaintingRectForDecorationLine(aFrame, aStyle, rect,
|
||||
aXInFrame, cycleLength);
|
||||
// figure out if we can trim whole cycles from the left and right edges
|
||||
// of the line, to try and avoid creating an unnecessarily long and
|
||||
// complex path
|
||||
gfxFloat cycleLength = 2 * (adv + flatLengthAtVertex);
|
||||
PRInt32 skipCycles = floor((aDirtyRect.x - rect.x) / cycleLength);
|
||||
if (skipCycles > 0) {
|
||||
rect.x += skipCycles * cycleLength;
|
||||
|
|
|
|||
|
|
@ -387,10 +387,16 @@ struct nsCSSRendering {
|
|||
* NOTE: aPt, aLineSize, aAscent and aOffset are non-rounded device pixels,
|
||||
* not app units.
|
||||
* input:
|
||||
* @param aFrame the frame which needs the decoration line
|
||||
* @param aGfxContext
|
||||
* @param aDirtyRect no need to paint outside this rect
|
||||
* @param aColor the color of the decoration line
|
||||
* @param aPt the top/left edge of the text
|
||||
* @param aXInFrame the distance between aPt.x and left edge of
|
||||
* aFrame. If the decoration line is for shadow,
|
||||
* set the distance between the left edge of
|
||||
* the aFrame and the position of the text as
|
||||
* positioned without offset of the shadow.
|
||||
* @param aLineSize the width and the height of the decoration
|
||||
* line
|
||||
* @param aAscent the ascent of the text
|
||||
|
|
@ -415,10 +421,12 @@ struct nsCSSRendering {
|
|||
* if it's possible. Therefore, this value is
|
||||
* used for strikeout line and overline too.
|
||||
*/
|
||||
static void PaintDecorationLine(gfxContext* aGfxContext,
|
||||
static void PaintDecorationLine(nsIFrame* aFrame,
|
||||
gfxContext* aGfxContext,
|
||||
const gfxRect& aDirtyRect,
|
||||
const nscolor aColor,
|
||||
const gfxPoint& aPt,
|
||||
const gfxFloat aXInFrame,
|
||||
const gfxSize& aLineSize,
|
||||
const gfxFloat aAscent,
|
||||
const gfxFloat aOffset,
|
||||
|
|
@ -475,6 +483,32 @@ protected:
|
|||
const PRUint8 aDecoration,
|
||||
const PRUint8 aStyle,
|
||||
const gfxFloat aDscentLimit);
|
||||
|
||||
/**
|
||||
* Returns inflated rect for painting a decoration line.
|
||||
* Complex style decoration lines should be painted from leftmost of nearest
|
||||
* ancestor block box because that makes better look of connection of lines
|
||||
* for different nodes. ExpandPaintingRectForDecorationLine() returns
|
||||
* a rect for actual painting rect for the clipped rect.
|
||||
*
|
||||
* input:
|
||||
* @param aFrame the frame which needs the decoration line.
|
||||
* @param aStyle the style of the complex decoration line
|
||||
* NS_STYLE_TEXT_DECORATION_STYLE_DOTTED or
|
||||
* NS_STYLE_TEXT_DECORATION_STYLE_DASHED or
|
||||
* NS_STYLE_TEXT_DECORATION_STYLE_WAVY.
|
||||
* @param aClippedRect the clipped rect for the decoration line.
|
||||
* in other words, visible area of the line.
|
||||
* @param aXInFrame the distance between left edge of aFrame and
|
||||
* aClippedRect.pos.x.
|
||||
* @param aCycleLength the width of one cycle of the line style.
|
||||
*/
|
||||
static gfxRect ExpandPaintingRectForDecorationLine(
|
||||
nsIFrame* aFrame,
|
||||
const PRUint8 aStyle,
|
||||
const gfxRect &aClippedRect,
|
||||
const gfxFloat aXInFrame,
|
||||
const gfxFloat aCycleLength);
|
||||
};
|
||||
|
||||
/*
|
||||
|
|
|
|||
|
|
@ -4772,7 +4772,7 @@ static void DrawSelectionDecorations(gfxContext* aContext,
|
|||
nsTextFrame* aFrame,
|
||||
nsTextPaintStyle& aTextPaintStyle,
|
||||
const nsTextRangeStyle &aRangeStyle,
|
||||
const gfxPoint& aPt, gfxFloat aWidth,
|
||||
const gfxPoint& aPt, gfxFloat aXInFrame, gfxFloat aWidth,
|
||||
gfxFloat aAscent, const gfxFont::Metrics& aFontMetrics)
|
||||
{
|
||||
gfxPoint pt(aPt);
|
||||
|
|
@ -4849,8 +4849,8 @@ static void DrawSelectionDecorations(gfxContext* aContext,
|
|||
return;
|
||||
}
|
||||
size.height *= relativeSize;
|
||||
nsCSSRendering::PaintDecorationLine(
|
||||
aContext, aDirtyRect, color, pt, size, aAscent, aFontMetrics.underlineOffset,
|
||||
nsCSSRendering::PaintDecorationLine(aFrame, aContext, aDirtyRect, color, pt,
|
||||
pt.x - aPt.x + aXInFrame, size, aAscent, aFontMetrics.underlineOffset,
|
||||
NS_STYLE_TEXT_DECORATION_LINE_UNDERLINE, style, descentLimit);
|
||||
}
|
||||
|
||||
|
|
@ -5289,9 +5289,10 @@ nsTextFrame::PaintTextSelectionDecorations(gfxContext* aCtx,
|
|||
pt.x = (aFramePt.x + xOffset -
|
||||
(mTextRun->IsRightToLeft() ? advance : 0)) / app;
|
||||
gfxFloat width = NS_ABS(advance) / app;
|
||||
DrawSelectionDecorations(aCtx, dirtyRect, aSelectionType, this, aTextPaintStyle,
|
||||
selectedStyle,
|
||||
pt, width, mAscent / app, decorationMetrics);
|
||||
gfxFloat xInFrame = pt.x - (aFramePt.x / app);
|
||||
DrawSelectionDecorations(aCtx, dirtyRect, aSelectionType, this,
|
||||
aTextPaintStyle, selectedStyle, pt, xInFrame,
|
||||
width, mAscent / app, decorationMetrics);
|
||||
}
|
||||
iterator.UpdateWithAdvance(advance);
|
||||
}
|
||||
|
|
@ -5642,9 +5643,9 @@ nsTextFrame::DrawTextRunAndDecorations(
|
|||
decPt.y = (frameTop - dec.mBaselineOffset) / app;
|
||||
|
||||
const nscolor lineColor = aDecorationOverrideColor ? *aDecorationOverrideColor : dec.mColor;
|
||||
nsCSSRendering::PaintDecorationLine(aCtx, dirtyRect, lineColor, decPt, decSize, ascent,
|
||||
metrics.underlineOffset, NS_STYLE_TEXT_DECORATION_LINE_UNDERLINE,
|
||||
dec.mStyle);
|
||||
nsCSSRendering::PaintDecorationLine(this, aCtx, dirtyRect, lineColor,
|
||||
decPt, 0.0, decSize, ascent, metrics.underlineOffset,
|
||||
NS_STYLE_TEXT_DECORATION_LINE_UNDERLINE, dec.mStyle);
|
||||
}
|
||||
// Overlines
|
||||
for (PRUint32 i = aDecorations.mOverlines.Length(); i-- > 0; ) {
|
||||
|
|
@ -5659,8 +5660,9 @@ nsTextFrame::DrawTextRunAndDecorations(
|
|||
decPt.y = (frameTop - dec.mBaselineOffset) / app;
|
||||
|
||||
const nscolor lineColor = aDecorationOverrideColor ? *aDecorationOverrideColor : dec.mColor;
|
||||
nsCSSRendering::PaintDecorationLine(aCtx, dirtyRect, lineColor, decPt, decSize, ascent,
|
||||
metrics.maxAscent, NS_STYLE_TEXT_DECORATION_LINE_OVERLINE, dec.mStyle);
|
||||
nsCSSRendering::PaintDecorationLine(this, aCtx, dirtyRect, lineColor,
|
||||
decPt, 0.0, decSize, ascent, metrics.maxAscent,
|
||||
NS_STYLE_TEXT_DECORATION_LINE_OVERLINE, dec.mStyle);
|
||||
}
|
||||
|
||||
// CSS 2.1 mandates that text be painted after over/underlines, and *then*
|
||||
|
|
@ -5681,9 +5683,9 @@ nsTextFrame::DrawTextRunAndDecorations(
|
|||
decPt.y = (frameTop - dec.mBaselineOffset) / app;
|
||||
|
||||
const nscolor lineColor = aDecorationOverrideColor ? *aDecorationOverrideColor : dec.mColor;
|
||||
nsCSSRendering::PaintDecorationLine(aCtx, dirtyRect, lineColor, decPt, decSize, ascent,
|
||||
metrics.strikeoutOffset, NS_STYLE_TEXT_DECORATION_LINE_LINE_THROUGH,
|
||||
dec.mStyle);
|
||||
nsCSSRendering::PaintDecorationLine(this, aCtx, dirtyRect, lineColor,
|
||||
decPt, 0.0, decSize, ascent, metrics.strikeoutOffset,
|
||||
NS_STYLE_TEXT_DECORATION_LINE_LINE_THROUGH, dec.mStyle);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,102 @@
|
|||
<style type="text/css">
|
||||
p {
|
||||
margin-left: 11px;
|
||||
padding-left: 11px;
|
||||
}
|
||||
p.dotted span {
|
||||
-moz-text-decoration-style: dotted;
|
||||
}
|
||||
p.dashed span {
|
||||
-moz-text-decoration-style: dashed;
|
||||
}
|
||||
p.wavy span {
|
||||
-moz-text-decoration-style: wavy;
|
||||
}
|
||||
span {
|
||||
text-decoration: underline line-through overline;
|
||||
}
|
||||
p.relative {
|
||||
margin-left: 24px;
|
||||
}
|
||||
p.shadow span {
|
||||
position: relative;
|
||||
left: 1em;
|
||||
top: 0.5em;
|
||||
}
|
||||
</style>
|
||||
<div style="font-size: 16px;">
|
||||
<p class="dotted">
|
||||
<span> </span>
|
||||
</p>
|
||||
<p class="dashed">
|
||||
<span> </span>
|
||||
</p>
|
||||
<p class="wavy">
|
||||
<span> </span>
|
||||
</p>
|
||||
<p class="dotted relative">
|
||||
<span> </span>
|
||||
</p>
|
||||
<p class="dashed relative">
|
||||
<span> </span>
|
||||
</p>
|
||||
<p class="wavy relative">
|
||||
<span> </span>
|
||||
</p>
|
||||
<p class="dotted">
|
||||
<span> </span>
|
||||
</p>
|
||||
<p class="dashed">
|
||||
<span> </span>
|
||||
</p>
|
||||
<p class="wavy">
|
||||
<span> </span>
|
||||
</p>
|
||||
<p class="dotted shadow">
|
||||
<span> </span>
|
||||
</p>
|
||||
<p class="dashed shadow">
|
||||
<span> </span>
|
||||
</p>
|
||||
<p class="wavy shadow">
|
||||
<span> </span>
|
||||
</p>
|
||||
</div>
|
||||
<div style="font-size: 32px;">
|
||||
<p class="dotted">
|
||||
<span> </span>
|
||||
</p>
|
||||
<p class="dashed">
|
||||
<span> </span>
|
||||
</p>
|
||||
<p class="wavy">
|
||||
<span> </span>
|
||||
</p>
|
||||
<p class="dotted relative">
|
||||
<span> </span>
|
||||
</p>
|
||||
<p class="dashed relative">
|
||||
<span> </span>
|
||||
</p>
|
||||
<p class="wavy relative">
|
||||
<span> </span>
|
||||
</p>
|
||||
<p class="dotted">
|
||||
<span> </span>
|
||||
</p>
|
||||
<p class="dashed">
|
||||
<span> </span>
|
||||
</p>
|
||||
<p class="wavy">
|
||||
<span> </span>
|
||||
</p>
|
||||
<p class="dotted shadow">
|
||||
<span> </span>
|
||||
</p>
|
||||
<p class="dashed shadow">
|
||||
<span> </span>
|
||||
</p>
|
||||
<p class="wavy shadow">
|
||||
<span> </span>
|
||||
</p>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,114 @@
|
|||
<style type="text/css">
|
||||
p {
|
||||
margin-left: 11px;
|
||||
padding-left: 11px;
|
||||
}
|
||||
p.dotted span {
|
||||
-moz-text-decoration-style: dotted;
|
||||
}
|
||||
p.dashed span {
|
||||
-moz-text-decoration-style: dashed;
|
||||
}
|
||||
p.wavy span {
|
||||
-moz-text-decoration-style: wavy;
|
||||
}
|
||||
span {
|
||||
text-decoration: underline line-through overline;
|
||||
}
|
||||
p.relative span {
|
||||
position: relative;
|
||||
left: 13px;
|
||||
}
|
||||
|
||||
p.relative2 > span {
|
||||
position: relative;
|
||||
left: 13px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
p.relative2 span span {
|
||||
position: relative;
|
||||
left: -13px;
|
||||
}
|
||||
|
||||
p.shadow {
|
||||
color: transparent;
|
||||
text-shadow: 1em 0.5em black;
|
||||
}
|
||||
</style>
|
||||
<div style="font-size: 16px;">
|
||||
<p class="dotted">
|
||||
<span> </span><span> </span><span> </span><span> </span>
|
||||
</p>
|
||||
<p class="dashed">
|
||||
<span> </span><span> </span><span> </span><span> </span>
|
||||
</p>
|
||||
<p class="wavy">
|
||||
<span> </span><span> </span><span> </span><span> </span>
|
||||
</p>
|
||||
<p class="dotted relative">
|
||||
<span> </span><span> </span><span> </span><span> </span>
|
||||
</p>
|
||||
<p class="dashed relative">
|
||||
<span> </span><span> </span><span> </span><span> </span>
|
||||
</p>
|
||||
<p class="wavy relative">
|
||||
<span> </span><span> </span><span> </span><span> </span>
|
||||
</p>
|
||||
<p class="dotted relative2">
|
||||
<span><span> </span><span> </span><span> </span><span> </span></span>
|
||||
</p>
|
||||
<p class="dashed relative2">
|
||||
<span><span> </span><span> </span><span> </span><span> </span></span>
|
||||
</p>
|
||||
<p class="wavy relative2">
|
||||
<span><span> </span><span> </span><span> </span><span> </span></span>
|
||||
</p>
|
||||
<p class="dotted shadow">
|
||||
<span> </span><span> </span><span> </span><span> </span>
|
||||
</p>
|
||||
<p class="dashed shadow">
|
||||
<span> </span><span> </span><span> </span><span> </span>
|
||||
</p>
|
||||
<p class="wavy shadow">
|
||||
<span> </span><span> </span><span> </span><span> </span>
|
||||
</p>
|
||||
</div>
|
||||
<div style="font-size: 32px;">
|
||||
<p class="dotted">
|
||||
<span> </span><span> </span><span> </span><span> </span>
|
||||
</p>
|
||||
<p class="dashed">
|
||||
<span> </span><span> </span><span> </span><span> </span>
|
||||
</p>
|
||||
<p class="wavy">
|
||||
<span> </span><span> </span><span> </span><span> </span>
|
||||
</p>
|
||||
<p class="dotted relative">
|
||||
<span> </span><span> </span><span> </span><span> </span>
|
||||
</p>
|
||||
<p class="dashed relative">
|
||||
<span> </span><span> </span><span> </span><span> </span>
|
||||
</p>
|
||||
<p class="wavy relative">
|
||||
<span> </span><span> </span><span> </span><span> </span>
|
||||
</p>
|
||||
<p class="dotted relative2">
|
||||
<span><span> </span><span> </span><span> </span><span> </span></span>
|
||||
</p>
|
||||
<p class="dashed relative2">
|
||||
<span><span> </span><span> </span><span> </span><span> </span></span>
|
||||
</p>
|
||||
<p class="wavy relative2">
|
||||
<span><span> </span><span> </span><span> </span><span> </span></span>
|
||||
</p>
|
||||
<p class="dotted shadow">
|
||||
<span> </span><span> </span><span> </span><span> </span>
|
||||
</p>
|
||||
<p class="dashed shadow">
|
||||
<span> </span><span> </span><span> </span><span> </span>
|
||||
</p>
|
||||
<p class="wavy shadow">
|
||||
<span> </span><span> </span><span> </span><span> </span>
|
||||
</p>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,103 @@
|
|||
<!DOCTYPE html>
|
||||
<style type="text/css">
|
||||
p {
|
||||
margin-left: 11px;
|
||||
padding-left: 11px;
|
||||
}
|
||||
p.dotted span {
|
||||
-moz-text-decoration-style: dotted;
|
||||
}
|
||||
p.dashed span {
|
||||
-moz-text-decoration-style: dashed;
|
||||
}
|
||||
p.wavy span {
|
||||
-moz-text-decoration-style: wavy;
|
||||
}
|
||||
span {
|
||||
text-decoration: underline line-through overline;
|
||||
}
|
||||
p.relative {
|
||||
margin-left: 24px;
|
||||
}
|
||||
p.shadow span {
|
||||
position: relative;
|
||||
left: 1em;
|
||||
top: 0.5em;
|
||||
}
|
||||
</style>
|
||||
<div style="font-size: 16px;">
|
||||
<p class="dotted">
|
||||
<span> </span>
|
||||
</p>
|
||||
<p class="dashed">
|
||||
<span> </span>
|
||||
</p>
|
||||
<p class="wavy">
|
||||
<span> </span>
|
||||
</p>
|
||||
<p class="dotted relative">
|
||||
<span> </span>
|
||||
</p>
|
||||
<p class="dashed relative">
|
||||
<span> </span>
|
||||
</p>
|
||||
<p class="wavy relative">
|
||||
<span> </span>
|
||||
</p>
|
||||
<p class="dotted">
|
||||
<span> </span>
|
||||
</p>
|
||||
<p class="dashed">
|
||||
<span> </span>
|
||||
</p>
|
||||
<p class="wavy">
|
||||
<span> </span>
|
||||
</p>
|
||||
<p class="dotted shadow">
|
||||
<span> </span>
|
||||
</p>
|
||||
<p class="dashed shadow">
|
||||
<span> </span>
|
||||
</p>
|
||||
<p class="wavy shadow">
|
||||
<span> </span>
|
||||
</p>
|
||||
</div>
|
||||
<div style="font-size: 32px;">
|
||||
<p class="dotted">
|
||||
<span> </span>
|
||||
</p>
|
||||
<p class="dashed">
|
||||
<span> </span>
|
||||
</p>
|
||||
<p class="wavy">
|
||||
<span> </span>
|
||||
</p>
|
||||
<p class="dotted relative">
|
||||
<span> </span>
|
||||
</p>
|
||||
<p class="dashed relative">
|
||||
<span> </span>
|
||||
</p>
|
||||
<p class="wavy relative">
|
||||
<span> </span>
|
||||
</p>
|
||||
<p class="dotted">
|
||||
<span> </span>
|
||||
</p>
|
||||
<p class="dashed">
|
||||
<span> </span>
|
||||
</p>
|
||||
<p class="wavy">
|
||||
<span> </span>
|
||||
</p>
|
||||
<p class="dotted shadow">
|
||||
<span> </span>
|
||||
</p>
|
||||
<p class="dashed shadow">
|
||||
<span> </span>
|
||||
</p>
|
||||
<p class="wavy shadow">
|
||||
<span> </span>
|
||||
</p>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,115 @@
|
|||
<!DOCTYPE html>
|
||||
<style type="text/css">
|
||||
p {
|
||||
margin-left: 11px;
|
||||
padding-left: 11px;
|
||||
}
|
||||
p.dotted span {
|
||||
-moz-text-decoration-style: dotted;
|
||||
}
|
||||
p.dashed span {
|
||||
-moz-text-decoration-style: dashed;
|
||||
}
|
||||
p.wavy span {
|
||||
-moz-text-decoration-style: wavy;
|
||||
}
|
||||
span {
|
||||
text-decoration: underline line-through overline;
|
||||
}
|
||||
p.relative span {
|
||||
position: relative;
|
||||
left: 13px;
|
||||
}
|
||||
|
||||
p.relative2 > span {
|
||||
position: relative;
|
||||
left: 13px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
p.relative2 span span {
|
||||
position: relative;
|
||||
left: -13px;
|
||||
}
|
||||
|
||||
p.shadow {
|
||||
color: transparent;
|
||||
text-shadow: 1em 0.5em black;
|
||||
}
|
||||
</style>
|
||||
<div style="font-size: 16px;">
|
||||
<p class="dotted">
|
||||
<span> </span><span> </span><span> </span><span> </span>
|
||||
</p>
|
||||
<p class="dashed">
|
||||
<span> </span><span> </span><span> </span><span> </span>
|
||||
</p>
|
||||
<p class="wavy">
|
||||
<span> </span><span> </span><span> </span><span> </span>
|
||||
</p>
|
||||
<p class="dotted relative">
|
||||
<span> </span><span> </span><span> </span><span> </span>
|
||||
</p>
|
||||
<p class="dashed relative">
|
||||
<span> </span><span> </span><span> </span><span> </span>
|
||||
</p>
|
||||
<p class="wavy relative">
|
||||
<span> </span><span> </span><span> </span><span> </span>
|
||||
</p>
|
||||
<p class="dotted relative2">
|
||||
<span><span> </span><span> </span><span> </span><span> </span></span>
|
||||
</p>
|
||||
<p class="dashed relative2">
|
||||
<span><span> </span><span> </span><span> </span><span> </span></span>
|
||||
</p>
|
||||
<p class="wavy relative2">
|
||||
<span><span> </span><span> </span><span> </span><span> </span></span>
|
||||
</p>
|
||||
<p class="dotted shadow">
|
||||
<span> </span><span> </span><span> </span><span> </span>
|
||||
</p>
|
||||
<p class="dashed shadow">
|
||||
<span> </span><span> </span><span> </span><span> </span>
|
||||
</p>
|
||||
<p class="wavy shadow">
|
||||
<span> </span><span> </span><span> </span><span> </span>
|
||||
</p>
|
||||
</div>
|
||||
<div style="font-size: 32px;">
|
||||
<p class="dotted">
|
||||
<span> </span><span> </span><span> </span><span> </span>
|
||||
</p>
|
||||
<p class="dashed">
|
||||
<span> </span><span> </span><span> </span><span> </span>
|
||||
</p>
|
||||
<p class="wavy">
|
||||
<span> </span><span> </span><span> </span><span> </span>
|
||||
</p>
|
||||
<p class="dotted relative">
|
||||
<span> </span><span> </span><span> </span><span> </span>
|
||||
</p>
|
||||
<p class="dashed relative">
|
||||
<span> </span><span> </span><span> </span><span> </span>
|
||||
</p>
|
||||
<p class="wavy relative">
|
||||
<span> </span><span> </span><span> </span><span> </span>
|
||||
</p>
|
||||
<p class="dotted relative2">
|
||||
<span><span> </span><span> </span><span> </span><span> </span></span>
|
||||
</p>
|
||||
<p class="dashed relative2">
|
||||
<span><span> </span><span> </span><span> </span><span> </span></span>
|
||||
</p>
|
||||
<p class="wavy relative2">
|
||||
<span><span> </span><span> </span><span> </span><span> </span></span>
|
||||
</p>
|
||||
<p class="dotted shadow">
|
||||
<span> </span><span> </span><span> </span><span> </span>
|
||||
</p>
|
||||
<p class="dashed shadow">
|
||||
<span> </span><span> </span><span> </span><span> </span>
|
||||
</p>
|
||||
<p class="wavy shadow">
|
||||
<span> </span><span> </span><span> </span><span> </span>
|
||||
</p>
|
||||
</div>
|
||||
|
|
@ -1,3 +1,5 @@
|
|||
== complex-decoration-style-quirks.html complex-decoration-style-quirks-ref.html
|
||||
== complex-decoration-style-standards.html complex-decoration-style-standards-ref.html
|
||||
== decoration-color-quirks.html decoration-color-quirks-ref.html
|
||||
== decoration-color-standards.html decoration-color-standards-ref.html
|
||||
== decoration-style-quirks.html decoration-style-quirks-ref.html
|
||||
|
|
|
|||
|
|
@ -460,6 +460,7 @@ nsTextBoxFrame::DrawText(nsRenderingContext& aRenderingContext,
|
|||
presContext->AppUnitsToGfxUnits(aTextRect.y));
|
||||
gfxFloat width = presContext->AppUnitsToGfxUnits(aTextRect.width);
|
||||
gfxFloat ascentPixel = presContext->AppUnitsToGfxUnits(ascent);
|
||||
gfxFloat xInFrame = PresContext()->AppUnitsToGfxUnits(mTextDrawRect.x);
|
||||
gfxRect dirtyRect(presContext->AppUnitsToGfxUnits(aDirtyRect));
|
||||
|
||||
// Underlines are drawn before overlines, and both before the text
|
||||
|
|
@ -474,15 +475,15 @@ nsTextBoxFrame::DrawText(nsRenderingContext& aRenderingContext,
|
|||
gfxFloat sizePixel = presContext->AppUnitsToGfxUnits(size);
|
||||
if ((decorations & NS_FONT_DECORATION_UNDERLINE) &&
|
||||
underStyle != NS_STYLE_TEXT_DECORATION_STYLE_NONE) {
|
||||
nsCSSRendering::PaintDecorationLine(ctx, dirtyRect, underColor,
|
||||
pt, gfxSize(width, sizePixel),
|
||||
nsCSSRendering::PaintDecorationLine(this, ctx, dirtyRect, underColor,
|
||||
pt, xInFrame, gfxSize(width, sizePixel),
|
||||
ascentPixel, offsetPixel,
|
||||
NS_STYLE_TEXT_DECORATION_LINE_UNDERLINE, underStyle);
|
||||
}
|
||||
if ((decorations & NS_FONT_DECORATION_OVERLINE) &&
|
||||
overStyle != NS_STYLE_TEXT_DECORATION_STYLE_NONE) {
|
||||
nsCSSRendering::PaintDecorationLine(ctx, dirtyRect, overColor,
|
||||
pt, gfxSize(width, sizePixel),
|
||||
nsCSSRendering::PaintDecorationLine(this, ctx, dirtyRect, overColor,
|
||||
pt, xInFrame, gfxSize(width, sizePixel),
|
||||
ascentPixel, ascentPixel,
|
||||
NS_STYLE_TEXT_DECORATION_LINE_OVERLINE, overStyle);
|
||||
}
|
||||
|
|
@ -563,9 +564,9 @@ nsTextBoxFrame::DrawText(nsRenderingContext& aRenderingContext,
|
|||
fontMet->GetStrikeout(offset, size);
|
||||
gfxFloat offsetPixel = presContext->AppUnitsToGfxUnits(offset);
|
||||
gfxFloat sizePixel = presContext->AppUnitsToGfxUnits(size);
|
||||
nsCSSRendering::PaintDecorationLine(ctx, dirtyRect, strikeColor,
|
||||
pt, gfxSize(width, sizePixel), ascentPixel, offsetPixel,
|
||||
NS_STYLE_TEXT_DECORATION_LINE_LINE_THROUGH,
|
||||
nsCSSRendering::PaintDecorationLine(this, ctx, dirtyRect, strikeColor,
|
||||
pt, xInFrame, gfxSize(width, sizePixel), ascentPixel,
|
||||
offsetPixel, NS_STYLE_TEXT_DECORATION_LINE_LINE_THROUGH,
|
||||
strikeStyle);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче