<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Layout Issues Test Page</title>
<style>
body { font-family: system-ui, sans-serif; padding: 20px; background: #f5f5f5; margin: 0; }
.container { max-width: 800px; margin: 0 auto; background: white; padding: 20px; border-radius: 8px; }
h1 { color: #333; }
h2 { color: #666; margin-top: 30px; }
/* Overflow issues */
.overflow-visible {
width: 200px;
height: 100px;
border: 2px solid #f44336;
overflow: visible;
margin: 20px 0;
}
.overflow-content {
width: 400px;
height: 200px;
background: linear-gradient(45deg, #f44336, #e91e63);
color: white;
padding: 10px;
}
/* Z-index stacking issues */
.stacking-context {
position: relative;
height: 150px;
border: 2px solid #9c27b0;
margin: 20px 0;
}
.layer-1 {
position: absolute;
top: 10px;
left: 10px;
width: 100px;
height: 100px;
background: #2196f3;
z-index: 10;
color: white;
padding: 10px;
}
.layer-2 {
position: absolute;
top: 30px;
left: 30px;
width: 100px;
height: 100px;
background: #4caf50;
z-index: 5;
color: white;
padding: 10px;
}
.layer-3 {
position: absolute;
top: 50px;
left: 50px;
width: 100px;
height: 100px;
background: #ff9800;
z-index: 999;
color: white;
padding: 10px;
}
/* Overlapping elements */
.overlap-container {
position: relative;
height: 100px;
margin: 20px 0;
}
.overlap-1, .overlap-2 {
position: absolute;
width: 150px;
height: 80px;
display: flex;
align-items: center;
justify-content: center;
color: white;
}
.overlap-1 { left: 0; background: #673ab7; }
.overlap-2 { left: 100px; background: #009688; }
/* Text truncation issues */
.text-truncate {
width: 150px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
background: #e0e0e0;
padding: 10px;
margin: 10px 0;
}
/* Text that might overflow */
.text-overflow-hidden {
width: 100px;
overflow: hidden;
background: #ffeb3b;
padding: 10px;
margin: 10px 0;
}
/* Negative margins causing overlap */
.negative-margin-1 { background: #03a9f4; padding: 20px; color: white; }
.negative-margin-2 { background: #ff5722; padding: 20px; color: white; margin-top: -20px; }
/* Transform causing layout shifts */
.transformed {
transform: translateX(-10px) scale(1.1);
background: #8bc34a;
padding: 15px;
margin: 30px 0;
color: white;
}
/* Deep nesting */
.deep-nest { padding: 5px; border-left: 2px solid #ccc; margin-left: 10px; }
</style>
</head>
<body>
<div class="container">
<h1>Layout Issues Test Page</h1>
<p>This page intentionally contains layout issues for testing the audit system.</p>
<h2>Overflow Issue</h2>
<div class="overflow-visible">
<div class="overflow-content">
This content overflows its container with overflow: visible.
This will be detected as a layout issue.
</div>
</div>
<h2>Z-Index Stacking</h2>
<div class="stacking-context">
<div class="layer-1">z-index: 10</div>
<div class="layer-2">z-index: 5</div>
<div class="layer-3">z-index: 999</div>
</div>
<h2>Overlapping Elements</h2>
<div class="overlap-container">
<div class="overlap-1">Element 1</div>
<div class="overlap-2">Element 2</div>
</div>
<h2>Text Truncation</h2>
<div class="text-truncate">
This is a very long text that will be truncated with ellipsis
</div>
<div class="text-overflow-hidden">
Overflow hidden text that gets cut off abruptly
</div>
<h2>Negative Margin Overlap</h2>
<div class="negative-margin-1">First element</div>
<div class="negative-margin-2">Overlaps via negative margin</div>
<h2>Transform Shift</h2>
<div class="transformed">
Transformed element (translateX + scale)
</div>
<h2>Deep Nesting</h2>
<div class="deep-nest">Level 1
<div class="deep-nest">Level 2
<div class="deep-nest">Level 3
<div class="deep-nest">Level 4
<div class="deep-nest">Level 5
<div class="deep-nest">Level 6
<div class="deep-nest">Level 7
<div class="deep-nest">Level 8 - Very deep!</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
console.log('[Test Page] layout-issues.html loaded');
window.testPageType = 'layout-issues';
</script>
</body>
</html>
