Skip to content

Commit dfb0b86

Browse files
Copilotmfranzke
Copilot
and
mfranzke
committed
Add validation test page for contain-intrinsic-size implementation
Co-authored-by: mfranzke <[email protected]>
1 parent 03bdde3 commit dfb0b86

File tree

1 file changed

+110
-0
lines changed

1 file changed

+110
-0
lines changed

‎packages/components/test/contain-intrinsic-size-validation.html‎

Lines changed: 110 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,110 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Contain-Intrinsic-Size Test Validation</title>
7+
<style>
8+
/* Import the test optimizations */
9+
@import url("../test-optimizations.css");
10+
11+
body {
12+
font-family: Arial, sans-serif;
13+
margin: 20px;
14+
background-color: #f5f5f5;
15+
}
16+
17+
.test-section {
18+
margin-bottom: 30px;
19+
padding: 20px;
20+
background: white;
21+
border: 1px solid #ddd;
22+
border-radius: 8px;
23+
}
24+
25+
.test-title {
26+
font-size: 18px;
27+
font-weight: bold;
28+
margin-bottom: 10px;
29+
color: #333;
30+
}
31+
32+
.containment-demo {
33+
border: 2px dashed #007bff;
34+
background-color: #e3f2fd;
35+
padding: 10px;
36+
margin: 10px 0;
37+
}
38+
39+
/* Demo styles */
40+
.test-container-demo {
41+
background-color: #fff3cd;
42+
border: 2px solid #ffc107;
43+
}
44+
45+
.button-test-container-demo {
46+
background-color: #d1ecf1;
47+
border: 2px solid #17a2b8;
48+
}
49+
50+
.form-test-container-demo {
51+
background-color: #d4edda;
52+
border: 2px solid #28a745;
53+
}
54+
</style>
55+
</head>
56+
<body>
57+
<h1>Contain-Intrinsic-Size Implementation Test</h1>
58+
<p>This page validates the implementation of <code>contain-intrinsic-size</code> for test pages.</p>
59+
60+
<div class="test-section">
61+
<div class="test-title">1. General Test Container (1024x768)</div>
62+
<div class="test-container containment-demo test-container-demo">
63+
<p>This container uses the <code>.test-container</code> class with layout containment and intrinsic size of 1024x768px.</p>
64+
<p>It should maintain consistent layout during testing scenarios.</p>
65+
</div>
66+
</div>
67+
68+
<div class="test-section">
69+
<div class="test-title">2. Button Test Container (300x200)</div>
70+
<div class="button-test-container containment-demo button-test-container-demo">
71+
<p>This container uses the <code>.button-test-container</code> class.</p>
72+
<button style="padding: 10px 20px; margin: 5px;">Sample Button</button>
73+
</div>
74+
</div>
75+
76+
<div class="test-section">
77+
<div class="test-title">3. Form Test Container (600x400)</div>
78+
<div class="form-test-container containment-demo form-test-container-demo">
79+
<p>This container uses the <code>.form-test-container</code> class.</p>
80+
<form>
81+
<input type="text" placeholder="Sample input" style="margin: 5px; padding: 5px;">
82+
<br>
83+
<textarea placeholder="Sample textarea" style="margin: 5px; padding: 5px;"></textarea>
84+
</form>
85+
</div>
86+
</div>
87+
88+
<div class="test-section">
89+
<div class="test-title">4. Browser Support Detection</div>
90+
<div id="support-info" class="containment-demo">
91+
<p>Checking browser support for contain-intrinsic-size...</p>
92+
</div>
93+
</div>
94+
95+
<script>
96+
// Check browser support for contain-intrinsic-size
97+
const supportInfo = document.getElementById('support-info');
98+
99+
if (CSS.supports('contain-intrinsic-size', '100px 100px')) {
100+
supportInfo.innerHTML = '<p style="color: green;"><strong>✓ Browser supports contain-intrinsic-size</strong></p><p>The implementation will work correctly in this browser.</p>';
101+
} else {
102+
supportInfo.innerHTML = '<p style="color: orange;"><strong>⚠ Browser does not support contain-intrinsic-size</strong></p><p>The CSS will be ignored gracefully, falling back to default behavior.</p>';
103+
}
104+
105+
// Log containment information
106+
console.log('Test page loaded with contain-intrinsic-size implementation');
107+
console.log('Browser support:', CSS.supports('contain-intrinsic-size', '100px 100px'));
108+
</script>
109+
</body>
110+
</html>

0 commit comments

Comments
 (0)