Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
Original file line number Diff line number Diff line change
Expand Up @@ -7,13 +7,14 @@ browser-compat: css.properties.view-transition-class
sidebar: cssref
---

The **`view-transition-class`** [CSS](/en-US/docs/Web/CSS) property provides the selected elements with an identifying class (a {{cssxref("custom-ident")}}), providing an additional method of styling the view transitions for those elements.
The **`view-transition-class`** [CSS](/en-US/docs/Web/CSS) property provides the selected elements with one or more identifying classes ({{cssxref("custom-ident")}}s), providing an additional method of styling the view transitions for those elements.

## Syntax

```css
/* <custom-ident> value examples */
view-transition-class: card;
view-transition-class: card fast-slide;

/* Keyword value */
view-transition-class: none;
Expand All @@ -29,7 +30,7 @@ view-transition-class: unset;
### Values

- {{cssxref("custom-ident")}}
- : An identifying name that causes the selected element to participate in a separate [view transition](/en-US/docs/Web/API/View_Transition_API) from the root view transition. The identifier must be unique. If two rendered elements have the same `view-transition-name` at the same time, {{domxref("ViewTransition.ready")}} will reject and the transition will be skipped.
- : An identifying name used to select view transition pseudo-elements for styling. Unlike `view-transition-name`, a class does not need to be unique and does not cause the element to participate in a separate view transition group.
- `none`
- : No class would apply to the named view transition pseudo-elements generated for this element.

Expand All @@ -38,7 +39,7 @@ view-transition-class: unset;
The `view-transition-class` value provides a styling hook, similar to a CSS class name, which can be used to apply the same styles to multiple view transition pseudo-elements. It does not mark an element for capturing. Each individual element still needs its own unique {{cssxref("view-transition-name")}}; the `view-transition-class` is only used as an additional way to style elements that already have a `view-transition-name`.
Support for determining the `view-transition-name` automatically is being discussed in the [CSS View Transitions Module Level 2](https://drafts.csswg.org/css-view-transitions-2/#auto-vt-name) spec.

The `view-transition-class` apply styles using the view transition pseudo-elements, including {{cssxref("::view-transition-group()")}}, {{cssxref("::view-transition-image-pair()")}}, {{cssxref("::view-transition-old()")}}, and {{cssxref("::view-transition-new()")}}. This is different from the `view-transition-name`, which matches view transitions between the element in the old state with its corresponding element in the new state.
The `view-transition-class` applies styles using the view transition pseudo-elements, including {{cssxref("::view-transition-group()")}}, {{cssxref("::view-transition-image-pair()")}}, {{cssxref("::view-transition-old()")}}, and {{cssxref("::view-transition-new()")}}. This is different from the `view-transition-name`, which matches view transitions between the element in the old state with its corresponding element in the new state.

Until the `view-transition-class` property is fully supported in all browsers supporting view transitions, include a custom `::view-transition-group()` for each element.

Expand All @@ -52,21 +53,76 @@ Until the `view-transition-class` property is fully supported in all browsers su

## Examples

### Styling a shared class across multiple elements

In this example, three cards each have a unique {{cssxref("view-transition-name")}} (required for pairing old and new states), but they all share the same `view-transition-class`. This lets you write a single rule that styles all their transitions at once, rather than repeating styles for each name individually. Unlike `view-transition-name`, a `view-transition-class` does not need to be unique.

```html
<div class="card" id="card1">Card 1</div>
<div class="card" id="card2">Card 2</div>
<div class="card" id="card3">Card 3</div>
```

```css
/* Each element must have a unique view-transition-name */
#card1 {
view-transition-name: card-1;
}

#card2 {
view-transition-name: card-2;
}

#card3 {
view-transition-name: card-3;
}

/* But they can all share the same view-transition-class */
.card {
view-transition-class: card;
}

/* This single rule applies to all three cards' transitions */
::view-transition-group(.card) {
animation-duration: 0.5s;
animation-timing-function: ease-in-out;
}
```

### Using multiple classes on a single element

A `view-transition-class` value can be a space-separated list of identifiers, letting you compose several "atomic" styles on the same element and target each one independently of your view transition pseudo-elements. In this example, both cards share the same two classes — `slide` controls the animation, and `fast-transition` controls its duration — while each card still has its own unique {{cssxref("view-transition-name")}}.

```html
<div class="card" id="card1">Card 1</div>
<div class="card" id="card2">Card 2</div>
```

```css
::view-transition-group(.fast-card-slide) {
animation-duration: 3s;
.card {
view-transition-class: slide fast-transition;
}

#card1 {
view-transition-name: card-1;
}

#card2 {
view-transition-name: card-2;
}

.product {
view-transition-class: fast-card-slide;
/* The `slide` class drives which animation runs... */
::view-transition-new(.slide) {
animation-name: slide-in;
}

.product#card1 {
view-transition-name: show-card;
::view-transition-old(.slide) {
animation-name: slide-out;
}

.product#card2 {
view-transition-name: hide-card;
/* ...while the `fast-transition` class drives how long it runs. */
::view-transition-group(.fast-transition) {
animation-duration: 0.5s;
}
```

Expand Down
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
---
title: log.entryAdded event
short-title: log.entryAdded
title: "`log.entryAdded` event"
short-title: entryAdded
slug: Web/WebDriver/Reference/BiDi/Modules/log/entryAdded
page-type: webdriver-event
browser-compat: webdriver.bidi.log.entryAdded_event
Expand Down
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
---
title: session.end command
short-title: session.end
title: "`session.end` command"
short-title: end
slug: Web/WebDriver/Reference/BiDi/Modules/session/end
page-type: webdriver-command
status:
Expand Down
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
---
title: session.new command
short-title: session.new
title: "`session.new` command"
short-title: new
slug: Web/WebDriver/Reference/BiDi/Modules/session/new
page-type: webdriver-command
browser-compat: webdriver.bidi.session.new
Expand Down Expand Up @@ -85,7 +85,7 @@ The browser may also return vendor-specific capabilities prefixed with a browser

### Errors

- session not created
- `session not created`
- : A session already exists, or the browser is unable to create a new session (for example, because a requested capability cannot be satisfied).

## Examples
Expand Down
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
---
title: session.status command
short-title: session.status
title: "`session.status` command"
short-title: status
slug: Web/WebDriver/Reference/BiDi/Modules/session/status
page-type: webdriver-command
browser-compat: webdriver.bidi.session.status
Expand Down
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
---
title: session.subscribe command
short-title: session.subscribe
title: "`session.subscribe` command"
short-title: subscribe
slug: Web/WebDriver/Reference/BiDi/Modules/session/subscribe
page-type: webdriver-command
browser-compat: webdriver.bidi.session.subscribe
Expand Down
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
---
title: session.unsubscribe command
short-title: session.unsubscribe
title: "`session.unsubscribe` command"
short-title: unsubscribe
slug: Web/WebDriver/Reference/BiDi/Modules/session/unsubscribe
page-type: webdriver-command
browser-compat: webdriver.bidi.session.unsubscribe
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -26,11 +26,11 @@ The _Back_ [command](/en-US/docs/Web/WebDriver/Reference/Classic/Commands) of th

### Errors

- [Invalid session id](/en-US/docs/Web/WebDriver/Reference/Errors/InvalidSessionID)
- [`invalid session id`](/en-US/docs/Web/WebDriver/Reference/Errors/InvalidSessionID)
- : Session does not exist.
- No such window
- `no such window`
- : The [`window`](/en-US/docs/Web/API/Window) object has been discarded, indicating that the tab or window has been closed.
- Timeout
- `timeout`
- : The navigation did not complete before its timeout expired.

## Examples
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ browser-compat: webdriver.classic.CloseWindow
sidebar: webdriver
---

The _Close Window_ [command](/en-US/docs/Web/WebDriver/Reference/Command) of the [WebDriver](/en-US/docs/Web/WebDriver) API closes the current top-level browsing context (window or tab) and returns with the list of currently open [`WebWindow`](/en-US/docs/Web/WebDriver/Reference/WebWindow)s. If it is the last window that is being closed, the WebDriver session will implicitly be deleted. Subsequent commands after the session is ended will therefore cause [invalid session ID](/en-US/docs/Web/WebDriver/Reference/Errors/InvalidSessionID) errors.
The _Close Window_ [command](/en-US/docs/Web/WebDriver/Reference/Command) of the [WebDriver](/en-US/docs/Web/WebDriver) API closes the current top-level browsing context (window or tab) and returns with the list of currently open [`WebWindow`](/en-US/docs/Web/WebDriver/Reference/WebWindow)s. If it is the last window that is being closed, the WebDriver session will implicitly be deleted. Subsequent commands after the session is ended will therefore cause [`invalid session id`](/en-US/docs/Web/WebDriver/Reference/Errors/InvalidSessionID) errors.

## Syntax

Expand All @@ -21,9 +21,9 @@ The _Close Window_ [command](/en-US/docs/Web/WebDriver/Reference/Command) of the

### Errors

- [Invalid session ID](/en-US/docs/Web/WebDriver/Reference/Errors/InvalidSessionID)
- [`invalid session id`](/en-US/docs/Web/WebDriver/Reference/Errors/InvalidSessionID)
- : Session does not exist.
- [Unexpected alert open](/en-US/docs/Web/WebDriver/Reference/Errors/UnexpectedAlertOpen)
- [`unexpected alert open`](/en-US/docs/Web/WebDriver/Reference/Errors/UnexpectedAlertOpen)
- : A user prompt, such as [`window.alert`](/en-US/docs/Web/API/Window/alert), blocks execution of command until it is dealt with.

## Example
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -26,11 +26,11 @@ The _Forward_ [command](/en-US/docs/Web/WebDriver/Reference/Classic/Commands) of

### Errors

- [Invalid session id](/en-US/docs/Web/WebDriver/Reference/Errors/InvalidSessionID)
- [`invalid session id`](/en-US/docs/Web/WebDriver/Reference/Errors/InvalidSessionID)
- : Session does not exist.
- No such window
- `no such window`
- : The [`window`](/en-US/docs/Web/API/Window) object has been discarded, indicating that the tab or window has been closed.
- Timeout
- `timeout`
- : The navigation did not complete before its timeout expired.

## Examples
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -25,11 +25,11 @@ The _Get Element Attribute_ [command](/en-US/docs/Web/WebDriver/Reference/Comman

### Errors

- [Session not created](/en-US/docs/Web/WebDriver/Reference/Errors/SessionNotCreated)
- [`session not created`](/en-US/docs/Web/WebDriver/Reference/Errors/SessionNotCreated)
- : Session does not exist.
- [No such window](/en-US/docs/Web/WebDriver/Reference/Errors/NoSuchWindow)
- [`no such window`](/en-US/docs/Web/WebDriver/Reference/Errors/NoSuchWindow)
- : The [`window`](/en-US/docs/Web/API/Window) object has been discarded, indicating that the tab or window has been closed.
- [Unexpected alert open](/en-US/docs/Web/WebDriver/Reference/Errors/UnexpectedAlertOpen)
- [`unexpected alert open`](/en-US/docs/Web/WebDriver/Reference/Errors/UnexpectedAlertOpen)
- : A user prompt, such as [`window.alert`](/en-US/docs/Web/API/Window/alert), blocks execution of command until it is dealt with.

## Examples
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -25,11 +25,11 @@ The _Get Element Property_ [command](/en-US/docs/Web/WebDriver/Reference/Classic

### Errors

- [Session not created](/en-US/docs/Web/WebDriver/Reference/Errors/SessionNotCreated)
- [`session not created`](/en-US/docs/Web/WebDriver/Reference/Errors/SessionNotCreated)
- : Session does not exist.
- [No such window](/en-US/docs/Web/WebDriver/Reference/Errors/NoSuchWindow)
- [`no such window`](/en-US/docs/Web/WebDriver/Reference/Errors/NoSuchWindow)
- : The [`window`](/en-US/docs/Web/API/Window) object has been discarded, indicating that the tab or window has been closed.
- [Unexpected alert open](/en-US/docs/Web/WebDriver/Reference/Errors/UnexpectedAlertOpen)
- [`unexpected alert open`](/en-US/docs/Web/WebDriver/Reference/Errors/UnexpectedAlertOpen)
- : A user prompt, such as [`window.alert`](/en-US/docs/Web/API/Window/alert), blocks execution of command until it is dealt with.

## Examples
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -23,11 +23,11 @@ The _Get Element Tag Name_ [command](/en-US/docs/Web/WebDriver/Reference/Command

### Errors

- [Session not created](/en-US/docs/Web/WebDriver/Reference/Errors/SessionNotCreated)
- [`session not created`](/en-US/docs/Web/WebDriver/Reference/Errors/SessionNotCreated)
- : Session does not exist.
- [No such window](/en-US/docs/Web/WebDriver/Reference/Errors/NoSuchWindow)
- [`no such window`](/en-US/docs/Web/WebDriver/Reference/Errors/NoSuchWindow)
- : The [`window`](/en-US/docs/Web/API/Window) object has been discarded, indicating that the tab or window has been closed.
- [Unexpected alert open](/en-US/docs/Web/WebDriver/Reference/Errors/UnexpectedAlertOpen)
- [`unexpected alert open`](/en-US/docs/Web/WebDriver/Reference/Errors/UnexpectedAlertOpen)
- : A user prompt, such as [`window.alert`](/en-US/docs/Web/API/Window/alert), blocks execution of command until it is dealt with.

## Examples
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -28,11 +28,11 @@ The response payload is a [`Timeouts`](/en-US/docs/Web/WebDriver/Reference/Class
- `pageLoad`
- : Time in milliseconds to wait for the document to finish loading. By default WebDriver will wait five minutes (or 300,000 ms).
- `script`
- : Scripts injected with [Execute Script](/en-US/docs/Web/WebDriver/Reference/Commands/ExecuteScript) or [Execute Async Script](/en-US/docs/Web/WebDriver/Reference/Commands/ExecuteAsyncScript) will run until they hit the script timeout duration, which is also given in milliseconds. The scripts will then be interrupted and a [script timeout error](/en-US/docs/Web/WebDriver/Reference/Errors/ScriptTimeoutError) will be returned. Defaults to 30 seconds (or 30,000 ms).
- : Scripts injected with [Execute Script](/en-US/docs/Web/WebDriver/Reference/Commands/ExecuteScript) or [Execute Async Script](/en-US/docs/Web/WebDriver/Reference/Commands/ExecuteAsyncScript) will run until they hit the script timeout duration, which is also given in milliseconds. The scripts will then be interrupted and a [`script timeout error`](/en-US/docs/Web/WebDriver/Reference/Errors/ScriptTimeoutError) will be returned. Defaults to 30 seconds (or 30,000 ms).

### Errors

- [Invalid session ID](/en-US/docs/Web/WebDriver/Reference/Errors/InvalidSessionID)
- [`invalid session id`](/en-US/docs/Web/WebDriver/Reference/Errors/InvalidSessionID)
- : Session does not exist.

## Specifications
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -26,9 +26,9 @@ A string containing the title of the current document, equivalent to the value o

### Errors

- [Invalid session id](/en-US/docs/Web/WebDriver/Reference/Errors/InvalidSessionID)
- [`invalid session id`](/en-US/docs/Web/WebDriver/Reference/Errors/InvalidSessionID)
- : Session does not exist.
- No such window
- `no such window`
- : The [`window`](/en-US/docs/Web/API/Window) object has been discarded, indicating that the tab or window has been closed.

## Examples
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ In order to determine whether or not a particular interaction with the browser o

### Errors

- Invalid session ID
- `invalid session id`
- : Session does not exist.

## Example
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -36,9 +36,9 @@ The response payload is a [`WindowRect`](/en-US/docs/Web/WebDriver/Reference/Web

### Errors

- [Invalid session ID](/en-US/docs/Web/WebDriver/Reference/Errors/InvalidSessionID)
- [`invalid session id`](/en-US/docs/Web/WebDriver/Reference/Errors/InvalidSessionID)
- : Session does not exist.
- [Unexpected alert open](/en-US/docs/Web/WebDriver/Reference/Errors/UnexpectedAlertOpen)
- [`unexpected alert open`](/en-US/docs/Web/WebDriver/Reference/Errors/UnexpectedAlertOpen)
- : A user prompt, such as [`window.alert`](/en-US/docs/Web/API/Window/alert), blocks execution of command until it is dealt with.

## Specifications
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ The response payload is a JSON object with:

### Errors

- Session not created
- `session not created`
- : A new session could not be created.

## Examples
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -37,13 +37,13 @@ The response payload is an object:

### Errors

- [Invalid session ID](/en-US/docs/Web/WebDriver/Reference/Errors/InvalidSessionID)
- [`invalid session id`](/en-US/docs/Web/WebDriver/Reference/Errors/InvalidSessionID)
- : Session does not exist.
- [No such window](/en-US/docs/Web/WebDriver/Reference/Errors/NoSuchWindow)
- [`no such window`](/en-US/docs/Web/WebDriver/Reference/Errors/NoSuchWindow)
- : If the [`window`](/en-US/docs/Web/API/Window) has been closed.
- [Unexpected alert open](/en-US/docs/Web/WebDriver/Reference/Errors/UnexpectedAlertOpen)
- [`unexpected alert open`](/en-US/docs/Web/WebDriver/Reference/Errors/UnexpectedAlertOpen)
- : A user prompt, such as [`window.alert`](/en-US/docs/Web/API/Window/alert), blocks execution of command until it is dealt with.
- [Unsupported Operation](/en-US/docs/Web/WebDriver/Reference/Errors/UnsupportedOperation)
- [`unsupported operation`](/en-US/docs/Web/WebDriver/Reference/Errors/UnsupportedOperation)
- : The driver or browser doesn't support the command for some reason (e.g., when it is not possible to create a new tab or window).

## Specifications
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -26,11 +26,11 @@ The _Refresh_ [command](/en-US/docs/Web/WebDriver/Reference/Classic/Commands) of

### Errors

- [Invalid session id](/en-US/docs/Web/WebDriver/Reference/Errors/InvalidSessionID)
- [`invalid session id`](/en-US/docs/Web/WebDriver/Reference/Errors/InvalidSessionID)
- : Session does not exist.
- No such window
- `no such window`
- : The [`window`](/en-US/docs/Web/API/Window) object has been discarded, indicating that the tab or window has been closed.
- Unexpected alert open
- `unexpected alert open`
- : A modal dialog was open, blocking this operation.

## Examples
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -28,11 +28,11 @@ The input is a [`Timeouts`](/en-US/docs/Web/WebDriver/Reference/Classic/Timeouts
- `pageLoad`
- : Time in milliseconds to wait for the document to finish loading. By default, WebDriver will wait five minutes (or 300,000 ms).
- `script`
- : Scripts injected with [Execute Script](/en-US/docs/Web/WebDriver/Reference/Commands/ExecuteScript) or [Execute Async Script](/en-US/docs/Web/WebDriver/Reference/Commands/ExecuteAsyncScript) will run until they hit the script timeout duration, which is also given in milliseconds. The scripts will then be interrupted and a [script timeout error](/en-US/docs/Web/WebDriver/Reference/Errors/ScriptTimeoutError) will be returned. Defaults to 30 seconds (or 30,000 ms).
- : Scripts injected with [Execute Script](/en-US/docs/Web/WebDriver/Reference/Commands/ExecuteScript) or [Execute Async Script](/en-US/docs/Web/WebDriver/Reference/Commands/ExecuteAsyncScript) will run until they hit the script timeout duration, which is also given in milliseconds. The scripts will then be interrupted and a [`script timeout error`](/en-US/docs/Web/WebDriver/Reference/Errors/ScriptTimeoutError) will be returned. Defaults to 30 seconds (or 30,000 ms).

### Errors

- [Invalid session ID](/en-US/docs/Web/WebDriver/Reference/Errors/InvalidSessionID)
- [`invalid session id`](/en-US/docs/Web/WebDriver/Reference/Errors/InvalidSessionID)
- : Session does not exist.

## Specifications
Expand Down
Loading