Order of applying styles

babaduk47 commented 1 week ago

Guidelines

[X] I understand that if I fail to adhere to contribution guidelines and/or fail to provide all required details, this issue may be closed without review.

Description of the bug

The order in which styles are applied is affected by the class name:

I've provided 2 examples that demonstrate this

Example 1:

<div class="text-b text-a">Foo</div>

Expected output:

color: red;
background-color: blue;
text-transform: uppercase;
text-decoration: line-through;

Actual output:

color: green;
background-color: black;
text-transform: uppercase;
text-decoration: line-through;

Since text-decoration: line-through was applied, this means that text-a was applied first and then text-b

But if we rename the text-a class to text-c, we will get the expected result

Example 2:

<div class="text-b text-c">Foo</div>

Actual output:

color: red;
background-color: blue;
text-transform: uppercase;
text-decoration: line-through;

It seems that the order in which classes are applied is affected by alphabetical order.

Note: If you render html in a browser, this problem does not occur.

mPDF version

v8.2.4

PHP Version and environment (server type, cli provider etc., enclosing libraries and their respective versions)

PHP 7.4.33 (cli) (built: Sep 27 2024 12:56:02) ( NTS ) and PHP 8.3.12 (cli) (built: Sep 24 2024 18:08:04) (NTS)

Reproducible PHP+CSS+HTML snippet suffering by the error

First testcase:

<?php

require __DIR__ . '/vendor/autoload.php';

$mpdf = new \Mpdf\Mpdf([
    'mode' => 'utf-8',
    'format' => 'A4',
]);

$html = <<<HTML
<html lang="en">
    <head>
        <title>Testcase</title>
    </head>
    <style>
        div {font-size: 108px;}

        .text-b {
            background-color: black;
            text-transform: uppercase;
            color: green;
        }

        .text-a {
            background-color: blue;
            color: red;
            text-decoration: line-through;
        }
    </style>
    <body>
        <div id="root">
            <div class="text-b text-a">Foo</div>
            <hr>
            <div class="text-a text-b">Bar</div>
        </div>
    </body>
</html>
HTML;

$mpdf->WriteHTML($html);
$mpdf->Output('test_b_a.pdf', 'F');

Second testcase:

<?php

require __DIR__ . '/vendor/autoload.php';

$mpdf = new \Mpdf\Mpdf([
    'mode' => 'utf-8',
    'format' => 'A4',
]);

$html = <<<HTML
<html lang="en">
    <head>
        <title>Testcase</title>
    </head>
    <style>
        div {font-size: 108px;}

        .text-b {
            background-color: black;
            text-transform: uppercase;
            color: green;
        }

        .text-c {
            background-color: blue;
            color: red;
            text-decoration: line-through;
        }
    </style>
    <body>
        <div id="root">
            <div class="text-b text-c">Foo</div>
            <hr>
            <div class="text-c text-b">Bar</div>
        </div>
    </body>
</html>
HTML;

$mpdf->WriteHTML($html);
$mpdf->Output('test_b_c.pdf', 'F');

babaduk47 commented 6 days ago

It looks like the problem is in Arrays::allUniqueSortedCombinations:41 - the order of classes changes there

jakejackson1 commented 20 hours ago

mpdf / mpdf