Animate client rail icons on menu activation
This commit is contained in:
@@ -112,8 +112,11 @@ test('secondary menus share one right rail and both drawers open from the right'
|
||||
assert.match(disabledRulesLabel, /opacity:\s*0/);
|
||||
assert.match(disabledRulesLabel, /filter:\s*blur\(5px\)/);
|
||||
assert.match(styles, /\.client-local-rules-toggle:disabled:hover span\s*\{[\s\S]*opacity:\s*1/);
|
||||
assert.match(styles, /\.client-instructions-toggle:hover svg,[\s\S]*\.client-instructions-toggle:focus-visible svg \{[\s\S]*client-secondary-icon-motion 620ms/);
|
||||
assert.match(styles, /@keyframes client-secondary-icon-motion[\s\S]*rotate\(-8deg\)[\s\S]*rotate\(5deg\)/);
|
||||
assert.match(component, /client-rail-info-ring[\s\S]*client-rail-device-primary[\s\S]*client-rail-device-secondary[\s\S]*client-rail-device-link[\s\S]*client-rail-diagnostics-wave[\s\S]*client-rail-rule-knob is-top[\s\S]*client-rail-rule-knob is-bottom/);
|
||||
assert.match(styles, /client-rail-info-refill[\s\S]*client-rail-device-left[\s\S]*client-rail-device-right[\s\S]*client-rail-device-link[\s\S]*client-rail-diagnostics-wave[\s\S]*client-rail-rule-top[\s\S]*client-rail-rule-bottom/);
|
||||
assert.match(styles, /@keyframes client-rail-diagnostics-wave[\s\S]*scaleY\(0\.68\)[\s\S]*scaleY\(1\.32\)/);
|
||||
assert.match(styles, /@keyframes client-rail-info-refill[\s\S]*stroke-dashoffset: 1[\s\S]*stroke-dashoffset: 0/);
|
||||
assert.doesNotMatch(styles, /client-secondary-icon-motion|\.client-local-rules-toggle\.is-open svg\s*\{[^}]*rotate/);
|
||||
assert.match(rule('.client-drawer'), /inset:\s*0 0 0 auto/);
|
||||
assert.match(rule('.client-drawer'), /transform:\s*translateX\(104%\)/);
|
||||
assert.match(rule('.client-drawer'), /z-index:\s*50/);
|
||||
@@ -177,6 +180,9 @@ test('responsive motion has a reduced-motion fallback', () => {
|
||||
assert.match(reducedMotion, /\.client-power-section/);
|
||||
assert.match(reducedMotion, /\.client-form/);
|
||||
assert.match(reducedMotion, /\.harbor-brand/);
|
||||
assert.match(reducedMotion, /\.client-instructions-toggle circle/);
|
||||
assert.match(reducedMotion, /\.client-instructions-toggle rect/);
|
||||
assert.match(reducedMotion, /\.client-local-rules-toggle circle/);
|
||||
assert.match(reducedMotion, /transition:\s*none/);
|
||||
assert.match(reducedMotion, /animation:\s*none/);
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user