Implement contain-intrinsic-size for improved test page performance and stability #4822
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,102 @@ | ||
| # CSS Contain-Intrinsic-Size Implementation for Test Pages | ||
|
|
||
| ## Overview | ||
|
|
||
| This implementation evaluates and adds `contain-intrinsic-size` to test pages in the DB UX Design System to improve test performance, stability, and consistency. | ||
|
|
||
| ## What is `contain-intrinsic-size`? | ||
|
|
||
| `contain-intrinsic-size` is a CSS property that allows developers to specify an intrinsic size to use for layout calculations when an element's content is not immediately available or when CSS containment is applied. | ||
|
|
||
| ## Benefits for Test Pages | ||
|
|
||
| 1. **Layout Stability**: Prevents layout shifts during test execution when content loads asynchronously | ||
| 2. **Performance**: Reduces layout recalculations by containing layout changes to specific elements | ||
| 3. **Consistency**: Ensures predictable sizing across different test environments and browsers | ||
| 4. **Visual Regression Testing**: Provides more stable baseline for screenshot comparisons | ||
|
|
||
| ## Implementation Details | ||
|
|
||
| ### Files Modified | ||
|
|
||
| 1. **`packages/components/test/playwright/boilerplate/index.html`** | ||
| - Added `contain: layout size` and `contain-intrinsic-size: 800px 600px` to the `#root` element | ||
| - Provides stable container for component testing | ||
|
|
||
| 2. **`packages/components/test/import-styles/simple-button/test.css`** | ||
| - Added `contain: layout` and `contain-intrinsic-size: 1200px 800px` to the body element | ||
| - Ensures consistent rendering for component import tests | ||
|
|
||
| 3. **`showcases/showcase-styles.css`** | ||
| - Updated `.variants-card` containers to use `contain: layout` and `contain-intrinsic-size` | ||
| - Replaced `min-block-size` with intrinsic sizing for better performance | ||
|
|
||
| 4. **`packages/components/test/test-optimizations.css`** (New file) | ||
| - Created reusable CSS classes for different test container types | ||
| - Provides standardized containment patterns for various test scenarios | ||
|
|
||
| ### CSS Classes Available | ||
|
|
||
| - `.test-container`, `#root`, `.component-test-wrapper`: General test containers (1024x768) | ||
| - `.form-test-container`: Form testing (600x400) | ||
| - `.button-test-container`: Button testing (300x200) | ||
| - `.showcase-test-container`: Component showcases (800x600) | ||
| - `.small-component-test`: Small components (200x100) | ||
| - `.full-page-test`: Full page testing (1200x900) | ||
|
|
||
| ## Browser Support | ||
|
|
||
| `contain-intrinsic-size` is supported in: | ||
| - Chrome 83+ | ||
| - Firefox 107+ | ||
| - Safari 15.4+ | ||
|
|
||
| This covers all modern browsers used in our testing environment. | ||
|
|
||
| ## Usage Guidelines | ||
|
|
||
| ### For New Test Pages | ||
|
|
||
| ```html | ||
| <div id="root" class="test-container"> | ||
| <!-- Your test content --> | ||
| </div> | ||
| ``` | ||
|
|
||
| ### For Specific Component Tests | ||
|
|
||
| ```html | ||
| <div class="button-test-container"> | ||
| <button class="db-button">Test Button</button> | ||
| </div> | ||
| ``` | ||
|
|
||
| ### For CSS-only Implementation | ||
|
|
||
| ```css | ||
| .my-test-element { | ||
| contain: layout; | ||
| contain-intrinsic-size: 400px 300px; | ||
| } | ||
| ``` | ||
|
|
||
| ## Migration Guide | ||
|
|
||
| Existing test pages will automatically benefit from the updated showcase styles. For new test pages: | ||
|
|
||
| 1. Import `test-optimizations.css` if creating custom test pages | ||
| 2. Use appropriate container classes based on test content size | ||
| 3. Adjust intrinsic sizes if default values don't fit your use case | ||
|
|
||
| ## Performance Impact | ||
|
|
||
| - **Positive**: Reduced layout thrashing during tests | ||
| - **Positive**: Faster initial rendering of test pages | ||
| - **Minimal**: Small CSS overhead for containment styles | ||
| - **None**: No impact on runtime functionality of components | ||
|
|
||
| ## Future Enhancements | ||
|
|
||
| - Consider adding `contain: style` for further isolation if needed | ||
| - Evaluate `content-visibility: auto` for larger test suites | ||
| - Add viewport-based intrinsic sizes for responsive testing |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,110 @@ | ||
| <!doctype html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8" /> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | ||
| <title>Contain-Intrinsic-Size Test Validation</title> | ||
| <style> | ||
| /* Import the test optimizations */ | ||
| @import url("../test-optimizations.css"); | ||
|
|
||
| body { | ||
| font-family: Arial, sans-serif; | ||
| margin: 20px; | ||
| background-color: #f5f5f5; | ||
| } | ||
|
|
||
| .test-section { | ||
| margin-bottom: 30px; | ||
| padding: 20px; | ||
| background: white; | ||
| border: 1px solid #ddd; | ||
| border-radius: 8px; | ||
| } | ||
|
|
||
| .test-title { | ||
| font-size: 18px; | ||
| font-weight: bold; | ||
| margin-bottom: 10px; | ||
| color: #333; | ||
| } | ||
|
|
||
| .containment-demo { | ||
| border: 2px dashed #007bff; | ||
| background-color: #e3f2fd; | ||
| padding: 10px; | ||
| margin: 10px 0; | ||
| } | ||
|
|
||
| /* Demo styles */ | ||
| .test-container-demo { | ||
| background-color: #fff3cd; | ||
| border: 2px solid #ffc107; | ||
| } | ||
|
|
||
| .button-test-container-demo { | ||
| background-color: #d1ecf1; | ||
| border: 2px solid #17a2b8; | ||
| } | ||
|
|
||
| .form-test-container-demo { | ||
| background-color: #d4edda; | ||
| border: 2px solid #28a745; | ||
| } | ||
| </style> | ||
| </head> | ||
| <body> | ||
| <h1>Contain-Intrinsic-Size Implementation Test</h1> | ||
| <p>This page validates the implementation of <code>contain-intrinsic-size</code> for test pages.</p> | ||
|
|
||
| <div class="test-section"> | ||
| <div class="test-title">1. General Test Container (1024x768)</div> | ||
| <div class="test-container containment-demo test-container-demo"> | ||
| <p>This container uses the <code>.test-container</code> class with layout containment and intrinsic size of 1024x768px.</p> | ||
| <p>It should maintain consistent layout during testing scenarios.</p> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div class="test-section"> | ||
| <div class="test-title">2. Button Test Container (300x200)</div> | ||
| <div class="button-test-container containment-demo button-test-container-demo"> | ||
| <p>This container uses the <code>.button-test-container</code> class.</p> | ||
| <button style="padding: 10px 20px; margin: 5px;">Sample Button</button> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div class="test-section"> | ||
| <div class="test-title">3. Form Test Container (600x400)</div> | ||
| <div class="form-test-container containment-demo form-test-container-demo"> | ||
| <p>This container uses the <code>.form-test-container</code> class.</p> | ||
| <form> | ||
| <input type="text" placeholder="Sample input" style="margin: 5px; padding: 5px;"> | ||
| <br> | ||
| <textarea placeholder="Sample textarea" style="margin: 5px; padding: 5px;"></textarea> | ||
| </form> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div class="test-section"> | ||
| <div class="test-title">4. Browser Support Detection</div> | ||
| <div id="support-info" class="containment-demo"> | ||
| <p>Checking browser support for contain-intrinsic-size...</p> | ||
| </div> | ||
| </div> | ||
|
|
||
| <script> | ||
| // Check browser support for contain-intrinsic-size | ||
| const supportInfo = document.getElementById('support-info'); | ||
|
|
||
| if (CSS.supports('contain-intrinsic-size', '100px 100px')) { | ||
| supportInfo.innerHTML = '<p style="color: green;"><strong>✓ Browser supports contain-intrinsic-size</strong></p><p>The implementation will work correctly in this browser.</p>'; | ||
| } else { | ||
| 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>'; | ||
| } | ||
|
|
||
| // Log containment information | ||
| console.log('Test page loaded with contain-intrinsic-size implementation'); | ||
| console.log('Browser support:', CSS.supports('contain-intrinsic-size', '100px 100px')); | ||
| </script> | ||
| </body> | ||
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,48 @@ | ||
| /* Test page optimizations using contain-intrinsic-size for better layout stability and performance */ | ||
|
|
||
| /* | ||
| * CSS Containment with intrinsic sizing for test pages | ||
| * Benefits: | ||
| * - Provides layout stability during test execution | ||
| * - Prevents layout shifts when content loads asynchronously | ||
| * - Improves test performance by limiting layout recalculations | ||
| * - Ensures consistent rendering across different test environments | ||
| */ | ||
|
|
||
| /* Base test container optimization */ | ||
| .test-container, | ||
| #root, | ||
|
There was a problem hiding this comment. #root sizing is defined twice with conflicting values (800×600 in index.html vs 1024×768 in test-optimizations.css). |
||
| .component-test-wrapper { | ||
| contain: layout; | ||
| contain-intrinsic-size: 1024px 768px; | ||
|
There was a problem hiding this comment. As far as I understand, contain-intrinsic-size only takes effect with size containment. „…for layout when the element is subject to size containment.“ Please check all contain: layout rules that use it to contain: layout size (or pair with content-visibility). |
||
| } | ||
|
|
||
| /* Form test containers */ | ||
| .form-test-container { | ||
| contain: layout; | ||
| contain-intrinsic-size: 600px 400px; | ||
| } | ||
|
|
||
| /* Button test containers */ | ||
| .button-test-container { | ||
| contain: layout; | ||
| contain-intrinsic-size: 300px 200px; | ||
| } | ||
|
|
||
| /* Component showcase containers */ | ||
| .showcase-test-container { | ||
| contain: layout; | ||
| contain-intrinsic-size: 800px 600px; | ||
| } | ||
|
|
||
| /* Small component test containers */ | ||
| .small-component-test { | ||
| contain: layout; | ||
| contain-intrinsic-size: 200px 100px; | ||
| } | ||
|
|
||
| /* Full page test containers */ | ||
| .full-page-test { | ||
| contain: layout; | ||
| contain-intrinsic-size: 1200px 900px; | ||
| } | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
#root sizing is defined twice with conflicting values (800×600 in index.html vs 1024×768 in test-optimizations.css).