Plainer HTML Testbed
このページにある要素はすべてキャプチャできるはずなので、
キャプチャできない or キャプチャは出来ているが編集/閲覧時に表示されない 場合はデグレの可能性があります。
現状Plainerでキャプチャできない構造
操作説明などに使うサンプルダッシュボード 👉️ sample_dashboard/index.html
折り畳み（アコーディオン）サイドメニュー検証用ダッシュボード 👉️ fold_nav/index.html
デモ埋め込みテスト用SaaSサイト 👉️ saas_site/index.html
スマホ枠 👉️smartphoneFrame/index.html
PC枠 👉️pcFrame/index.html
自動キャプチャテスト用ページ 👉️ auto-capture/index.html
Form
form.html
iframe
画像
svgタグ
hrefで同一ドキュメント内のsvgをパス込みで指定
hrefで同一ドキュメント内のsvgをハッシュのみで指定
hrefで外部svgを読み込み
xlink:hrefで外部svgを読み込み
imgタグ
URL
Base64
クッキーが必要なimgタグ
cookie-image.html
background-image
styleタグ
linkタグ
divタグ style属性
input type="image"
CSSレイアウト・ポジション
CSSレイアウト（Flexbox / Grid / マルチカラム）
CSSポジション（fixed / sticky / z-index）
overflow / スクロール
CSS
styleタグ
styleタグ
styleタグ @import
styleタグ @import
linkタグ
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
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
::part() によって、Shadow DOM の内部にスタイルを適用しています。(darkorange)
Canvas
Canvas描画順序 検証 👉️ canvas/canvas.html
リンク
Google
フォーム
Input
全てのtypeのInput要素 👉️ form/input-types.html
noscript
SVGAElement
onClickが設定されている要素
(キャプチャ時にはonClickが削除されているのが正しい)
onClickが設定されているdiv要素
不正なDOM構造
pタグのネスト
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