57 lines
1.6 KiB
HTML
57 lines
1.6 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<title>Anchor Visibility Test</title>
|
||
|
|
<style>
|
||
|
|
body { padding: 40px; font-family: sans-serif; }
|
||
|
|
section { border: 2px solid #ccc; padding: 20px; margin: 20px 0; }
|
||
|
|
h2 { margin-top: 0; }
|
||
|
|
|
||
|
|
/* Simulate editor canvas styles */
|
||
|
|
.in-editor .editor-anchor {
|
||
|
|
position: relative;
|
||
|
|
min-height: 20px;
|
||
|
|
border: 1px dashed #9ca3af;
|
||
|
|
padding: 4px 8px;
|
||
|
|
background: rgba(59,130,246,0.05);
|
||
|
|
}
|
||
|
|
.in-editor .editor-anchor::before {
|
||
|
|
content: '⚓ ' attr(id);
|
||
|
|
font-size: 12px;
|
||
|
|
color: #6b7280;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<h1>Anchor Visibility Test</h1>
|
||
|
|
|
||
|
|
<section class="in-editor">
|
||
|
|
<h2>1. In Editor (with .editor-anchor styling)</h2>
|
||
|
|
<p>Above anchor</p>
|
||
|
|
<div data-anchor="true" id="anchor-1" class="editor-anchor"></div>
|
||
|
|
<p>Below anchor</p>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<section>
|
||
|
|
<h2>2. In Preview (no .editor-anchor styling)</h2>
|
||
|
|
<p>Above anchor</p>
|
||
|
|
<div data-anchor="true" id="anchor-1" class="editor-anchor"></div>
|
||
|
|
<p>Below anchor</p>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<section>
|
||
|
|
<h2>3. After Export (class removed)</h2>
|
||
|
|
<p>Above anchor</p>
|
||
|
|
<div data-anchor="true" id="anchor-1"></div>
|
||
|
|
<p>Below anchor</p>
|
||
|
|
</section>
|
||
|
|
|
||
|
|
<section>
|
||
|
|
<h2>4. Ideal Export (element removed entirely)</h2>
|
||
|
|
<p>Above anchor</p>
|
||
|
|
<!-- anchor removed -->
|
||
|
|
<p>Below anchor</p>
|
||
|
|
</section>
|
||
|
|
</body>
|
||
|
|
</html>
|