Skip to content

Commit 7f48c79

Browse files
ec1oudec1oud
committed
Draw list bullets/numbers with CSS text color, not palette color
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>
1 parent a833d56 commit 7f48c79

File tree

2 files changed

+71
-5
lines changed

2 files changed

+71
-5
lines changed

‎src/gui/text/qtextdocumentlayout.cpp

+3-5
Original file line numberDiff line numberDiff line change
@@ -2216,17 +2216,15 @@ void QTextDocumentLayoutPrivate::drawListItem(const QPointF &offset, QPainter *p
22162216
}
22172217
case QTextListFormat::ListSquare:
22182218
if (!marker)
2219-
painter->fillRect(r, brush);
2219+
painter->fillRect(r, painter->pen().brush());
22202220
break;
22212221
case QTextListFormat::ListCircle:
2222-
if (!marker) {
2223-
painter->setPen(QPen(brush, 0));
2222+
if (!marker)
22242223
painter->drawEllipse(r.translated(0.5, 0.5)); // pixel align for sharper rendering
2225-
}
22262224
break;
22272225
case QTextListFormat::ListDisc:
22282226
if (!marker) {
2229-
painter->setBrush(brush);
2227+
painter->setBrush(painter->pen().brush());
22302228
painter->setPen(Qt::NoPen);
22312229
painter->drawEllipse(r);
22322230
}

‎tests/baseline/text/data/colored_list.html

+68
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">
2+
<html>
3+
<head>
4+
<style type="text/css">
5+
p, li { white-space: pre-wrap; }
6+
hr { height: 1px; border-width: 0; }
7+
li.unchecked::marker { content: "\2610"; }
8+
li.checked::marker { content: "\2612"; }
9+
body { background-color: #111155; color: #ffffff; }
10+
</style>
11+
</head>
12+
<body>
13+
14+
<ul>
15+
<li>disc</li>
16+
<li style=" color:#a58d47;">bronze</li>
17+
<li style=" color:red;"><span style=" color:#ffcdb9;">red bullet, pink text</span></li>
18+
<li style=" color:#dddddd;" class="checked">checked</li>
19+
<li style=" color:#dddddd;" class="unchecked">unchecked</li>
20+
</ul>
21+
22+
<ul type="circle">
23+
<li>circle</li>
24+
<li style=" color:#dddddd;">silver</li>
25+
<li style=" color:lightgrey;"><span style=" color:#ffcdb9;">grey bullet, pink text</span></li>
26+
<li style=" color:#dddddd;" class="checked">checked</li>
27+
<li style=" color:#dddddd;" class="unchecked">unchecked</li>
28+
</ul>
29+
30+
<ul type="square">
31+
<li style=" color:#ffffff;">square</li>
32+
<li style=" color:#fceebb;">gold</li>
33+
<li style=" color:yellow;"><span style=" color:#ffcdb9;">yellow bullet, pink text</span></li>
34+
<li style=" color:#dddddd;" class="checked">checked</li>
35+
<li style=" color:#dddddd;" class="unchecked">unchecked</li>
36+
</ul>
37+
38+
<ol>
39+
<li>decimal</li>
40+
<li style=" color:#a58d47;">bronze decimal</li>
41+
<li style=" color:red;"><span style=" color:#ffcdb9;">red number, pink text</span></li>
42+
</ol>
43+
44+
<ol type="A">
45+
<li>uppercase</li>
46+
<li style=" color:#a58d47;">bronze uppercase</li>
47+
<li style=" color:red;"><span style=" color:#ffcdb9;">red letter, pink text</span></li>
48+
</ol>
49+
50+
<ol type="a">
51+
<li>lowercase</li>
52+
<li style=" color:#a58d47;">bronze lowercase</li>
53+
<li style=" color:red;"><span style=" color:#ffcdb9;">red letter, pink text</span></li>
54+
</ol>
55+
56+
<ol type="i">
57+
<li>lower roman</li>
58+
<li style=" color:#a58d47;">bronze roman</li>
59+
<li style=" color:red;"><span style=" color:#ffcdb9;">red number, pink text</span></li>
60+
</ol>
61+
62+
<ol type="I">
63+
<li>upper roman</li>
64+
<li style=" color:#a58d47;">bronze roman</li>
65+
<li style=" color:red;"><span style=" color:#ffcdb9;">red number, pink text</span></li>
66+
</ol>
67+
</body>
68+
</html>

0 commit comments

Comments
 (0)