自作ブラウザOmoikaneのHTML・CSS実装をまとめて進めた

Sat, 12 Sep 2026 19:51:40 +0900

ここ数日、自作ブラウザのOmoikaneでHTMLとCSS周りの実装をまとめて進めていました。

最初はFirefoxと同じHTMLを表示して、どこに描画差が残っているかを調べていました。

比較を始めると、単純な色の違いだけではなく、inline要素の矩形が取れていない、WebフォントをJavaScriptから扱えない、HTML fragmentをcontextに合わせてparseできない、といった基盤側の不足も出てきます。

見つかったものを順番に直していたら、描画、レイアウト、CSSOM、DOM、HTML parserまで広がりました。

今回は、その中で閉じた15件のIssueをまとめておきます。

最初はFirefoxとの描画比較

きっかけは、同じfixtureをOmoikaneとFirefoxで開き、DOMの矩形とスクリーンショットを比較したことでした。

この比較で最初に見つかったのが、次の問題です。

PR #680で、#673、#674、#675をまとめて修正しました。

inline要素については、行ごとの要素境界を保持し、背景描画とgetClientRects()、getBoundingClientRect()で同じ矩形を使うようにしました。

textareaは改行コードをLFへ正規化し、単語とgrapheme単位の折り返し、行高、padding端でのclip、UTF-16位置でのcaretとselectionを処理します。

Arabicについてはfont fallbackを増やしただけではなく、data URLの読み込み漏れや、URL内の数字を変換してBase64を壊していた処理、font shorthandからfamilyが消える問題も直しています。

修正前後とFirefoxで25条件を撮影し、同じブラウザ内では再撮影した画像が一致することも確認しました。

このPRでは、macOSでテスト用HTTPサーバーがWouldBlockになり、CSPテストの後片付け中に二重panicする#703も一緒に直しました。

描画比較をする前にテスト基盤が不安定だと、結果が実装差なのかテストの失敗なのか分からなくなるので、このあたりも必要でした。

Webフォントのfixtureを比較していると、文字列の横幅は合っているのに、inline-blockの高さだけが10pxずれていました。

#measure {
 display: inline-block;
 font: 40px/50px DynamicFace, monospace;
 border: 2px solid;
 padding: 8px;
}

Firefoxでは、border boxの高さが70pxになります。

line-height 50px
+ padding 8px × 2
+ border 2px × 2
= 70px

Omoikaneでは60pxになっていました。

原因は、inline-blockを通常のinline要素と同じように断片へ展開し、内部に独立した整形文脈を作っていなかったことです。そのため、明示した50pxのline boxではなく、40px相当のglyph metricsが高さに使われていました。

Issue #709では、inline-blockを親の行に置かれるatomic inline-level boxとして扱い、子要素は独立したLayoutBoxでlayoutするように変更しました。

これによって、内部line box、block child、shrink-to-fit、baseline、vertical-align、overflow、transform、hit testを要素単位で処理できます。

修正後は、FirefoxとOmoikaneのDOMRectがどちらも(24, 24, 300, 70)になりました。

Omoikaneは以前からCSSの@font-faceを描画に使えましたが、JavaScriptからフォントを読み込むAPIがありませんでした。

ページ側から見ると、次のような処理ができません。