Ladybird: text-align not working in media rule

Open abdelfetah18 opened this issue 1 year ago • 1 comments

text-align is not working inside media rule,but color and font-weight are functioning correctly

Expected Result (Chrome): Screenshot_2024-02-27_13_59_25

LadyBird: Screenshot_2024-02-27_13_59_12

HTML Code:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .text-center {
            text-align: center;
            font-weight: 100;
            color: black;
        }

        @media (min-width: 1024px) {
            .lg\:text-start {
                color: red;
                text-align: start;
                font-weight: bold;
            }
        }
    </style>
</head>

<body>
    <div class="text-center lg:text-start">
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's
        standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make
        a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting,
        remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing
        Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions
        of Lorem Ipsum.
    </div>
</body>

</html>

Feb 27 '24 20:02 abdelfetah18

Thanks for the report! To simplify it a bit, we actually just don't support text-align: start. The current supported values are here:

https://github.com/SerenityOS/serenity/blob/c7c4987967fc7081ade8fab38b37b0405cea9743/Userland/Libraries/LibWeb/CSS/Enums.json#L364-L372

So we're missing start, end, match-parent and justify-all from Text Level 3.

Feb 27 '24 20:02 AtkinsSJ