v1.1.0: pooled runtime, 959 tests, production hardening (0 squash)
This commit is contained in:
John Dvorak
@@ -0,0 +1,103 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Error Fixtures - Invalid Authoring</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;
|
||||
}
|
||||
|
||||
/* Ambiguous selector fixture */
|
||||
.ambiguous-container {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
}
|
||||
.item {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
background: #3b82f6;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
/* Missing subject fixture */
|
||||
.missing-subject-container {
|
||||
padding: 20px;
|
||||
background: #f3f4f6;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.existing-element {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: #ef4444;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
/* Empty selector fixture */
|
||||
.empty-target {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
background: #8b5cf6;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
/* Nested ambiguous fixture */
|
||||
.nested-ambiguous {
|
||||
padding: 16px;
|
||||
background: #f3f4f6;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.nested-ambiguous .item {
|
||||
background: #10b981;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="fixture-section" data-testid="ambiguous-selector">
|
||||
<h2>ambiguous selector - multiple matches</h2>
|
||||
<div class="ambiguous-container">
|
||||
<div class="item" data-testid="ambiguous-1"></div>
|
||||
<div class="item" data-testid="ambiguous-2"></div>
|
||||
<div class="item" data-testid="ambiguous-3"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="fixture-section" data-testid="missing-subject">
|
||||
<h2>missing subject</h2>
|
||||
<div class="missing-subject-container">
|
||||
<div class="existing-element" data-testid="existing-el"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="fixture-section" data-testid="empty-selector">
|
||||
<h2>empty selector target</h2>
|
||||
<div class="empty-target" data-testid="empty-target-el"></div>
|
||||
</div>
|
||||
|
||||
<div class="fixture-section" data-testid="nested-ambiguous">
|
||||
<h2>nested ambiguous selector</h2>
|
||||
<div class="nested-ambiguous">
|
||||
<div class="item" data-testid="nested-ambiguous-1"></div>
|
||||
<div class="item" data-testid="nested-ambiguous-2"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,174 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Frame Fixtures - Frame Resolution</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;
|
||||
}
|
||||
|
||||
/* Viewport fixture */
|
||||
.viewport-relative {
|
||||
position: fixed;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: #3b82f6;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
/* Containing block fixture */
|
||||
.containing-block-parent {
|
||||
position: relative;
|
||||
width: 400px;
|
||||
height: 300px;
|
||||
padding: 20px;
|
||||
background: #e5e7eb;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.containing-block-child {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: 10px;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
background: #ef4444;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
/* Nearest positioned ancestor fixture */
|
||||
.unpositioned-wrapper {
|
||||
padding: 20px;
|
||||
background: #f3f4f6;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.positioned-ancestor {
|
||||
position: relative;
|
||||
padding: 30px;
|
||||
background: #d1d5db;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.nested-child {
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
right: 10px;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
background: #8b5cf6;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
/* Scroll container frame fixture */
|
||||
.scroll-container {
|
||||
width: 300px;
|
||||
height: 200px;
|
||||
overflow: auto;
|
||||
background: #f3f4f6;
|
||||
border-radius: 4px;
|
||||
padding: 16px;
|
||||
}
|
||||
.scroll-content {
|
||||
width: 500px;
|
||||
height: 500px;
|
||||
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-item {
|
||||
position: absolute;
|
||||
top: 250px;
|
||||
left: 250px;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
background: #10b981;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
/* Named grid area fixture */
|
||||
.grid-container {
|
||||
display: grid;
|
||||
grid-template-areas:
|
||||
"header header"
|
||||
"sidebar content"
|
||||
"footer footer";
|
||||
grid-template-columns: 200px 1fr;
|
||||
grid-template-rows: 60px 1fr 40px;
|
||||
gap: 16px;
|
||||
width: 500px;
|
||||
height: 400px;
|
||||
background: #f3f4f6;
|
||||
border-radius: 4px;
|
||||
padding: 16px;
|
||||
}
|
||||
.grid-header { grid-area: header; background: #3b82f6; border-radius: 4px; }
|
||||
.grid-sidebar { grid-area: sidebar; background: #8b5cf6; border-radius: 4px; }
|
||||
.grid-content { grid-area: content; background: #ef4444; border-radius: 4px; }
|
||||
.grid-footer { grid-area: footer; background: #10b981; border-radius: 4px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="fixture-section" data-testid="viewport-frame">
|
||||
<h2>viewport frame</h2>
|
||||
<div class="viewport-relative" data-testid="fixed-box"></div>
|
||||
</div>
|
||||
|
||||
<div class="fixture-section" data-testid="containing-block-frame">
|
||||
<h2>containing block frame</h2>
|
||||
<div class="containing-block-parent" data-testid="containing-block">
|
||||
<div class="containing-block-child" data-testid="absolute-child"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="fixture-section" data-testid="positioned-ancestor-frame">
|
||||
<h2>nearest positioned ancestor frame</h2>
|
||||
<div class="unpositioned-wrapper">
|
||||
<div class="positioned-ancestor" data-testid="positioned-ancestor">
|
||||
<div class="nested-child" data-testid="nested-absolute"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="fixture-section" data-testid="scroll-container-frame">
|
||||
<h2>scroll container frame</h2>
|
||||
<div class="scroll-container" data-testid="scroll-container">
|
||||
<div class="scroll-content">
|
||||
<div class="scroll-item" data-testid="scroll-item"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="fixture-section" data-testid="named-grid-area-frame">
|
||||
<h2>named grid area frame</h2>
|
||||
<div class="grid-container" data-testid="grid-container">
|
||||
<div class="grid-header" data-testid="grid-header"></div>
|
||||
<div class="grid-sidebar" data-testid="grid-sidebar"></div>
|
||||
<div class="grid-content" data-testid="grid-content"></div>
|
||||
<div class="grid-footer" data-testid="grid-footer"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,50 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Multi-Button Fixture - Selector Multiplicity</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);
|
||||
}
|
||||
.button-row {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
padding: 20px;
|
||||
background: #fafafa;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.button {
|
||||
width: 100px;
|
||||
height: 40px;
|
||||
background: #3b82f6;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
color: white;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="fixture-section" data-testid="multi-button">
|
||||
<h2>Selector Multiplicity - Three Buttons</h2>
|
||||
<div class="button-row">
|
||||
<button class="button" data-testid="button-1">Button 1</button>
|
||||
<button class="button" data-testid="button-2">Button 2</button>
|
||||
<button class="button" data-testid="button-3">Button 3</button>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,65 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Imhotep Component — React Button</title>
|
||||
<script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
|
||||
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
|
||||
<style>
|
||||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
padding: 24px;
|
||||
background: #f5f5f5;
|
||||
}
|
||||
.btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
}
|
||||
.btn-sm {
|
||||
min-width: 60px;
|
||||
min-height: 32px;
|
||||
padding: 4px 12px;
|
||||
font-size: 12px;
|
||||
}
|
||||
.btn-md {
|
||||
min-width: 80px;
|
||||
min-height: 40px;
|
||||
padding: 8px 16px;
|
||||
font-size: 14px;
|
||||
}
|
||||
.btn-lg {
|
||||
min-width: 100px;
|
||||
min-height: 48px;
|
||||
padding: 12px 24px;
|
||||
font-size: 16px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="__imhotep-mount"></div>
|
||||
|
||||
<script>
|
||||
// Button component
|
||||
function Button({ size = 'md', disabled = false, label = 'Button' }) {
|
||||
const className = 'btn btn-' + size;
|
||||
return React.createElement('button', {
|
||||
'data-testid': 'component-button',
|
||||
className: className,
|
||||
disabled: disabled
|
||||
}, label);
|
||||
}
|
||||
|
||||
// Register components and React globals for Imhotep adapter
|
||||
window.__imhotepComponents = { Button: Button };
|
||||
window.__imhotepReactDom = ReactDOM;
|
||||
window.__imhotepCreateElement = React.createElement;
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,76 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Imhotep Property Enumerated Fixture</title>
|
||||
<style>
|
||||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
padding: 24px;
|
||||
background: #f5f5f5;
|
||||
}
|
||||
.btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
}
|
||||
.btn-sm {
|
||||
min-width: 60px;
|
||||
min-height: 32px;
|
||||
padding: 4px 12px;
|
||||
font-size: 12px;
|
||||
}
|
||||
.btn-md {
|
||||
min-width: 80px;
|
||||
min-height: 40px;
|
||||
padding: 8px 16px;
|
||||
font-size: 14px;
|
||||
}
|
||||
.btn-lg {
|
||||
min-width: 100px;
|
||||
min-height: 48px;
|
||||
padding: 12px 24px;
|
||||
font-size: 16px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<button id="target-button" class="btn btn-md" data-testid="enumerated-button">
|
||||
Button
|
||||
</button>
|
||||
|
||||
<script>
|
||||
// Apply props from window.__IMHOTEP_PROPS__
|
||||
function applyProps(props) {
|
||||
const btn = document.getElementById('target-button');
|
||||
if (!btn || !props) return;
|
||||
|
||||
if (props.size) {
|
||||
btn.className = 'btn btn-' + props.size;
|
||||
}
|
||||
if (props.label) {
|
||||
btn.textContent = props.label;
|
||||
}
|
||||
if (props.disabled !== undefined) {
|
||||
btn.disabled = props.disabled;
|
||||
}
|
||||
}
|
||||
|
||||
// Apply initial props
|
||||
applyProps(window.__IMHOTEP_PROPS__);
|
||||
|
||||
// Listen for prop updates from test harness
|
||||
window.addEventListener('imhotep:update-props', function(event) {
|
||||
if (event.detail && event.detail.props) {
|
||||
applyProps(event.detail.props);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,144 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Imhotep Property Render — React</title>
|
||||
<script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
|
||||
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
|
||||
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
|
||||
<style>
|
||||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
padding: 24px;
|
||||
background: #f5f5f5;
|
||||
}
|
||||
#root {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
/* Button component styles */
|
||||
.btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: opacity 0.15s ease;
|
||||
}
|
||||
.btn:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.btn-sm {
|
||||
min-width: 60px;
|
||||
min-height: 32px;
|
||||
padding: 4px 12px;
|
||||
font-size: 12px;
|
||||
}
|
||||
.btn-md {
|
||||
min-width: 80px;
|
||||
min-height: 40px;
|
||||
padding: 8px 16px;
|
||||
font-size: 14px;
|
||||
}
|
||||
.btn-lg {
|
||||
min-width: 100px;
|
||||
min-height: 48px;
|
||||
padding: 12px 24px;
|
||||
font-size: 16px;
|
||||
}
|
||||
/* Card component styles */
|
||||
.card {
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
|
||||
overflow: hidden;
|
||||
}
|
||||
.card-compact {
|
||||
padding: 12px;
|
||||
}
|
||||
.card-normal {
|
||||
padding: 24px;
|
||||
}
|
||||
.card-title {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 8px;
|
||||
color: #1a1a1a;
|
||||
}
|
||||
.card-content {
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
color: #4a4a4a;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
|
||||
<script type="text/babel">
|
||||
const { useState, useEffect } = React;
|
||||
|
||||
// Button component with configurable props
|
||||
function Button({ size = 'md', disabled = false, label = 'Button' }) {
|
||||
const className = `btn btn-${size}`;
|
||||
return (
|
||||
<button
|
||||
data-testid="rendered-button"
|
||||
className={className}
|
||||
disabled={disabled}
|
||||
>
|
||||
{label}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
// Card component with configurable props
|
||||
function Card({ title = 'Title', content = 'Content', compact = false }) {
|
||||
const className = `card ${compact ? 'card-compact' : 'card-normal'}`;
|
||||
return (
|
||||
<div data-testid="rendered-card" className={className}>
|
||||
<div data-testid="card-title" className="card-title">{title}</div>
|
||||
<div data-testid="card-content" className="card-content">{content}</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Root app that reads props from window.__IMHOTEP_PROPS__
|
||||
function App() {
|
||||
const [props, setProps] = useState(window.__IMHOTEP_PROPS__ || {
|
||||
button: { size: 'md', disabled: false, label: 'Click me' },
|
||||
card: { title: 'Hello', content: 'World', compact: false }
|
||||
});
|
||||
|
||||
// Listen for prop updates from test harness
|
||||
useEffect(() => {
|
||||
const handleUpdate = (event) => {
|
||||
if (event.detail && event.detail.props) {
|
||||
setProps(event.detail.props);
|
||||
}
|
||||
};
|
||||
window.addEventListener('imhotep:update-props', handleUpdate);
|
||||
return () => window.removeEventListener('imhotep:update-props', handleUpdate);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Button {...props.button} />
|
||||
<Card {...props.card} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const root = ReactDOM.createRoot(document.getElementById('root'));
|
||||
root.render(<App />);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,157 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Imhotep Property Render — Vue</title>
|
||||
<script src="https://unpkg.com/vue@3/dist/vue.global.js" crossorigin></script>
|
||||
<style>
|
||||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
padding: 24px;
|
||||
background: #f5f5f5;
|
||||
}
|
||||
#app {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
/* Button component styles */
|
||||
.btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: opacity 0.15s ease;
|
||||
}
|
||||
.btn:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.btn-sm {
|
||||
min-width: 60px;
|
||||
min-height: 32px;
|
||||
padding: 4px 12px;
|
||||
font-size: 12px;
|
||||
}
|
||||
.btn-md {
|
||||
min-width: 80px;
|
||||
min-height: 40px;
|
||||
padding: 8px 16px;
|
||||
font-size: 14px;
|
||||
}
|
||||
.btn-lg {
|
||||
min-width: 100px;
|
||||
min-height: 48px;
|
||||
padding: 12px 24px;
|
||||
font-size: 16px;
|
||||
}
|
||||
/* Card component styles */
|
||||
.card {
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
|
||||
overflow: hidden;
|
||||
}
|
||||
.card-compact {
|
||||
padding: 12px;
|
||||
}
|
||||
.card-normal {
|
||||
padding: 24px;
|
||||
}
|
||||
.card-title {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 8px;
|
||||
color: #1a1a1a;
|
||||
}
|
||||
.card-content {
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
color: #4a4a4a;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
|
||||
<script>
|
||||
const { createApp, ref, onMounted, onUnmounted } = Vue;
|
||||
|
||||
// Button component with configurable props
|
||||
const Button = {
|
||||
props: {
|
||||
size: { type: String, default: 'md' },
|
||||
disabled: { type: Boolean, default: false },
|
||||
label: { type: String, default: 'Button' }
|
||||
},
|
||||
template: `
|
||||
<button
|
||||
data-testid="rendered-button"
|
||||
:class="['btn', 'btn-' + size]"
|
||||
:disabled="disabled"
|
||||
>
|
||||
{{ label }}
|
||||
</button>
|
||||
`
|
||||
};
|
||||
|
||||
// Card component with configurable props
|
||||
const Card = {
|
||||
props: {
|
||||
title: { type: String, default: 'Title' },
|
||||
content: { type: String, default: 'Content' },
|
||||
compact: { type: Boolean, default: false }
|
||||
},
|
||||
template: `
|
||||
<div data-testid="rendered-card" :class="['card', compact ? 'card-compact' : 'card-normal']">
|
||||
<div data-testid="card-title" class="card-title">{{ title }}</div>
|
||||
<div data-testid="card-content" class="card-content">{{ content }}</div>
|
||||
</div>
|
||||
`
|
||||
};
|
||||
|
||||
// Root app that reads props from window.__IMHOTEP_PROPS__
|
||||
const App = {
|
||||
components: { Button, Card },
|
||||
setup() {
|
||||
const props = ref(window.__IMHOTEP_PROPS__ || {
|
||||
button: { size: 'md', disabled: false, label: 'Click me' },
|
||||
card: { title: 'Hello', content: 'World', compact: false }
|
||||
});
|
||||
|
||||
// Listen for prop updates from test harness
|
||||
const handleUpdate = (event) => {
|
||||
if (event.detail && event.detail.props) {
|
||||
props.value = event.detail.props;
|
||||
}
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
window.addEventListener('imhotep:update-props', handleUpdate);
|
||||
});
|
||||
|
||||
onUnmounted(() => {
|
||||
window.removeEventListener('imhotep:update-props', handleUpdate);
|
||||
});
|
||||
|
||||
return { props };
|
||||
},
|
||||
template: `
|
||||
<div>
|
||||
<Button v-bind="props.button" />
|
||||
<Card v-bind="props.card" />
|
||||
</div>
|
||||
`
|
||||
};
|
||||
|
||||
createApp(App).mount('#app');
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,264 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Public API Fixture - leftOf Vertical Slice</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;
|
||||
}
|
||||
|
||||
/* leftOf fixture with exact 10px gap */
|
||||
.leftof-pair {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
padding: 20px;
|
||||
background: #fafafa;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.box-left {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
background: #3b82f6;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.box-right {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
background: #ef4444;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
/* above/below fixture with exact 10px gap */
|
||||
.vertical-pair {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
padding: 20px;
|
||||
background: #fafafa;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.box-above {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
background: #3b82f6;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.box-below {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
background: #ef4444;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
/* inside fixture */
|
||||
.inside-container {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
padding: 20px;
|
||||
background: #fafafa;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.box-inside {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
background: #10b981;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
/* alignedWith centerY fixture */
|
||||
.align-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 20px;
|
||||
background: #fafafa;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.align-ref {
|
||||
width: 80px;
|
||||
height: 120px;
|
||||
background: #8b5cf6;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.align-subject {
|
||||
width: 80px;
|
||||
height: 60px;
|
||||
background: #f59e0b;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
/* size fixture */
|
||||
.size-box {
|
||||
width: 80px;
|
||||
height: 60px;
|
||||
background: #ec4899;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
/* centeredWithin fixture */
|
||||
.center-container {
|
||||
width: 300px;
|
||||
height: 200px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #fafafa;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.box-centered {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
background: #06b6d4;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.box-offset {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
background: #f97316;
|
||||
border-radius: 4px;
|
||||
margin-left: 40px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
/* overlaps fixture */
|
||||
.overlap-container {
|
||||
position: relative;
|
||||
width: 200px;
|
||||
height: 120px;
|
||||
background: #fafafa;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.overlap-a {
|
||||
position: absolute;
|
||||
left: 20px;
|
||||
top: 20px;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
background: #8b5cf6;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.overlap-b {
|
||||
position: absolute;
|
||||
left: 60px;
|
||||
top: 40px;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
background: #ec4899;
|
||||
border-radius: 4px;
|
||||
opacity: 0.7;
|
||||
}
|
||||
.overlap-separate {
|
||||
position: absolute;
|
||||
left: 150px;
|
||||
top: 20px;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background: #64748b;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
/* contains fixture - reuse inside-container but with explicit ids */
|
||||
.contains-container {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
padding: 20px;
|
||||
background: #fafafa;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.box-contained {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
background: #10b981;
|
||||
border-radius: 4px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="fixture-section" data-testid="leftof-slice">
|
||||
<h2>leftOf vertical slice — 10px gap</h2>
|
||||
<div class="leftof-pair">
|
||||
<div class="box-left" data-testid="box-left"></div>
|
||||
<div class="box-right" data-testid="box-right"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="fixture-section" data-testid="above-below-slice">
|
||||
<h2>above/below vertical slice — 10px gap</h2>
|
||||
<div class="vertical-pair">
|
||||
<div class="box-above" data-testid="box-above"></div>
|
||||
<div class="box-below" data-testid="box-below"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="fixture-section" data-testid="inside-slice">
|
||||
<h2>inside vertical slice</h2>
|
||||
<div class="inside-container" data-testid="container-inside">
|
||||
<div class="box-inside" data-testid="box-inside"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="fixture-section" data-testid="aligned-slice">
|
||||
<h2>alignedWith centerY vertical slice</h2>
|
||||
<div class="align-row">
|
||||
<div class="align-ref" data-testid="align-ref"></div>
|
||||
<div class="align-subject" data-testid="align-subject"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="fixture-section" data-testid="size-slice">
|
||||
<h2>size assertion vertical slice</h2>
|
||||
<div class="size-box" data-testid="size-box"></div>
|
||||
</div>
|
||||
|
||||
<div class="fixture-section" data-testid="centered-slice">
|
||||
<h2>centeredWithin vertical slice</h2>
|
||||
<div class="center-container" data-testid="center-container">
|
||||
<div class="box-centered" data-testid="box-centered"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="fixture-section" data-testid="centered-fail-slice">
|
||||
<h2>centeredWithin fail slice</h2>
|
||||
<div class="center-container" data-testid="center-container-offset">
|
||||
<div class="box-offset" data-testid="box-offset"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="fixture-section" data-testid="overlaps-slice">
|
||||
<h2>overlaps vertical slice</h2>
|
||||
<div class="overlap-container" data-testid="overlap-container">
|
||||
<div class="overlap-a" data-testid="overlap-a"></div>
|
||||
<div class="overlap-b" data-testid="overlap-b"></div>
|
||||
<div class="overlap-separate" data-testid="overlap-separate"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="fixture-section" data-testid="contains-slice">
|
||||
<h2>contains vertical slice</h2>
|
||||
<div class="contains-container" data-testid="contains-container">
|
||||
<div class="box-contained" data-testid="box-contained"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,182 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Relation Fixtures - Basic Spatial Relations</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;
|
||||
}
|
||||
|
||||
/* leftOf / rightOf fixture */
|
||||
.horizontal-pair {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
align-items: center;
|
||||
padding: 20px;
|
||||
background: #fafafa;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.box-a {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
background: #3b82f6;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.box-b {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
background: #ef4444;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
/* above / below fixture */
|
||||
.vertical-pair {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24px;
|
||||
padding: 20px;
|
||||
background: #fafafa;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
/* centeredWithin fixture */
|
||||
.center-container {
|
||||
position: relative;
|
||||
width: 300px;
|
||||
height: 200px;
|
||||
background: #e5e7eb;
|
||||
border-radius: 4px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.centered-box {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 100px;
|
||||
height: 60px;
|
||||
background: #8b5cf6;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
/* alignedWith fixture */
|
||||
.alignment-row {
|
||||
display: flex;
|
||||
gap: 40px;
|
||||
align-items: flex-start;
|
||||
padding: 20px;
|
||||
background: #fafafa;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.tall-box {
|
||||
width: 60px;
|
||||
height: 120px;
|
||||
background: #10b981;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.short-box {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
background: #f59e0b;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.alignment-row.center-align {
|
||||
align-items: center;
|
||||
}
|
||||
.alignment-row.bottom-align {
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
/* gap fixture */
|
||||
.gap-container {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
padding: 20px;
|
||||
background: #fafafa;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.gap-box {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background: #6366f1;
|
||||
border-radius: 4px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="fixture-section" data-testid="leftOf-rightOf">
|
||||
<h2>leftOf / rightOf</h2>
|
||||
<div class="horizontal-pair">
|
||||
<div class="box-a" data-testid="box-left"></div>
|
||||
<div class="box-b" data-testid="box-right"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="fixture-section" data-testid="above-below">
|
||||
<h2>above / below</h2>
|
||||
<div class="vertical-pair">
|
||||
<div class="box-a" data-testid="box-top"></div>
|
||||
<div class="box-b" data-testid="box-bottom"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="fixture-section" data-testid="centeredWithin">
|
||||
<h2>centeredWithin</h2>
|
||||
<div class="center-container" data-testid="container">
|
||||
<div class="centered-box" data-testid="centered"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="fixture-section" data-testid="alignedWith-top">
|
||||
<h2>alignedWith - top edge</h2>
|
||||
<div class="alignment-row">
|
||||
<div class="tall-box" data-testid="align-ref"></div>
|
||||
<div class="short-box" data-testid="align-subject"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="fixture-section" data-testid="alignedWith-center">
|
||||
<h2>alignedWith - centerY</h2>
|
||||
<div class="alignment-row center-align">
|
||||
<div class="tall-box" data-testid="align-center-ref"></div>
|
||||
<div class="short-box" data-testid="align-center-subject"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="fixture-section" data-testid="alignedWith-bottom">
|
||||
<h2>alignedWith - bottom edge</h2>
|
||||
<div class="alignment-row bottom-align">
|
||||
<div class="tall-box" data-testid="align-bottom-ref"></div>
|
||||
<div class="short-box" data-testid="align-bottom-subject"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="fixture-section" data-testid="gap-assertion">
|
||||
<h2>gap assertion</h2>
|
||||
<div class="gap-container">
|
||||
<div class="gap-box" data-testid="gap-a"></div>
|
||||
<div class="gap-box" data-testid="gap-b"></div>
|
||||
<div class="gap-box" data-testid="gap-c"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,161 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Responsive Fixtures - Breakpoint Layouts</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;
|
||||
}
|
||||
|
||||
/* Mobile-first responsive layout */
|
||||
.responsive-layout {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
.responsive-sidebar {
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
background: #3b82f6;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.responsive-content {
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
background: #ef4444;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.responsive-layout {
|
||||
flex-direction: row;
|
||||
gap: 24px;
|
||||
}
|
||||
.responsive-sidebar {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
}
|
||||
.responsive-content {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.responsive-layout {
|
||||
gap: 32px;
|
||||
}
|
||||
.responsive-sidebar {
|
||||
width: 250px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Touch target responsive */
|
||||
.touch-target {
|
||||
width: 100%;
|
||||
height: 36px;
|
||||
background: #8b5cf6;
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: white;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
@media (pointer: coarse) {
|
||||
.touch-target {
|
||||
height: 48px;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Color scheme responsive */
|
||||
.theme-aware {
|
||||
padding: 20px;
|
||||
border-radius: 4px;
|
||||
background: white;
|
||||
color: #1f2937;
|
||||
border: 2px solid #e5e7eb;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.theme-aware {
|
||||
background: #1f2937;
|
||||
color: #f9fafb;
|
||||
border-color: #374151;
|
||||
}
|
||||
}
|
||||
|
||||
/* Container query responsive */
|
||||
.cq-container {
|
||||
container-type: inline-size;
|
||||
width: 100%;
|
||||
max-width: 600px;
|
||||
padding: 16px;
|
||||
background: #f3f4f6;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.cq-item {
|
||||
width: 100%;
|
||||
height: 80px;
|
||||
background: #10b981;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
@container (min-width: 400px) {
|
||||
.cq-item {
|
||||
width: 50%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="fixture-section" data-testid="breakpoint-layout">
|
||||
<h2>breakpoint layout shift</h2>
|
||||
<div class="responsive-layout">
|
||||
<div class="responsive-sidebar" data-testid="responsive-sidebar"></div>
|
||||
<div class="responsive-content" data-testid="responsive-content"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="fixture-section" data-testid="touch-target-responsive">
|
||||
<h2>touch target responsive</h2>
|
||||
<div class="touch-target" data-testid="touch-target">
|
||||
Action
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="fixture-section" data-testid="color-scheme-responsive">
|
||||
<h2>color scheme responsive</h2>
|
||||
<div class="theme-aware" data-testid="theme-aware">
|
||||
Theme-aware content
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="fixture-section" data-testid="container-query-responsive">
|
||||
<h2>container query responsive</h2>
|
||||
<div class="cq-container" data-testid="cq-container">
|
||||
<div class="cq-item" data-testid="cq-item"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,93 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Semantic Subjects Fixture</title>
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 40px;
|
||||
font-family: system-ui, sans-serif;
|
||||
}
|
||||
.container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
max-width: 600px;
|
||||
}
|
||||
/* Submit button and cancel button for leftOf test */
|
||||
.button-row {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
align-items: center;
|
||||
}
|
||||
button {
|
||||
padding: 8px 16px;
|
||||
font-size: 14px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
background: #f5f5f5;
|
||||
cursor: pointer;
|
||||
}
|
||||
button[type="submit"] {
|
||||
background: #0066cc;
|
||||
color: white;
|
||||
border-color: #0066cc;
|
||||
}
|
||||
/* Form layout for above test */
|
||||
.form-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
label {
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
}
|
||||
input {
|
||||
padding: 8px 12px;
|
||||
font-size: 14px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
}
|
||||
/* Card for inside test */
|
||||
.card {
|
||||
border: 2px solid #ddd;
|
||||
border-radius: 8px;
|
||||
padding: 24px;
|
||||
background: #fafafa;
|
||||
}
|
||||
.card-title {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
margin: 0 0 12px 0;
|
||||
}
|
||||
.checkout-btn {
|
||||
margin-top: 16px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<!-- Button row: Submit leftOf Cancel -->
|
||||
<div class="button-row">
|
||||
<button type="submit" data-testid="submit-btn">Submit</button>
|
||||
<button type="button" data-testid="cancel-btn">Cancel</button>
|
||||
</div>
|
||||
|
||||
<!-- Form: Email label above Email input -->
|
||||
<div class="form-group">
|
||||
<label for="email-input" data-testid="email-label">Email</label>
|
||||
<input type="email" id="email-input" data-testid="email-input" placeholder="Enter your email">
|
||||
</div>
|
||||
|
||||
<!-- Card with checkout button inside -->
|
||||
<div class="card" data-testid="card">
|
||||
<h2 class="card-title">Order Summary</h2>
|
||||
<p>Review your items before checkout.</p>
|
||||
<button type="button" class="checkout-btn" data-testid="checkout">Checkout</button>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,232 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>State Fixtures - Hover and Focus-Visible</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;
|
||||
}
|
||||
|
||||
/* Hover state fixture */
|
||||
.hover-button {
|
||||
padding: 12px 24px;
|
||||
background: #3b82f6;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
transition: transform 0.2s, background 0.2s;
|
||||
}
|
||||
.hover-button:hover {
|
||||
transform: scale(1.05);
|
||||
background: #2563eb;
|
||||
}
|
||||
|
||||
/* Hover card fixture */
|
||||
.hover-card {
|
||||
width: 200px;
|
||||
padding: 16px;
|
||||
background: white;
|
||||
border: 1px solid #e5e7eb;
|
||||
border-radius: 8px;
|
||||
transition: box-shadow 0.2s, transform 0.2s;
|
||||
cursor: pointer;
|
||||
}
|
||||
.hover-card:hover {
|
||||
box-shadow: 0 10px 25px rgba(0,0,0,0.1);
|
||||
transform: translateY(-4px);
|
||||
}
|
||||
|
||||
/* Focus-visible fixture */
|
||||
.focus-input {
|
||||
width: 250px;
|
||||
padding: 10px 14px;
|
||||
border: 2px solid #d1d5db;
|
||||
border-radius: 4px;
|
||||
font-size: 16px;
|
||||
outline: none;
|
||||
transition: border-color 0.2s, box-shadow 0.2s;
|
||||
}
|
||||
.focus-input:focus-visible {
|
||||
border-color: #3b82f6;
|
||||
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3);
|
||||
}
|
||||
|
||||
/* Focus-visible button */
|
||||
.focus-button {
|
||||
padding: 12px 24px;
|
||||
background: #8b5cf6;
|
||||
color: white;
|
||||
border: 2px solid transparent;
|
||||
border-radius: 4px;
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
transition: border-color 0.2s, box-shadow 0.2s;
|
||||
}
|
||||
.focus-button:focus-visible {
|
||||
border-color: #7c3aed;
|
||||
box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.3);
|
||||
}
|
||||
|
||||
/* State comparison fixture */
|
||||
.state-comparison-container {
|
||||
display: flex;
|
||||
gap: 24px;
|
||||
align-items: flex-start;
|
||||
}
|
||||
.state-box {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
background: #10b981;
|
||||
border-radius: 4px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: white;
|
||||
font-weight: bold;
|
||||
transition: all 0.2s;
|
||||
cursor: pointer;
|
||||
}
|
||||
.state-box:hover {
|
||||
background: #059669;
|
||||
transform: scale(1.1);
|
||||
}
|
||||
.state-box:focus-visible {
|
||||
outline: 3px solid #f59e0b;
|
||||
outline-offset: 4px;
|
||||
}
|
||||
|
||||
/* Active state fixture */
|
||||
.active-button {
|
||||
padding: 12px 24px;
|
||||
background: #ef4444;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
transition: transform 0.1s;
|
||||
}
|
||||
.active-button:active {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="fixture-section" data-testid="hover-button">
|
||||
<h2>hover button</h2>
|
||||
<button class="hover-button" data-testid="hover-btn">
|
||||
Hover Me
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="fixture-section" data-testid="hover-card">
|
||||
<h2>hover card</h2>
|
||||
<div class="hover-card" data-testid="hover-card-el">
|
||||
Card content
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="fixture-section" data-testid="focus-visible-input">
|
||||
<h2>focus-visible input</h2>
|
||||
<input
|
||||
type="text"
|
||||
class="focus-input"
|
||||
data-testid="focus-input"
|
||||
placeholder="Focus me"
|
||||
>
|
||||
</div>
|
||||
|
||||
<div class="fixture-section" data-testid="focus-visible-button">
|
||||
<h2>focus-visible button</h2>
|
||||
<button class="focus-button" data-testid="focus-btn">
|
||||
Focus Me
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="fixture-section" data-testid="state-comparison">
|
||||
<h2>state comparison - default vs hover vs focus</h2>
|
||||
<div class="state-comparison-container">
|
||||
<div class="state-box" data-testid="state-box-a" tabindex="0">
|
||||
Box A
|
||||
</div>
|
||||
<div class="state-box" data-testid="state-box-b" tabindex="0">
|
||||
Box B
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="fixture-section" data-testid="active-state">
|
||||
<h2>active state</h2>
|
||||
<button class="active-button" data-testid="active-btn">
|
||||
Click and Hold
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="fixture-section" data-testid="disabled-state">
|
||||
<h2>disabled state</h2>
|
||||
<button class="hover-button" data-testid="disabled-btn">
|
||||
Disabled Button
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="fixture-section" data-testid="checked-state">
|
||||
<h2>checked state</h2>
|
||||
<label>
|
||||
<input type="checkbox" data-testid="checked-input">
|
||||
Check me
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="fixture-section" data-testid="expanded-state">
|
||||
<h2>expanded/collapsed state</h2>
|
||||
<button data-testid="expand-btn" aria-expanded="false">
|
||||
Toggle Panel
|
||||
</button>
|
||||
<div data-testid="expand-panel" style="display: none;">
|
||||
Panel content
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="fixture-section" data-testid="selected-state">
|
||||
<h2>selected state</h2>
|
||||
<div role="listbox">
|
||||
<div role="option" data-testid="selected-option">Option 1</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="fixture-section" data-testid="pressed-state">
|
||||
<h2>pressed state</h2>
|
||||
<button data-testid="pressed-btn" aria-pressed="false">
|
||||
Toggle
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="fixture-section" data-testid="visited-state">
|
||||
<h2>visited state</h2>
|
||||
<a href="#visited-target" data-testid="visited-link">Visited Link</a>
|
||||
<div id="visited-target"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,191 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Imhotep Storybook-like Fixture</title>
|
||||
<script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
|
||||
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
|
||||
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
|
||||
<style>
|
||||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
||||
background: #f5f5f5;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
/* Story canvas */
|
||||
.story-canvas {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 40px;
|
||||
background: white;
|
||||
border-bottom: 1px solid #e0e0e0;
|
||||
}
|
||||
/* Controls panel */
|
||||
.controls-panel {
|
||||
padding: 16px 24px;
|
||||
background: #fafafa;
|
||||
border-top: 1px solid #e0e0e0;
|
||||
display: flex;
|
||||
gap: 24px;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
}
|
||||
.control-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
.control-label {
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
color: #666;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
.control-value {
|
||||
font-size: 13px;
|
||||
color: #333;
|
||||
font-family: 'SF Mono', Monaco, monospace;
|
||||
}
|
||||
/* Demo component styles */
|
||||
.story-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all 0.15s ease;
|
||||
}
|
||||
.story-btn:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.story-btn-sm {
|
||||
min-width: 60px;
|
||||
min-height: 32px;
|
||||
padding: 4px 12px;
|
||||
font-size: 12px;
|
||||
}
|
||||
.story-btn-md {
|
||||
min-width: 80px;
|
||||
min-height: 40px;
|
||||
padding: 8px 16px;
|
||||
font-size: 14px;
|
||||
}
|
||||
.story-btn-lg {
|
||||
min-width: 100px;
|
||||
min-height: 48px;
|
||||
padding: 12px 24px;
|
||||
font-size: 16px;
|
||||
}
|
||||
.story-card {
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
|
||||
overflow: hidden;
|
||||
}
|
||||
.story-card-compact {
|
||||
padding: 12px;
|
||||
max-width: 300px;
|
||||
}
|
||||
.story-card-normal {
|
||||
padding: 24px;
|
||||
max-width: 400px;
|
||||
}
|
||||
.story-card-title {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 8px;
|
||||
color: #1a1a1a;
|
||||
}
|
||||
.story-card-content {
|
||||
font-size: 14px;
|
||||
line-height: 1.5;
|
||||
color: #4a4a4a;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
|
||||
<script type="text/babel">
|
||||
const { useState, useEffect } = React;
|
||||
|
||||
// Story component that reads args from window.__IMHOTEP_ARGS__
|
||||
function StoryButton({ size = 'md', disabled = false, label = 'Button' }) {
|
||||
const className = `story-btn story-btn-${size}`;
|
||||
return (
|
||||
<button
|
||||
data-testid="story-button"
|
||||
className={className}
|
||||
disabled={disabled}
|
||||
>
|
||||
{label}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
function StoryCard({ title = 'Title', content = 'Content', compact = false }) {
|
||||
const className = `story-card ${compact ? 'story-card-compact' : 'story-card-normal'}`;
|
||||
return (
|
||||
<div data-testid="story-card" className={className}>
|
||||
<div data-testid="story-card-title" className="story-card-title">{title}</div>
|
||||
<div data-testid="story-card-content" className="story-card-content">{content}</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function ControlsPanel({ args }) {
|
||||
return (
|
||||
<div className="controls-panel">
|
||||
{Object.entries(args).map(([key, value]) => (
|
||||
<div key={key} className="control-group">
|
||||
<span className="control-label">{key}</span>
|
||||
<span className="control-value">{String(value)}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function App() {
|
||||
const [args, setArgs] = useState(window.__IMHOTEP_ARGS__ || {
|
||||
size: 'md',
|
||||
disabled: false,
|
||||
label: 'Story Button'
|
||||
});
|
||||
|
||||
// Listen for arg updates from test harness
|
||||
useEffect(() => {
|
||||
const handleUpdate = (event) => {
|
||||
if (event.detail && event.detail.args) {
|
||||
setArgs(event.detail.args);
|
||||
}
|
||||
};
|
||||
window.addEventListener('imhotep:update-args', handleUpdate);
|
||||
return () => window.removeEventListener('imhotep:update-args', handleUpdate);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div style={{ display: 'flex', flexDirection: 'column', height: '100vh' }}>
|
||||
<div className="story-canvas">
|
||||
<StoryButton {...args} />
|
||||
</div>
|
||||
<ControlsPanel args={args} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const root = ReactDOM.createRoot(document.getElementById('root'));
|
||||
root.render(<App />);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -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>
|
||||
@@ -0,0 +1,74 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Imhotep Transform Fixture</title>
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 20px;
|
||||
font-family: system-ui, sans-serif;
|
||||
}
|
||||
|
||||
.container {
|
||||
position: relative;
|
||||
width: 600px;
|
||||
height: 200px;
|
||||
background: #f0f0f0;
|
||||
border: 1px solid #ccc;
|
||||
}
|
||||
|
||||
.box {
|
||||
position: absolute;
|
||||
width: 100px;
|
||||
height: 50px;
|
||||
background: #3498db;
|
||||
color: white;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* Subject A: positioned at left=0, then translated +50px */
|
||||
#subject-a {
|
||||
left: 0;
|
||||
top: 20px;
|
||||
transform: translateX(50px);
|
||||
}
|
||||
|
||||
/* Reference B: positioned at left=200px, no transform */
|
||||
#reference-b {
|
||||
left: 200px;
|
||||
top: 20px;
|
||||
background: #e74c3c;
|
||||
}
|
||||
|
||||
/* Subject C: positioned at left=0, no transform (for layout comparison) */
|
||||
#subject-c {
|
||||
left: 0;
|
||||
top: 100px;
|
||||
background: #2ecc71;
|
||||
}
|
||||
|
||||
/* Reference D: positioned at left=200px, no transform */
|
||||
#reference-d {
|
||||
left: 200px;
|
||||
top: 100px;
|
||||
background: #f39c12;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<!-- Row 1: transformed subject -->
|
||||
<div id="subject-a" class="box">Subject A</div>
|
||||
<div id="reference-b" class="box">Ref B</div>
|
||||
|
||||
<!-- Row 2: non-transformed subject (layout baseline) -->
|
||||
<div id="subject-c" class="box">Subject C</div>
|
||||
<div id="reference-d" class="box">Ref D</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user