Add site-specific quirk for Wikipedia in dark mode

Fixes #6260
author: Florian Bruhin <me@the-compiler.org> 2021-03-12 10:27:51 +0100
committer: Florian Bruhin <me@the-compiler.org> 2021-03-12 10:29:22 +0100
commit: 5518ead68d8b83260914401c9d4bef0243508721 (patch)
tree: 08bf7f0348c28b6b1f224b5ae8264a6f05d2cec6
parent: e833ee301b0bb96f4a9df28e2605bf4afbc1cca1 (diff)
download: qutebrowser-5518ead68d8b83260914401c9d4bef0243508721.tar.gz
qutebrowser-5518ead68d8b83260914401c9d4bef0243508721.zip
5 files changed, 195 insertions, 3 deletions
diff --git a/doc/changelog.asciidoc b/doc/changelog.asciidoc
index 7122716c9..3427a3757 100644
--- a/doc/changelog.asciidoc
+++ b/doc/changelog.asciidoc
@@ -122,6 +122,13 @@ Fixed
 - The `hist_importer.py` script didn't work correctly after qutebrowser v2.0.0
   and resulted in a history database qutebrowser couldn't read properly. It now
   works properly again.
+- With certain QtWebEngine versions (5.15.0 based on Chromium 80 and 5.15.3
+  based on Chromium 87), Chromium's dark mode doesn't invert certain SVG images,
+  even with `colors.wegpage.darkmode.policy.images` set to `smart`.
+  Most notably, this causes formulae on Wikipedia to display black on (almost)
+  black. If `content.site_specific_quirks` is enabled, qutebrowser now injects
+  some CSS as a workaround, which inverts all math formula images on Wikipedia
+  (and potentially other sites, if they use the same CSS class).
 
 [[v2.0.2]]
 v2.0.2 (2021-02-04)
diff --git a/qutebrowser/browser/shared.py b/qutebrowser/browser/shared.py
index 94332ffcb..cfff01836 100644
--- a/qutebrowser/browser/shared.py
+++ b/qutebrowser/browser/shared.py
@@ -30,9 +30,9 @@ from PyQt5.QtCore import QUrl
 
 from qutebrowser.config import config
 from qutebrowser.utils import (usertypes, message, log, objreg, jinja, utils,
-                               qtutils)
+                               qtutils, version)
 from qutebrowser.mainwindow import mainwindow
-from qutebrowser.misc import guiprocess
+from qutebrowser.misc import guiprocess, objects
 
 
 class CallSuper(Exception):
@@ -298,6 +298,15 @@ def get_user_stylesheet(searching=False):
     if setting == 'never' or setting == 'when-searching' and not searching:
         css += '\nhtml > ::-webkit-scrollbar { width: 0px; height: 0px; }'
 
+    if (objects.backend == usertypes.Backend.QtWebEngine and
+            version.qtwebengine_versions().chromium_major in [80, 87] and
+            config.val.colors.webpage.darkmode.enabled and
+            config.val.colors.webpage.darkmode.policy.images == 'smart' and
+            config.val.content.site_specific_quirks):
+        # WORKAROUND for MathML-output on Wikipedia being black on black.
+        # See https://bugs.chromium.org/p/chromium/issues/detail?id=1126606
+        css += '\nimg.mwe-math-fallback-image-inline { filter: invert(100%); }'
+
     return css
 
 
diff --git a/tests/end2end/data/darkmode/mathml.html b/tests/end2end/data/darkmode/mathml.html
new file mode 100644
index 000000000..4a7cd548c
--- /dev/null
+++ b/tests/end2end/data/darkmode/mathml.html
@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8">
+        <title>MathML-like SVG</title>
+    </head>
+    <body style="margin: 0">
+        <!--
+        Image based on: https://en.wikipedia.org/wiki/Pythagorean_theorem
+        with a black square added for testing.
+        -->
+        <img class="mwe-math-fallback-image-inline" src="mathml.svg" alt="Pythagorean theorem">
+    </body>
+</html>
diff --git a/tests/end2end/data/darkmode/mathml.svg b/tests/end2end/data/darkmode/mathml.svg
new file mode 100644
index 000000000..30b03ffac
--- /dev/null
+++ b/tests/end2end/data/darkmode/mathml.svg
@@ -0,0 +1,159 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:xlink="http://www.w3.org/1999/xlink"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="12.983ex"
+   height="2.843ex"
+   style="vertical-align: -0.505ex;"
+   viewBox="0 -1006.6 5589.7 1223.9"
+   role="img"
+   focusable="false"
+   aria-labelledby="MathJax-SVG-1-Title"
+   version="1.1"
+   id="svg36"
+   sodipodi:docname="mathml.svg"
+   inkscape:version="1.0.2 (e86c870879, 2021-01-15)">
+  <metadata
+     id="metadata40">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title>{\displaystyle a^{2}+b^{2}=c^{2}.}</dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <sodipodi:namedview
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1"
+     objecttolerance="10"
+     gridtolerance="10"
+     guidetolerance="10"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:window-width="944"
+     inkscape:window-height="1036"
+     id="namedview38"
+     showgrid="false"
+     inkscape:zoom="0.27282322"
+     inkscape:cx="1686.0735"
+     inkscape:cy="602.78657"
+     inkscape:window-x="964"
+     inkscape:window-y="22"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="svg36" />
+  <title
+     id="MathJax-SVG-1-Title">{\displaystyle a^{2}+b^{2}=c^{2}.}</title>
+  <defs
+     aria-hidden="true"
+     id="defs10">
+    <path
+       stroke-width="1"
+       id="E1-MJMATHI-61"
+       d="M33 157Q33 258 109 349T280 441Q331 441 370 392Q386 422 416 422Q429 422 439 414T449 394Q449 381 412 234T374 68Q374 43 381 35T402 26Q411 27 422 35Q443 55 463 131Q469 151 473 152Q475 153 483 153H487Q506 153 506 144Q506 138 501 117T481 63T449 13Q436 0 417 -8Q409 -10 393 -10Q359 -10 336 5T306 36L300 51Q299 52 296 50Q294 48 292 46Q233 -10 172 -10Q117 -10 75 30T33 157ZM351 328Q351 334 346 350T323 385T277 405Q242 405 210 374T160 293Q131 214 119 129Q119 126 119 118T118 106Q118 61 136 44T179 26Q217 26 254 59T298 110Q300 114 325 217T351 328Z" />
+    <path
+       stroke-width="1"
+       id="E1-MJMAIN-32"
+       d="M109 429Q82 429 66 447T50 491Q50 562 103 614T235 666Q326 666 387 610T449 465Q449 422 429 383T381 315T301 241Q265 210 201 149L142 93L218 92Q375 92 385 97Q392 99 409 186V189H449V186Q448 183 436 95T421 3V0H50V19V31Q50 38 56 46T86 81Q115 113 136 137Q145 147 170 174T204 211T233 244T261 278T284 308T305 340T320 369T333 401T340 431T343 464Q343 527 309 573T212 619Q179 619 154 602T119 569T109 550Q109 549 114 549Q132 549 151 535T170 489Q170 464 154 447T109 429Z" />
+    <path
+       stroke-width="1"
+       id="E1-MJMAIN-2B"
+       d="M56 237T56 250T70 270H369V420L370 570Q380 583 389 583Q402 583 409 568V270H707Q722 262 722 250T707 230H409V-68Q401 -82 391 -82H389H387Q375 -82 369 -68V230H70Q56 237 56 250Z" />
+    <path
+       stroke-width="1"
+       id="E1-MJMATHI-62"
+       d="M73 647Q73 657 77 670T89 683Q90 683 161 688T234 694Q246 694 246 685T212 542Q204 508 195 472T180 418L176 399Q176 396 182 402Q231 442 283 442Q345 442 383 396T422 280Q422 169 343 79T173 -11Q123 -11 82 27T40 150V159Q40 180 48 217T97 414Q147 611 147 623T109 637Q104 637 101 637H96Q86 637 83 637T76 640T73 647ZM336 325V331Q336 405 275 405Q258 405 240 397T207 376T181 352T163 330L157 322L136 236Q114 150 114 114Q114 66 138 42Q154 26 178 26Q211 26 245 58Q270 81 285 114T318 219Q336 291 336 325Z" />
+    <path
+       stroke-width="1"
+       id="E1-MJMAIN-3D"
+       d="M56 347Q56 360 70 367H707Q722 359 722 347Q722 336 708 328L390 327H72Q56 332 56 347ZM56 153Q56 168 72 173H708Q722 163 722 153Q722 140 707 133H70Q56 140 56 153Z" />
+    <path
+       stroke-width="1"
+       id="E1-MJMATHI-63"
+       d="M34 159Q34 268 120 355T306 442Q362 442 394 418T427 355Q427 326 408 306T360 285Q341 285 330 295T319 325T330 359T352 380T366 386H367Q367 388 361 392T340 400T306 404Q276 404 249 390Q228 381 206 359Q162 315 142 235T121 119Q121 73 147 50Q169 26 205 26H209Q321 26 394 111Q403 121 406 121Q410 121 419 112T429 98T420 83T391 55T346 25T282 0T202 -11Q127 -11 81 37T34 159Z" />
+    <path
+       stroke-width="1"
+       id="E1-MJMAIN-2E"
+       d="M78 60Q78 84 95 102T138 120Q162 120 180 104T199 61Q199 36 182 18T139 0T96 17T78 60Z" />
+  </defs>
+  <g
+     stroke="currentColor"
+     fill="currentColor"
+     stroke-width="0"
+     transform="matrix(1 0 0 -1 0 0)"
+     aria-hidden="true"
+     id="g34">
+    <use
+       xlink:href="#E1-MJMATHI-61"
+       x="0"
+       y="0"
+       id="use12" />
+    <use
+       transform="scale(0.707)"
+       xlink:href="#E1-MJMAIN-32"
+       x="748"
+       y="583"
+       id="use14" />
+    <use
+       xlink:href="#E1-MJMAIN-2B"
+       x="1205"
+       y="0"
+       id="use16" />
+    <g
+       transform="translate(2206,0)"
+       id="g22">
+      <use
+         xlink:href="#E1-MJMATHI-62"
+         x="0"
+         y="0"
+         id="use18" />
+      <use
+         transform="scale(0.707)"
+         xlink:href="#E1-MJMAIN-32"
+         x="607"
+         y="583"
+         id="use20" />
+    </g>
+    <use
+       xlink:href="#E1-MJMAIN-3D"
+       x="3367"
+       y="0"
+       id="use24" />
+    <g
+       transform="translate(4423,0)"
+       id="g30">
+      <use
+         xlink:href="#E1-MJMATHI-63"
+         x="0"
+         y="0"
+         id="use26" />
+      <use
+         transform="scale(0.707)"
+         xlink:href="#E1-MJMAIN-32"
+         x="613"
+         y="583"
+         id="use28" />
+    </g>
+    <use
+       xlink:href="#E1-MJMAIN-2E"
+       x="5311"
+       y="0"
+       id="use32" />
+  </g>
+  <rect
+     style="fill:#000000"
+     id="rect865"
+     width="338.88928"
+     height="316.48901"
+     x="2.5373409"
+     y="-1004.8583" />
+</svg>
diff --git a/tests/end2end/test_invocations.py b/tests/end2end/test_invocations.py
index 01014618f..f55bfbd51 100644
--- a/tests/end2end/test_invocations.py
+++ b/tests/end2end/test_invocations.py
@@ -645,6 +645,8 @@ def test_cookies_store(quteproc_new, request, short_tmpdir, store):
     ),
     ('yellow', 'lightness-hsl', {None: testutils.Color(204, 204, 0)}),
     ('yellow', 'brightness-rgb', {None: testutils.Color(0, 0, 204)}),
+
+    ('mathml', None, {None: testutils.Color(255, 255, 255)}),
 ])
 def test_dark_mode(webengine_versions, quteproc_new, request,
                    filename, algorithm, colors):
@@ -654,8 +656,9 @@ def test_dark_mode(webengine_versions, quteproc_new, request,
     args = _base_args(request.config) + [
         '--temp-basedir',
         '-s', 'colors.webpage.darkmode.enabled', 'true',
-        '-s', 'colors.webpage.darkmode.algorithm', algorithm,
     ]
+    if algorithm is not None:
+        args += ['-s', 'colors.webpage.darkmode.algorithm', algorithm]
     quteproc_new.start(args)
 
     ver = webengine_versions.webengine
author	Florian Bruhin <me@the-compiler.org>	2021-03-12 10:27:51 +0100
committer	Florian Bruhin <me@the-compiler.org>	2021-03-12 10:29:22 +0100
commit	5518ead68d8b83260914401c9d4bef0243508721 (patch)
tree	08bf7f0348c28b6b1f224b5ae8264a6f05d2cec6
parent	e833ee301b0bb96f4a9df28e2605bf4afbc1cca1 (diff)
download	qutebrowser-5518ead68d8b83260914401c9d4bef0243508721.tar.gz qutebrowser-5518ead68d8b83260914401c9d4bef0243508721.zip