webg unittest: embedded layout

固定サイズ canvas を本文へ埋め込んだ状態で overlay の追従を確認する test

この unittest は、`WebgApp` の `layoutMode: "embedded"` と `fixedCanvasSize` を組み合わせたときに、 HTML 文書のスクロールと canvas 内 overlay が同じ host 要素を基準に動くかを確認するためのものです

右側の status では、canvas host、HelpPanel、dialogue、fixed panel、touch controls の矩形を毎フレーム読み取り、 host 基準で揃っているかを PASS / WAIT / FAIL で表示します

確認したいポイント

1. ページ全体をスクロールしても canvas が本文中の位置に残り、本文だけでなく HelpPanel や touch controls も一緒に移動すること

2. `Hide Help` で閉じたあとに、HelpPanel の枠が host 全幅へ広がらず `Show Help` ボタンに近い幅へ保たれること

3. `D` で dialogue、`F` で fixed panel を出したまま上下へスクロールしても、overlay が viewport 固定にならず canvas に付いてくること

4. `S` でスクリーンショット、`F9` → `M` で debug mode 切替を行っても、embedded の基本配置が崩れないこと

埋め込み canvas

下の canvas は `fixedCanvasSize: { width: 720, height: 540 }` で固定し、`layoutMode: "embedded"` で本文へ埋め込んでいます

マウスドラッグで orbit、`ArrowLeft` / `ArrowRight` または touch ボタンで自動回転の位相を変えられます

`Enter` / `Space` で dialogue 次送り、`H` で HelpPanel、`D` で dialogue、`F` で fixed panel、`S` で screenshot、`R` で camera を初期状態へ戻します 

const app = new WebgApp({
  document,
  layoutMode: "embedded",
  fixedCanvasSize: {
    width: 720,
    height: 540,
    useDevicePixelRatio: false
  }
});

本文の中に canvas を置くときの確認メモ

HTML 側で `overflow: hidden` を指定したままだと、`layoutMode: "embedded"` を使ってもページ自体はスクロールしません。 この unittest では意図的に長い本文を前後へ置き、文書フローと canvas host の関係を追いやすくしています

同じ要領で教材ページを作る場合は、解説文、画像、コード例のあいだに canvas を差し込めます。WebgApp 側は host を自動で作り、 HelpPanel、dialogue、fixed panel、touch controls をその host 内の absolute overlay として扱います

下へスクロールしたあと、右上の status が見えていれば、そこで現在の矩形差分を数値でも追えます