Backport TestDox HTML improvements

Author: sebastianbergmann

ChangeLog-9.6.md

@@ -4,6 +4,10 @@ All notable changes of the PHPUnit 9.6 release series are documented in this fil
 
 ## [9.6.5] - 2023-MM-DD
 
+### Changed
+
+* Backported the HTML and CSS improvements made to the `--testdox-html` from PHPUnit 10
+
 ### Fixed
 
 * [#5205](https://github.com/sebastianbergmann/phpunit/issues/5205): Wrong default value for optional parameter of `PHPUnit\Util\Test::parseTestMethodAnnotations()` causes `ReflectionException`

src/Util/TestDox/HtmlResultPrinter.php

@@ -31,24 +31,46 @@ final class HtmlResultPrinter extends ResultPrinter
                 text-rendering: optimizeLegibility;
                 font-variant-ligatures: common-ligatures;
                 font-kerning: normal;
-                margin-left: 2em;
-                background-color: #ffffff;
-                color: #000000;
+                margin-left: 2rem;
+                background-color: #fff;
+                color: #000;
             }
 
             body > ul > li {
                 font-family: Source Serif Pro, PT Sans, Trebuchet MS, Helvetica, Arial;
-                font-size: 2em;
+                font-size: larger;
             }
 
             h2 {
                 font-family: Tahoma, Helvetica, Arial;
-                font-size: 3em;
+                font-size: larger;
+                margin: 0;
+                padding: 0.5rem 0;
             }
 
             ul {
                 list-style: none;
-                margin-bottom: 1em;
+                margin: 0;
+                padding: 0;
+                margin-bottom: 2rem;
+                padding-left: 1rem;
+                text-indent: -1rem;
+            }
+
+            .success:before {
+                color: #4e9a06;
+                content: '✓';
+                padding-right: 0.5rem;
+            }
+
+            .defect {
+                color: #a40000;
+            }
+
+            .defect:before {
+                color: #a40000;
+                content: '✗';
+                padding-right: 0.5rem;
             }
         </style>
     </head>
@@ -60,7 +82,7 @@ final class HtmlResultPrinter extends ResultPrinter
      */
     private const CLASS_HEADER = <<<'EOT'
 
-        <h2 id="%s">%s</h2>
+        <h2>%s</h2>
         <ul>
 
 EOT;
@@ -101,7 +123,6 @@ protected function startClass(string $name): void
         $this->write(
             sprintf(
                 self::CLASS_HEADER,
-                $name,
                 $this->currentTestClassPrettified
             )
         );
@@ -114,9 +135,8 @@ protected function onTest(string $name, bool $success = true): void
     {
         $this->write(
             sprintf(
-                "            <li style=\"color: %s;\">%s %s</li>\n",
-                $success ? '#555753' : '#ef2929',
-                $success ? '✓' : '❌',
+                "            <li class=\"%s\">%s</li>\n",
+                $success ? 'success' : 'defect',
                 $name
             )
         );

tests/end-to-end/logging/testdox-html.phpt

@@ -23,34 +23,56 @@ PHPUnit %s by Sebastian Bergmann and contributors.
                 text-rendering: optimizeLegibility;
                 font-variant-ligatures: common-ligatures;
                 font-kerning: normal;
-                margin-left: 2em;
-                background-color: #ffffff;
-                color: #000000;
+                margin-left: 2rem;
+                background-color: #fff;
+                color: #000;
             }
 
             body > ul > li {
                 font-family: Source Serif Pro, PT Sans, Trebuchet MS, Helvetica, Arial;
-                font-size: 2em;
+                font-size: larger;
             }
 
             h2 {
                 font-family: Tahoma, Helvetica, Arial;
-                font-size: 3em;
+                font-size: larger;
+                margin: 0;
+                padding: 0.5rem 0;
             }
 
             ul {
                 list-style: none;
-                margin-bottom: 1em;
+                margin: 0;
+                padding: 0;
+                margin-bottom: 2rem;
+                padding-left: 1rem;
+                text-indent: -1rem;
+            }
+
+            .success:before {
+                color: #4e9a06;
+                content: '✓';
+                padding-right: 0.5rem;
+            }
+
+            .defect {
+                color: #a40000;
+            }
+
+            .defect:before {
+                color: #a40000;
+                content: '✗';
+                padding-right: 0.5rem;
             }
         </style>
     </head>
     <body>
 
-        <h2 id="PHPUnit\TestFixture\BankAccountTest">Bank Account (PHPUnit\TestFixture\BankAccount)</h2>
+        <h2>Bank Account (PHPUnit\TestFixture\BankAccount)</h2>
         <ul>
-...                                                                 3 / 3 (100%)            <li style="color: #555753;">✓ Balance is initially zero</li>
-            <li style="color: #555753;">✓ Balance cannot become negative</li>
-            <li style="color: #555753;">✓ Balance cannot become negative</li>
+...                                                                 3 / 3 (100%)            <li class="success">Balance is initially zero</li>
+            <li class="success">Balance cannot become negative</li>
+            <li class="success">Balance cannot become negative</li>
         </ul>
     </body>
 </html>