Plainer HTML Testbed

このページにある要素はすべてキャプチャできるはずなので、
キャプチャできない or キャプチャは出来ているが編集/閲覧時に表示されない 場合はデグレの可能性があります。

現状Plainerでキャプチャできない構造

操作説明などに使うサンプルダッシュボード 👉️ sample_dashboard/index.html

折り畳み（アコーディオン）サイドメニュー検証用ダッシュボード 👉️ fold_nav/index.html

デモ埋め込みテスト用SaaSサイト 👉️ saas_site/index.html

自動キャプチャテスト用ページ 👉️ auto-capture/index.html

frameset（frame要素）検証用ページ 👉️ frameset/index.html（frame内PDF版 / frame内blob版）

Wijmo FlexGrid（仮想スクロール）検証用ページ 👉️ wijmo/index.html

qiankun風スコープ付きCSS検証用ページ 👉️ qiankun/index.html

Form

form.html

iframe

iframe内のフォーム状態・canvas・メディア（cross-realm検証）

src形式

srcdoc形式

Iframeの中身をJavaScriptで生成

画像

svgタグ

SVG camelCase要素（foreignObject / clipPath / linearGradient 等）

hrefで同一ドキュメント内のsvgをパス込みで指定

hrefで同一ドキュメント内のsvgをハッシュのみで指定

hrefで外部svgを読み込み

xlink:hrefで外部svgを読み込み

imgタグ

URL

Base64

クッキーが必要なimgタグ

cookie-image.html

background-image

styleタグ

URL

Base64

linkタグ

URL

Base64

divタグ style属性

URL

Base64

input type="image"

URL

Base64

CSSレイアウト・ポジション

CSSレイアウト（Flexbox / Grid / マルチカラム）
CSSポジション（fixed / sticky / z-index）
overflow / スクロール
Quirksモード（DOCTYPEなし・BackCompatキャプチャ検証）

CSS

styleタグ

styleタグ @import

linkタグ

@importでCSSをネストして読込

a (red)

a-1 (orange)

a-1-1 (yellow)

a-1-1-1 (lightcoral)

a-1-1-2 (lightgreen)

a-2 (pink) 背景スイカ

b (blue)

b-1 (violet)

c (green)

CSS上書き

このテキストが青になればよい

埋め込み系要素

embed / object の data: URL（自己完結型の保持 / 外部URLのクリア）

embed

絶対パス

相対パス

BlobUrl

Data URL(base64 PDF)

Data URL(base64 画像)

Data URL(エンコードなしHTML)

pdf.js × embed

絶対パス

相対パス

object

絶対パス

相対パス

BlobUrl

Data URL(base64 PDF)

Data URL(base64 画像)

Data URL(エンコードなしHTML)

pdf.js × object

絶対パス

相対パス

iframe

絶対パス

相対パス

BlobUrl

Data URL(base64 PDF)

Data URL(base64 画像)

Data URL(エンコードなしHTML)

pdf.js × iframe

絶対パス

相対パス

ShadowDOM

ネストしたShadowDOM

ShadowDOM × CSS

Canvas

Canvas描画順序検証 👉️ canvas/canvas.html

リンク

Google

フォーム

Input

全てのtypeのInput要素 👉️ form/input-types.html

noscript

JavaScriptが無効になっています。

このサイトを利用するためには、ブラウザの設定でJavaScriptを有効にしてください。

SVGAElement

onClickが設定されている要素 (キャプチャ時にはonClickが削除されているのが正しい)

onClickが設定されているdiv要素

不正なDOM構造

pタグのネスト

buttonタグのネスト

liタグのネスト

Header 1	Header 2	Header 3	Header 4	Header 5
Data 1	Data 2	Data 3	Data 4	Data 5

tableタグ配下以外の場所でのtbody

親div

tr内にtd以外の要素があるtable

div1が表示される	td1が表示される	td2が表示される	visibility: hiddenのdiv要素が存在している	td3が表示される

SVG camelCase要素

詳細ページ 👉️ svg/camelcase.html。 foreignObject / clipPath / linearGradient / textPath / fe*系はキャプチャで小文字化されると機能しなくなる。キャプチャデータ閲覧時にすべて元の見た目で表示されればOK。

foreignObject 内の HTML

linearGradient + clipPath

textPath

filter（feDropShadow / feGaussianBlur）

symbol + use（ページ内参照）

HTML Custom Element（ハイフン付きタグ名・Shadow DOMなし）

緑のバッジが表示され、タグ名と中身がキャプチャされればOK。

embed / object の data: URL

詳細ページ 👉️ embed_object/data-url.html。自己完結型の data: URL（画像・音声等の許可リストMIME）はキャプチャ後も保持され、 data:image/svg+xml・data:text/html・不正形式は外部URL同様にクリアされる（fail-closed）。外部URLの embed / object は上の「埋め込み系要素」セクションでカバー済み。

data:image/png（保持）

data:image/gif（保持）

data:audio/wav（保持）

data:image/svg+xml（クリアされる）

data:text/html の object（クリアされる）

不正な data: URL（クリアされる）

qiankun風スコープ付きCSS

詳細ページ 👉️ qiankun/index.html。 JSON_V1キャプチャでは #root / #micro-component-inner のプレフィックスが除去される（stripQiankunScopePrefixes）。詳細ページは「除去後の構造」を模写しているため、 LIVE では赤い「崩れ」表示が正常で、キャプチャ閲覧時に「✓」へ変われば除去が機能している。回帰を検出するにはこの反転表示が必要なため、インラインではなく専用ページで検証する。

iframe内のフォーム状態・canvas・メディア（cross-realm）

詳細ページ 👉️ iframe_src/iframe_state.html

iframe内の document は別realmのため instanceof 判定が効かず、入力状態・canvas・embed/object 等が JSON_V1 で欠落する不具合があった。
cross-realm経路は about:blank / srcdoc でのみ通る（通常の src 付き iframe は同一realmで処理され踏まない）。そのため詳細ページは about:blank に親JSでDOMを書き込む構成。
確認: JSで設定した値・チェック・選択・canvas・img(srcset)・style url()・embed/object がキャプチャデータ閲覧時に維持され、password が password にマスクされればOK。

frameset / Wijmo FlexGrid（別ページで検証）

以下はこのページにインラインで置けないため別ページで検証する。

frameset/index.html — frame要素はページ全体構造（bodyの代わりにframeset）のためインライン不可。frame内PDF版 / frame内blob版もあり
wijmo/index.html — 評価版CDNの透かしがページ全体に被さるため別ページに分離。issue-1017 のガントチャート（60行×13列・固定2列・scrollLeft残し）を模した仮想スクロール検証