Skip to content

css.types.color.system-color - Incorrect support information for Mark, MarkText and ButtonBorder in Chromium-based browsers #22587

@mlaunois

Description

@mlaunois

What type of issue is this?

Incorrect support data (example: BrowserX says "86" but support was added in "40")

What information was incorrect, unhelpful, or incomplete?

Mark, MarkText and ButtonBorder are indicated as unsupported (as color names) by Chromium-based browsers (Google Chrome, Microsoft Edge, Opera, etc.)

What browsers does this problem apply to, if applicable?

Chromium (Chrome, Edge 79+, Opera, Samsung Internet)

What did you expect to see?

Chromium 101 seems to support ButtonBorder, and Chromium 102 additionally supports Mark and MarkText. So Chrome 102, Edge 102 and CR102-based Opera 88 and later should be indicated as supported. Chrome 101, Edge 101 and Opera 87 should indicate support for ButtonBorder in some other way (as "partially supported" or in a separate entry for ButtonBorder)

Did you test this? If so, how?

Tested on Chromium 100, 101, 102 (Windows 7), Edge 109 (Windows 8.1) and 124 (Windows 10), locally (via a sample page) and on wpt.live

Can you link to any release notes, bugs, pull requests, or MDN pages related to this?

Chromium issue 40823530 (previously bug 1299441), and related commits for ButtonBorder (3494696) and for Mark and MarkText (3536909)

Do you have anything more you want to share?

test.html on Chromium 100
test.html on Chromium 101
test.html on Chromium 102
test.html on Edge 124 (Canary)

The source code for the test.html page:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Mark(Text) color name test</title>
        <style>
            body {
                background: Mark;
                color: MarkText;
                font: 32pt system-ui;
            }
            #button-border {
                background: ButtonBorder;
                color: white;
                margin: 0.5em;
                padding: 0.5em;
            }
            #debug {
                font: 1rem monospace;
                overflow-wrap: anywhere;
            }
        </style>
    </head>
    <body>
        Placeholder test
        
        <div id="button-border">
            Button border
        </div>
        <div id="debug"></div>
    </body>
    <script>
        document.getElementById("debug").textContent = "navigator.userAgentData = " + JSON.stringify(navigator.userAgentData);
    </script>
</html>

MDN URL

https://developer.mozilla.org/en-US/docs/Web/CSS/system-color

MDN metadata

MDN page report details
  • Query: css.types.color.system-color
  • Report started: 2024-03-10T13:15:25.143Z

Metadata

Metadata

Assignees

Labels

data:cssCompat data for CSS features. https://developer.mozilla.org/docs/Web/CSS

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions