Skip to content

View Transitions: Ensure animation duration defaults to 1000ms when i… #2706

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
sonali195 wants to merge 3 commits into
base: trunk
Choose a base branch
from
Open

View Transitions: Ensure animation duration defaults to 1000ms when i… #2706

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
3637484
View Transitions: Ensure animation duration defaults to 1000ms when i…
sonali195 Oct 9, 2026
9932be5
View Transitions: Fix array indexing in theme support unit tests
sonali195 Oct 9, 2026
540824a
View Transitions: Support 0ms duration, default negative durations to…
sonali195 Oct 9, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions plugins/view-transitions/includes/theme.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -377,6 +377,10 @@ function plvt_load_view_transitions(): void {
* @return string Modified CSS with the actual animation duration in seconds.
*/
function plvt_inject_animation_duration( string $css, int $animation_duration ): string {
if ( $animation_duration <= 0 ) {

@adamsilverstein adamsilverstein Oct 9, 2026

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is called with abs_int in https://github.com/WordPress/performance/pull/2706/changes#diff-1c421c546ad4335a5b5233d0dbb71cd84a39fb2049233e0b0e96241e0e58288aR319, but a guard may still be worthwhile in case others call the function incorrectly.

Wouldn't 0 be a valid value here?

The docblock seems inaccurate, the default is supposed to be 400 ms (settings.php:69), maybe we should fix that as well?

@sonali195 sonali195 Oct 9, 2026

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for the great feedback! You are completely right on all points:

  1. Allow 0ms as valid duration: Updated the check to strictly negative ($animation_duration < 0). A value of 0 is preserved and renders 0s, which is valid CSS for instant transitions.
  2. Default to 400ms & docblock fix: Updated the docblock and fallback value to 400ms to stay consistent with settings.php and theme.php (as updated in Set default view transition duration to 400 for better alignment with browser default #2081).
  3. Test coverage: Updated the unit test suite to verify that 0ms produces 0s, and negative values default to 400ms (0.4s). Also fixed the array index offset in the theme support unit test.

$animation_duration = 1000;
}

$seconds = $animation_duration / 1000;

// Inject animation duration as CSS variable to take effect.
Expand Down
117 changes: 117 additions & 0 deletions plugins/view-transitions/tests/test-theme.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,4 +48,121 @@ public function test_plvt_load_view_transitions(): void {
$this->assertTrue( wp_style_is( 'plvt-view-transitions', 'registered' ) );
$this->assertTrue( wp_style_is( 'plvt-view-transitions', 'enqueued' ) );
}

/**
* Data provider for test_plvt_inject_animation_duration.
*
* @return array<string, array{
* css: string,
* duration: int,
* expected: string
* }>
*/
public function data_plvt_inject_animation_duration(): array {
return array(
'with_existing_css_and_custom_duration' => array(
'css' => '::view-transition-old(root) { opacity: 1; }',
'duration' => 500,
'expected' => '::view-transition-old(root) { opacity: 1; }::view-transition-group(*) { --plvt-view-transition-animation-duration: 0.5s; }',
),
'with_existing_css_and_default_duration' => array(
'css' => '::view-transition-new(root) { opacity: 0; }',
'duration' => 400,
'expected' => '::view-transition-new(root) { opacity: 0; }::view-transition-group(*) { --plvt-view-transition-animation-duration: 0.4s; }',
),
'with_empty_css_and_custom_duration' => array(
'css' => '',
'duration' => 300,
'expected' => '::view-transition-group(*) { animation-duration: 0.3s; }',
),
'with_zero_duration_defaults_to_1000ms' => array(
'css' => '',
'duration' => 0,
'expected' => '::view-transition-group(*) { animation-duration: 1s; }',
),
'with_negative_duration_defaults_to_1000ms' => array(
'css' => '::view-transition-old(root) { opacity: 1; }',
'duration' => -500,
'expected' => '::view-transition-old(root) { opacity: 1; }::view-transition-group(*) { --plvt-view-transition-animation-duration: 1s; }',
),
'with_standard_1000ms_duration' => array(
'css' => '',
'duration' => 1000,
'expected' => '::view-transition-group(*) { animation-duration: 1s; }',
),
);
}

/**
* @covers ::plvt_inject_animation_duration
* @dataProvider data_plvt_inject_animation_duration
*
* @param string $css Input CSS.
* @param int $duration Animation duration in milliseconds.
* @param string $expected Expected output CSS.
*/
public function test_plvt_inject_animation_duration( string $css, int $duration, string $expected ): void {
$this->assertSame( $expected, plvt_inject_animation_duration( $css, $duration ) );
}

/**
* @covers ::plvt_sanitize_view_transitions_theme_support
*/
public function test_plvt_sanitize_view_transitions_theme_support(): void {
// Test when theme support is not registered.
remove_theme_support( 'view-transitions' );
plvt_sanitize_view_transitions_theme_support();
$this->assertFalse( get_theme_support( 'view-transitions' ) );

// Test when theme support is registered as boolean true (defaults are applied).
add_theme_support( 'view-transitions' );
plvt_sanitize_view_transitions_theme_support();
$support = get_theme_support( 'view-transitions' );
$this->assertIsArray( $support );
$this->assertSame( 'fade', $support[0]['default-animation'] );
$this->assertSame( 400, $support[0]['default-animation-duration'] );
$this->assertIsArray( $support[0]['global-transition-names'] );
$this->assertIsArray( $support[0]['post-transition-names'] );

// Test when invalid non-array transition names are supplied (enforces array type).
add_theme_support(
'view-transitions',
array(
'default-animation' => 'slide',
'global-transition-names' => 'invalid-string',
'post-transition-names' => null,
)
);
plvt_sanitize_view_transitions_theme_support();
$support = get_theme_support( 'view-transitions' );
$this->assertIsArray( $support );
$this->assertSame( 'slide', $support[0]['default-animation'] );
$this->assertSame( array(), $support[0]['global-transition-names'] );
$this->assertSame( array(), $support[0]['post-transition-names'] );
}

/**
* @covers ::plvt_register_view_transition_animations
*/
public function test_plvt_register_view_transition_animations(): void {
$registry = new PLVT_View_Transition_Animation_Registry();
$action_fired = false;

add_action(
'plvt_register_view_transition_animations',
static function ( $reg ) use ( &$action_fired, $registry ): void {
if ( $reg === $registry ) {
$action_fired = true;
}
}
);

plvt_register_view_transition_animations( $registry );

$this->assertTrue( $action_fired );
$this->assertTrue( $registry->use_animation_global_transition_names( 'fade' ) );
$this->assertTrue( $registry->use_animation_post_transition_names( 'fade' ) );
$this->assertFalse( $registry->use_animation_global_transition_names( 'wipe' ) );
$this->assertTrue( $registry->use_animation_post_transition_names( 'wipe' ) );
}
}
Loading