input type="text" にpatternを指定してもrequiredでないなら空のとき検証成功する

CSSで検証成功したときにinputの背景色を変えるようにしています。

.input-20220720:valid {
  background-color: green;
}

<form action="#">
<input type="text" class="input-20220720" pattern="[a-zA-Z0-9]{4}" maxlength="4">
</form>
<form action="#">
<input type="text" class="input-20220720" required pattern="[a-zA-Z0-9]{4}" maxlength="4">
</form>

制約検証 - 開発者ガイド | MDN をちょっと読んだけどこうなる理由が分からなかったので規格を読んできます。

追記

MDNを見返すとこのように書いてありました。つまり、空の値のときはpattern属性による検証がスキップされるということでしょうか？

pattern 属性が有効で、空でない値がパターンと一致しない場合、制約の検証によりフォームの送信ができなくなります。
<input>: 入力欄 (フォーム入力) 要素 - HTML: HyperText Markup Language | MDN