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
+120 −1
Open

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

Show file tree
Hide file tree
Changes from all commits
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
6 changes: 5 additions & 1 deletion plugins/view-transitions/includes/theme.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -373,10 +373,14 @@ function plvt_load_view_transitions(): void {
* @access private
*
* @param string $css The raw CSS string containing the placeholder `plvt-view-transition-duration;`.
* @param int $animation_duration Transition duration in milliseconds. Will be converted to seconds. Defaults to 1000ms if invalid.
* @param int $animation_duration Transition duration in milliseconds. Will be converted to seconds. Defaults to 400ms if invalid.
* @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 ) {
$animation_duration = 400;
}

$seconds = $animation_duration / 1000;

// Inject animation duration as CSS variable to take effect.
Expand Down
115 changes: 115 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,119 @@ 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_is_valid' => array(
'css' => '',
'duration' => 0,
'expected' => '::view-transition-group(*) { animation-duration: 0s; }',
),
'with_negative_duration_defaults_to_400ms' => 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.4s; }',
),
'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['default-animation'] );
$this->assertSame( 400, $support['default-animation-duration'] );
$this->assertIsArray( $support['global-transition-names'] );
$this->assertIsArray( $support['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['default-animation'] );
$this->assertSame( array(), $support['global-transition-names'] );
$this->assertSame( array(), $support['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;
$callback = static function ( $reg ) use ( &$action_fired, $registry ): void {
if ( $reg === $registry ) {
$action_fired = true;
}
};

add_action( 'plvt_register_view_transition_animations', $callback );
plvt_register_view_transition_animations( $registry );
remove_action( 'plvt_register_view_transition_animations', $callback );

$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