Google Chrome 40でreversed属性のついたol要素のカウンターがおかしい

※2015/3/3 追記あり

別にバグ報告ブログをやっているつもりはないのだけどたまたま見つけたので記事にする。

HTML5ではol要素にreversed属性をつけるとリストが降順のものとして意味づけられ、list-itemのカウンターの数値が逆順で表示されるようになる。

この「reversedのついたol」が中にさらにリストを持つとき(入れ子リストのとき)、Google Chrome 40でカウンターの表示がおかしくなるバグに気づいた。言葉で説明すると、入れ子にしているliの個数も全て合計した数値で降順にカウンターが表示されるというもの。わかりづらい。

問題のマークアップはこう。

<ol reversed>
  <li>快晴</li>
  <li>晴れ
    <ol reversed>
      <li>薄曇</li>
      <li>曇り
        <ol>
          <li>煙霧</li>
          <li>砂塵嵐</li>
          <li>地吹雪</li>
        </ol>
      </li>
      <li>霧</li>
      <li>霧雨</li>
    </ol>
  </li>
  <li>雨
    <ol>
      <li>みぞれ</li>
      <li>雪</li>
      <li>霰</li>
      <li>ひょう</li>
    </ol>
  </li>
  <li>雷</li>
</ol>

Google Chrome 40.0.2214.94 (64-bit)とFirefox 35.0.1で表示したスクリーンショットを以下に載せる。

counterの数値が大きい

counterの数値が適切

Chromeでは一番親のolのカウンターが15から始まり12で終わっている。Firefoxだと一番親のolのカウンターは上から4,3,2,1となっている。15は親のol要素の中の全てのli要素の合計数だ。liをどこかに増やすとその分カウンターの数値も増える。

他のブラウザでは見ていないが、reversedがついていない通常の昇順リストで考えれば、一番親のolのカウンターが12から始まって15で終わっていたらおかしいのだから、やはり入れ子分のliは数えずに同階層のliの個数分だけがカウンターの数値になるのが正しい表示だと思う。

HTML5のreversed属性をもつolの仕様日本語訳)を見てみたけど入れ子した時のカウンターについての記述は特にないようだ。入れ子にしているolをulに変えたりしてもかわらなかった。とにかくreversedを持つolに入れ子リストがあるとGoogle Chrome 40でおかしくなる。42.0.2306.0 canaryでも同様の現象が確認できた。


一般的なウェブ制作ではリスト要素のカウンターやリストマーカーをそのまま使うことはあまりないし、さらにreversedのついたolで入れ子でリストを含むとなると巷での再現性はさらに下がるだろう。カウンターもlist-style-type: none;にしてしまっている場合がほとんどだと思う。印刷用CSSでlist-itemのカウンターをノーマライズして初めて露見する程度だろうか。Chrome限定のバグっぽいので今後も気にする必要は出てこない気がする。

zoomのバグのように発生条件がレアなものは修正されずに長い間放置されてもおかしくないが、Chromium Projectのissueで探したら バグレポートはちゃんとあった。2014年11月11日にレポートがあり、当時のChrome 41とChrome 38で再現可能だったようだ。ステータスは今年の1月6日ですでにfixedになっている。手元のcanaryで再現するのはChrome 42にマージが間に合わなかったからだろうか。43で直っていたら忘れずに追記したい。

ちなみに先のISSUEでは このサンプルHTMLがリンクされていた。Chromeでみてもらえば、上記のスクリーンショットのようにカウンターがおかしいのが確認できる。reversedがつくだけでこうなってしまうんだからブラウザも大変なんだなと思った。


※2015/3/3追記。Google Chrome 43 canaryが公開されたので確認したところ、バグは修正されていた。めでたしめでたし。

カウンターの数値が適切に表示されるようになったGoogle Chrome 43 canary