1berry/qtbase
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Draw list bullets/numbers with CSS text color, not palette color

Browse Source 
When CSS has been used to customize the text color, render the bullet
with the same color. This is consistent with web browsers, and with
Qt Quick rendering.

In QTextDocumentLayoutPrivate::drawListItem(), the pen color is the
text color, so use it instead of brush color.

Add a baseline test for lancelot: the background and general text
are customized, then some list items are customized further, and
some of them have colored text spans. Repeat with different styles
of numbered and bullet lists and checklists.

Fixes: QTBUG-2188
Task-number: QTBUG-213
Task-number: QTBUG-57833
Pick-to: 6.5 6.7
Change-Id: I71e84d00172e4b37aef57c8badd2ec43c10113d9
Reviewed-by: Sami Shalayel <sami.shalayel@qt.io>
This commit is contained in:
Shawn Rutledge 2024-04-12 07:50:30 -04:00
parent a833d5682a
commit 7f48c79627
2 changed files with 71 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/gui/text/qtextdocumentlayout.cpp
View File

@ -2216,17 +2216,15 @@ void QTextDocumentLayoutPrivate::drawListItem(const QPointF &offset, QPainter *p
}
case QTextListFormat::ListSquare:
if (!marker)
painter->fillRect(r, brush);
painter->fillRect(r, painter->pen().brush());
break;
case QTextListFormat::ListCircle:
if (!marker) {
painter->setPen(QPen(brush, 0));
if (!marker)
painter->drawEllipse(r.translated(0.5, 0.5)); // pixel align for sharper rendering
}
break;
case QTextListFormat::ListDisc:
if (!marker) {
painter->setBrush(brush);
painter->setBrush(painter->pen().brush());
painter->setPen(Qt::NoPen);
painter->drawEllipse(r);
}

68
tests/baseline/text/data/colored_list.html Normal file
View File

@ -0,0 +1,68 @@
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">
<html>
<head>
<style type="text/css">
p, li { white-space: pre-wrap; }
hr { height: 1px; border-width: 0; }
li.unchecked::marker { content: "\2610"; }
li.checked::marker { content: "\2612"; }
body { background-color: #111155; color: #ffffff; }
</style>
</head>
<body>
<ul>
<li>disc</li>
<li style=" color:#a58d47;">bronze</li>
<li style=" color:red;"><span style=" color:#ffcdb9;">red bullet, pink text</span></li>
<li style=" color:#dddddd;" class="checked">checked</li>
<li style=" color:#dddddd;" class="unchecked">unchecked</li>
</ul>
<ul type="circle">
<li>circle</li>
<li style=" color:#dddddd;">silver</li>
<li style=" color:lightgrey;"><span style=" color:#ffcdb9;">grey bullet, pink text</span></li>
<li style=" color:#dddddd;" class="checked">checked</li>
<li style=" color:#dddddd;" class="unchecked">unchecked</li>
</ul>
<ul type="square">
<li style=" color:#ffffff;">square</li>
<li style=" color:#fceebb;">gold</li>
<li style=" color:yellow;"><span style=" color:#ffcdb9;">yellow bullet, pink text</span></li>
<li style=" color:#dddddd;" class="checked">checked</li>
<li style=" color:#dddddd;" class="unchecked">unchecked</li>
</ul>
<ol>
<li>decimal</li>
<li style=" color:#a58d47;">bronze decimal</li>
<li style=" color:red;"><span style=" color:#ffcdb9;">red number, pink text</span></li>
</ol>
<ol type="A">
<li>uppercase</li>
<li style=" color:#a58d47;">bronze uppercase</li>
<li style=" color:red;"><span style=" color:#ffcdb9;">red letter, pink text</span></li>
</ol>
<ol type="a">
<li>lowercase</li>
<li style=" color:#a58d47;">bronze lowercase</li>
<li style=" color:red;"><span style=" color:#ffcdb9;">red letter, pink text</span></li>
</ol>
<ol type="i">
<li>lower roman</li>
<li style=" color:#a58d47;">bronze roman</li>
<li style=" color:red;"><span style=" color:#ffcdb9;">red number, pink text</span></li>
</ol>
<ol type="I">
<li>upper roman</li>
<li style=" color:#a58d47;">bronze roman</li>
<li style=" color:red;"><span style=" color:#ffcdb9;">red number, pink text</span></li>
</ol>
</body>
</html>