wpt / css / css-scrollbars / scrollbar-width-parsing.html

Status: PASS | Duration: 61ms | Subtests: 15/15 | Open test on wpt.live | wpt.fyi

Data from commit:
dc9e62f Box the per-node transform to shrink ElementData (#796) (2026-09-02)

SubtestStatusMessage
e.style['scrollbar-width'] = "auto" should set the property valuePASS
e.style['scrollbar-width'] = "thin" should set the property valuePASS
e.style['scrollbar-width'] = "none" should set the property valuePASS
e.style['scrollbar-width'] = "" should not set the property valuePASS
e.style['scrollbar-width'] = "auto none" should not set the property valuePASS
e.style['scrollbar-width'] = "thin auto" should not set the property valuePASS
e.style['scrollbar-width'] = "none thin" should not set the property valuePASS
e.style['scrollbar-width'] = "auto thin none" should not set the property valuePASS
e.style['scrollbar-width'] = "tiny" should not set the property valuePASS
e.style['scrollbar-width'] = "enormous" should not set the property valuePASS
e.style['scrollbar-width'] = "12px" should not set the property valuePASS
e.style['scrollbar-width'] = "3em" should not set the property valuePASS
e.style['scrollbar-width'] = "20%" should not set the property valuePASS
e.style['scrollbar-width'] = "#FF0000" should not set the property valuePASS
e.style['scrollbar-width'] = "red green" should not set the property valuePASS

/css/css-scrollbars/scrollbar-width-parsing.html

<!doctype html>
<meta charset="utf-8">
<title>CSS Overflow: parsing scrollbar-width declarations</title>
<link rel="author" title="Felipe Erias Morandeira" href="mailto:felipeerias@gmail.com"/>
<link rel="help" href="https://drafts.csswg.org/css-scrollbars/"/>
<meta name="assert" content="Parsing scrollbar-width declarations">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/parsing-testcommon.js"></script>

<script>

    test_valid_value("scrollbar-width", "auto");
    test_valid_value("scrollbar-width", "thin");
    test_valid_value("scrollbar-width", "none");

    test_invalid_value("scrollbar-width", "");
    test_invalid_value("scrollbar-width", "auto none");
    test_invalid_value("scrollbar-width", "thin auto");
    test_invalid_value("scrollbar-width", "none thin");
    test_invalid_value("scrollbar-width", "auto thin none");
    test_invalid_value("scrollbar-width", "tiny");
    test_invalid_value("scrollbar-width", "enormous");
    test_invalid_value("scrollbar-width", "12px");
    test_invalid_value("scrollbar-width", "3em");
    test_invalid_value("scrollbar-width", "20%");
    test_invalid_value("scrollbar-width", "#FF0000");
    test_invalid_value("scrollbar-width", "red green");

</script>