imhotep/Imhotep
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

v1.1.0: pooled runtime, 959 tests, production hardening (0 squash)

Browse Source
This commit is contained in:
John Dvorak
2025-08-15 10:00:00 -07:00
commit 92deb689cd
321 changed files with 79170 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/imhotep-fixtures/src/pages/topology.html
+252
View File
@@ -0,0 +1,252 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Topology Fixtures - Clipping, Scroll, Stacking</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
font-family: system-ui, sans-serif;
padding: 40px;
background: #f5f5f5;
}
.fixture-section {
margin-bottom: 60px;
padding: 24px;
background: white;
border-radius: 8px;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.fixture-section h2 {
margin-bottom: 16px;
font-size: 14px;
text-transform: uppercase;
letter-spacing: 0.05em;
color: #666;
}
/* Overflow clipping fixture */
.clip-container {
width: 200px;
height: 200px;
overflow: hidden;
background: #e5e7eb;
border-radius: 4px;
position: relative;
}
.clip-overflow-item {
position: absolute;
top: 150px;
left: 150px;
width: 100px;
height: 100px;
background: #3b82f6;
border-radius: 4px;
}
/* clip-path clipping fixture */
.clip-path-container {
width: 200px;
height: 200px;
background: #e5e7eb;
border-radius: 4px;
clip-path: circle(80px at 100px 100px);
position: relative;
}
.clip-path-item {
position: absolute;
top: 10px;
left: 10px;
width: 100px;
height: 100px;
background: #ef4444;
border-radius: 4px;
}
/* Scroll container fixture */
.scroll-fixture {
width: 300px;
height: 200px;
overflow: auto;
background: #f3f4f6;
border-radius: 4px;
padding: 16px;
}
.scroll-fixture-content {
width: 600px;
height: 600px;
position: relative;
background: linear-gradient(135deg, #e5e7eb 25%, transparent 25%),
linear-gradient(225deg, #e5e7eb 25%, transparent 25%),
linear-gradient(45deg, #e5e7eb 25%, transparent 25%),
linear-gradient(315deg, #e5e7eb 25%, transparent 25%);
background-size: 20px 20px;
background-position: 0 0, 10px 0, 10px -10px, 0px 10px;
}
.scroll-sticky-item {
position: sticky;
top: 10px;
left: 10px;
width: 80px;
height: 80px;
background: #8b5cf6;
border-radius: 4px;
}
/* Stacking context fixture */
.stacking-context-a {
position: relative;
z-index: 1;
width: 300px;
height: 200px;
background: #e5e7eb;
border-radius: 4px;
}
.stacking-item-bottom {
position: absolute;
top: 20px;
left: 20px;
width: 150px;
height: 150px;
background: #3b82f6;
border-radius: 4px;
z-index: 1;
}
.stacking-item-top {
position: absolute;
top: 60px;
left: 60px;
width: 150px;
height: 150px;
background: #ef4444;
border-radius: 4px;
z-index: 2;
}
.stacking-peer-a {
position: absolute;
top: 16px;
left: 180px;
width: 100px;
height: 100px;
background: #10b981;
border-radius: 4px;
}
.stacking-peer-b {
position: absolute;
top: 46px;
left: 210px;
width: 80px;
height: 80px;
background: #f59e0b;
border-radius: 4px;
}
/* Nested stacking context */
.nested-stacking-parent {
position: relative;
z-index: 1;
width: 300px;
height: 200px;
background: #f3f4f6;
border-radius: 4px;
}
.nested-stacking-child {
position: relative;
z-index: 100;
top: 20px;
left: 20px;
width: 200px;
height: 150px;
background: #e5e7eb;
border-radius: 4px;
}
.nested-stacking-grandchild {
position: absolute;
z-index: 1;
top: 30px;
left: 30px;
width: 150px;
height: 100px;
background: #10b981;
border-radius: 4px;
}
/* Formatting context fixture */
.formatting-context-container {
width: 400px;
background: #f3f4f6;
border-radius: 4px;
padding: 16px;
}
.float-box {
float: left;
width: 100px;
height: 100px;
background: #f59e0b;
border-radius: 4px;
margin-right: 16px;
}
.bfc-box {
overflow: hidden;
background: #8b5cf6;
border-radius: 4px;
padding: 16px;
min-height: 120px;
}
</style>
</head>
<body>
<div class="fixture-section" data-testid="overflow-clipping">
<h2>overflow clipping</h2>
<div class="clip-container" data-testid="overflow-clip-container">
<div class="clip-overflow-item" data-testid="overflow-clipped-item"></div>
</div>
</div>
<div class="fixture-section" data-testid="clip-path-clipping">
<h2>clip-path clipping</h2>
<div class="clip-path-container" data-testid="clip-path-container">
<div class="clip-path-item" data-testid="clip-path-item"></div>
</div>
</div>
<div class="fixture-section" data-testid="scroll-container">
<h2>scroll container with sticky</h2>
<div class="scroll-fixture" data-testid="scroll-port">
<div class="scroll-fixture-content">
<div class="scroll-sticky-item" data-testid="sticky-item"></div>
</div>
</div>
</div>
<div class="fixture-section" data-testid="stacking-context">
<h2>stacking context - paint order</h2>
<div class="stacking-context-a" data-testid="stacking-root">
<div class="stacking-item-bottom" data-testid="stack-bottom"></div>
<div class="stacking-item-top" data-testid="stack-top"></div>
<div class="stacking-peer-a" data-testid="stack-peer-a"></div>
<div class="stacking-peer-b" data-testid="stack-peer-b"></div>
</div>
</div>
<div class="fixture-section" data-testid="nested-stacking-context">
<h2>nested stacking context</h2>
<div class="nested-stacking-parent" data-testid="nested-stack-parent">
<div class="nested-stacking-child" data-testid="nested-stack-child">
<div class="nested-stacking-grandchild" data-testid="nested-stack-grandchild"></div>
</div>
</div>
</div>
<div class="fixture-section" data-testid="formatting-context">
<h2>formatting context</h2>
<div class="formatting-context-container" data-testid="fc-container">
<div class="float-box" data-testid="float-box"></div>
<div class="bfc-box" data-testid="bfc-box">
Block formatting context content
</div>
</div>
</div>
</body>
</html>