From 84fb3811cda4b2f00b5676524cb585cb69daaad5 Mon Sep 17 00:00:00 2001 From: Dave Lockhart Date: Tue, 10 Oct 2023 10:47:37 -0400 Subject: [PATCH] documentation for handling motion in vdiffs (#209) --- README.md | 24 ++++++++++++++++++++++++ 1 file changed, 24 insertions(+) diff --git a/README.md b/README.md index 042b0998..3aedd971 100644 --- a/README.md +++ b/README.md @@ -522,6 +522,30 @@ const tag = defineCE( ); ``` +### Components with Motion + +Components with animations or transitions can cause inconsistent vdiff snapshots, since small timing variations to the snapshot can catch the motion at slightly different points along its path. To help address this, `d2l-test-runner` configures the browser with the `prefers-reduced-motion` setting enabled. + +To opt-in to this setting, adjust the component's animation/transition CSS such that it only applies the motion when `prefers-reduced-motion` is set to `no-preference`. + +For example: + +```css +my-elem { + opacity: 1; +} +my-elem.faded-out { + opacity: 0; +} +@media (prefers-reduced-motion: no-preference) { + my-elem { + transition: opacity 0.2s ease-in-out; + } +} +``` + +In addition to making vdiff testing more reliable, disabling or reducing motion based on the `prefers-reduced-motion` setting is recommended to help avoid discomfort for those with [vestibular motion disorders](https://www.a11yproject.com/posts/understanding-vestibular-disorders/). + ### Running Vdiff Tests Vdiff tests must be in files with the `*.vdiff.js` extension. They are run with the special `vdiff` command: