@dnb/eufemia
Version:
DNB Eufemia Design System UI Library
80 lines (69 loc) • 2.01 kB
CSS
/* stop scrolling */
*,
html {
scroll-behavior: auto ;
}
/* Force scrollbar to always be visible so viewport width
stays consistent across tests sharing a page */
html {
overflow-y: scroll ;
}
.sticky-menu,
#portal-sidebar-menu {
display: none ;
}
.dnb-live-editor {
padding: 0 ;
}
.dnb-app-content {
margin-left: 0 ;
}
[data-visual-test-wrapper] {
position: relative;
z-index: 9999;
/* to get smaller width to the right (no white space) */
display: inline-block;
/**
* to get a space around the element,
* so we can include a box-shadow in the screenshot
*/
padding: 1rem;
margin: -1rem;
box-shadow: 0 0 0 1px #fff;
background: #fff;
}
[data-visual-test]:has(
.dnb-section[style*='--outset--medium: 1'],
.dnb-section[style*='--outset--large: 1']
) {
@media (min-width: 40em) {
padding-left: 1.5rem;
padding-right: 1.5rem;
}
}
[data-visual-test].hide-page-content #root {
/* NB: visibility: hidden; does not work here, because playwright does not find the selectors anymore */
opacity: 0;
}
/*
* Disable all transitions and animations during visual tests.
*
* The screenshot engine reuses the same long-lived page across many
* tests; when we apply a `:hover` programmatically the browser
* dispatches the synthetic mouse events but the resulting paint can
* be deferred by an in-flight transition (200-250ms on radio dot,
* tertiary button underline, etc.). A subsequent reload/screenshot
* then races the transition end and captures an intermediate frame.
*
* Killing transitions/animations universally is the cheapest way to
* make the screenshots deterministic without per-component overrides.
*/
html[data-visual-test] *,
html[data-visual-test] *::before,
html[data-visual-test] *::after {
transition-duration: 0ms ;
transition-delay: 0ms ;
animation-duration: 0ms ;
animation-delay: 0ms ;
animation-iteration-count: 1 ;
}