option-display-none-computed-style.html

<!DOCTYPE html>
<script src="../../../resources/testharness.js"></script>
<script src="../../../resources/testharnessreport.js"></script>
<style>
    option, optgroup { color: red }
    .green { color: green }
</style>
<div style="display:none">
    <option id="opt"></option>
</div>
<div style="display:none">
    <optgroup id="optgroup"></optgroup>
</div>
<div style="display:none">
    <optgroup>
        <option id="optingroup"></option>
    </optgroup>
</div>
<script>
    test(() => assert_equals(getComputedStyle(opt).color, "rgb(255, 0, 0)", "Option color was not red before change."), "Option color before change.");
    test(() => assert_equals(getComputedStyle(optgroup).color, "rgb(255, 0, 0)", "Optgroup color was not red before change."), "Optgroup color before change.");
    test(() => assert_equals(getComputedStyle(optingroup).color, "rgb(255, 0, 0)", "Option in optgroup color was not red before change."), "Option in optgroup color before change.");
    test(() => {
        opt.className = "green";
        assert_equals(getComputedStyle(opt).color, "rgb(0, 128, 0)", "Option color was not green after change.");
    }, "Option color after class change.");
    test(() => {
        optgroup.className = "green";
        assert_equals(getComputedStyle(optgroup).color, "rgb(0, 128, 0)", "Optgroup color was not green after change.");
    }, "Optgroup color after class change.");
    test(() => {
        optingroup.className = "green";
        assert_equals(getComputedStyle(optingroup).color, "rgb(0, 128, 0)", "Option in optgroup color was not green after change.");
    }, "Option in optgroup color after class change.");
</script>
chromium/third_party/blink/web_tests/fast/forms/select/option-display-none-computed-style.html
