mirror of
https://github.com/LadybirdBrowser/ladybird.git
synced 2025-10-17 13:39:25 +00:00
I've also renamed the `m_type` and `type()` members to be `m_unit` and `unit()` instead, to match what they actually are.
1046 lines
52 KiB
C++
1046 lines
52 KiB
C++
/*
|
||
* Copyright (c) 2025, Psychpsyo <psychpsyo@gmail.com>
|
||
*
|
||
* SPDX-License-Identifier: BSD-2-Clause
|
||
*/
|
||
|
||
#include <LibJS/Runtime/Realm.h>
|
||
#include <LibWeb/CSS/CSSKeyframesRule.h>
|
||
#include <LibWeb/HTML/EventLoop/EventLoop.h>
|
||
#include <LibWeb/HTML/Scripting/TemporaryExecutionContext.h>
|
||
#include <LibWeb/HTML/Window.h>
|
||
#include <LibWeb/Layout/Node.h>
|
||
#include <LibWeb/Painting/PaintableBox.h>
|
||
#include <LibWeb/ViewTransition/ViewTransition.h>
|
||
#include <LibWeb/WebIDL/AbstractOperations.h>
|
||
#include <LibWeb/WebIDL/Promise.h>
|
||
|
||
namespace Web::ViewTransition {
|
||
|
||
GC_DEFINE_ALLOCATOR(NamedViewTransitionPseudoElement);
|
||
GC_DEFINE_ALLOCATOR(ReplacedNamedViewTransitionPseudoElement);
|
||
GC_DEFINE_ALLOCATOR(CapturedElement);
|
||
GC_DEFINE_ALLOCATOR(ViewTransition);
|
||
|
||
NamedViewTransitionPseudoElement::NamedViewTransitionPseudoElement(CSS::PseudoElement type, FlyString view_transition_name)
|
||
: m_type(type)
|
||
, m_view_transition_name(view_transition_name)
|
||
{
|
||
}
|
||
|
||
ReplacedNamedViewTransitionPseudoElement::ReplacedNamedViewTransitionPseudoElement(CSS::PseudoElement type, FlyString view_transition_name, RefPtr<Gfx::ImmutableBitmap> content = {})
|
||
: NamedViewTransitionPseudoElement(type, view_transition_name)
|
||
{
|
||
m_content = content;
|
||
}
|
||
|
||
GC::Ref<ViewTransition> ViewTransition::create(JS::Realm& realm)
|
||
{
|
||
auto const& finished_promise = WebIDL::create_promise(realm);
|
||
WebIDL::mark_promise_as_handled(finished_promise);
|
||
return realm.create<ViewTransition>(realm, WebIDL::create_promise(realm), WebIDL::create_promise(realm), finished_promise);
|
||
}
|
||
|
||
ViewTransition::ViewTransition(JS::Realm& realm, GC::Ref<WebIDL::Promise> ready_promise, GC::Ref<WebIDL::Promise> update_callback_done_promise, GC::Ref<WebIDL::Promise> finished_promise)
|
||
: PlatformObject(realm)
|
||
, m_ready_promise(ready_promise)
|
||
, m_update_callback_done_promise(update_callback_done_promise)
|
||
, m_finished_promise(finished_promise)
|
||
, m_transition_root_pseudo_element(heap().allocate<DOM::PseudoElementTreeNode>())
|
||
|
||
{
|
||
}
|
||
|
||
void ViewTransition::initialize(JS::Realm& realm)
|
||
{
|
||
Base::initialize(realm);
|
||
WEB_SET_PROTOTYPE_FOR_INTERFACE(ViewTransition);
|
||
}
|
||
|
||
void ViewTransition::visit_edges(Cell::Visitor& visitor)
|
||
{
|
||
Base::visit_edges(visitor);
|
||
|
||
for (auto captured_element : m_named_elements) {
|
||
visitor.visit(captured_element.value);
|
||
}
|
||
visitor.visit(m_update_callback);
|
||
visitor.visit(m_ready_promise);
|
||
visitor.visit(m_update_callback_done_promise);
|
||
visitor.visit(m_finished_promise);
|
||
visitor.visit(m_transition_root_pseudo_element);
|
||
}
|
||
|
||
void CapturedElement::visit_edges(Cell::Visitor& visitor)
|
||
{
|
||
Base::visit_edges(visitor);
|
||
|
||
visitor.visit(new_element);
|
||
|
||
visitor.visit(group_keyframes);
|
||
visitor.visit(group_animation_name_rule);
|
||
visitor.visit(group_styles_rule);
|
||
visitor.visit(image_pair_isolation_rule);
|
||
visitor.visit(image_animation_name_rule);
|
||
}
|
||
|
||
// https://drafts.csswg.org/css-view-transitions-1/#dom-viewtransition-skiptransition
|
||
void ViewTransition::skip_transition()
|
||
{
|
||
// The method steps for skipTransition() are:
|
||
|
||
// 1. If this's phase is not "done", then skip the view transition for this with an "AbortError" DOMException.
|
||
if (m_phase != Phase::Done) {
|
||
skip_the_view_transition(WebIDL::AbortError::create(realm(), "ViewTransition.skip_transition() was called"_utf16));
|
||
}
|
||
}
|
||
|
||
// https://drafts.csswg.org/css-view-transitions-1/#setup-view-transition
|
||
void ViewTransition::setup_view_transition()
|
||
{
|
||
auto& realm = this->realm();
|
||
// To setup view transition for a ViewTransition transition, perform the following steps:
|
||
|
||
// 1. Let document be transition’s relevant global object’s associated document.
|
||
auto& document = as<HTML::Window>(HTML::relevant_global_object(*this)).associated_document();
|
||
|
||
// 2. Flush the update callback queue.
|
||
// AD-HOC: Spec doesn't say what document to flush it for.
|
||
// Lets just use the one we have.
|
||
// (see https://github.com/w3c/csswg-drafts/issues/11986 )
|
||
document.flush_the_update_callback_queue();
|
||
|
||
// 3. Capture the old state for transition.
|
||
auto result = capture_the_old_state();
|
||
// If failure is returned,
|
||
if (result.is_error()) {
|
||
// then skip the view transition for transition with an "InvalidStateError" DOMException in transition’s relevant Realm,
|
||
skip_the_view_transition(WebIDL::InvalidStateError::create(realm, "Failed to capture old state"_utf16));
|
||
// and return.
|
||
return;
|
||
}
|
||
|
||
// 4. Set document’s rendering suppression for view transitions to true.
|
||
document.set_rendering_suppression_for_view_transitions(true);
|
||
|
||
// 5. Queue a global task on the DOM manipulation task source, given transition’s relevant global object, to
|
||
// perform the following steps:
|
||
HTML::queue_global_task(HTML::Task::Source::DOMManipulation, HTML::relevant_global_object(*this), GC::create_function(realm.heap(), [&] {
|
||
HTML::TemporaryExecutionContext context(realm);
|
||
// 1. If transition’s phase is "done", then abort these steps.
|
||
if (m_phase == Phase::Done)
|
||
return;
|
||
|
||
// 2. schedule the update callback for transition.
|
||
schedule_the_update_callback();
|
||
|
||
// 3. Flush the update callback queue.
|
||
// AD-HOC: Spec doesn't say what document to flush it for.
|
||
// Lets just use the one we have.
|
||
// (see https://github.com/w3c/csswg-drafts/issues/11986 )
|
||
// Also, scheduling the update callback should already do this, see https://github.com/w3c/csswg-drafts/issues/11987
|
||
document.flush_the_update_callback_queue();
|
||
}));
|
||
}
|
||
|
||
// https://drafts.csswg.org/css-view-transitions-1/#activate-view-transition
|
||
void ViewTransition::activate_view_transition()
|
||
{
|
||
auto& realm = this->realm();
|
||
// To activate view transition for a ViewTransition transition, perform the following steps:
|
||
|
||
// 1. If transition’s phase is "done", then return.
|
||
// NOTE: This happens if transition was skipped before this point.
|
||
if (m_phase == Phase::Done)
|
||
return;
|
||
|
||
// 2. Set transition’s relevant global object’s associated document’s rendering suppression for view transitions to
|
||
// false.
|
||
auto& document = as<HTML::Window>(HTML::relevant_global_object(*this)).associated_document();
|
||
document.set_rendering_suppression_for_view_transitions(false);
|
||
|
||
// 3. If transition’s initial snapshot containing block size is not equal to the snapshot containing block size, then
|
||
// skip transition with an "InvalidStateError" DOMException in transition’s relevant Realm, and return.
|
||
auto snapshot_containing_block_size = document.navigable()->snapshot_containing_block_size();
|
||
if (m_initial_snapshot_containing_block_size != snapshot_containing_block_size) {
|
||
skip_the_view_transition(WebIDL::InvalidStateError::create(realm, "Transition's initial snapshot containing block size is not equal to the snapshot containing block size"_utf16));
|
||
return;
|
||
}
|
||
|
||
// 4. Capture the new state for transition.
|
||
auto result = capture_the_new_state();
|
||
// If failure is returned,
|
||
if (result.is_error()) {
|
||
// then skip the view transition for transition with an "InvalidStateError" DOMException in transition’s relevant Realm,
|
||
skip_the_view_transition(WebIDL::InvalidStateError::create(realm, "Failed to capture new state"_utf16));
|
||
// and return.
|
||
return;
|
||
}
|
||
|
||
// 5. For each capturedElement of transition’s named elements' values:
|
||
for (auto captured_element : m_named_elements) {
|
||
// 1. If capturedElement’s new element is not null, then set capturedElement’s new element’s captured in a
|
||
// view transition to true.
|
||
if (captured_element.value->new_element) {
|
||
captured_element.value->new_element->set_captured_in_a_view_transition(true);
|
||
}
|
||
}
|
||
|
||
// 6. Setup transition pseudo-elements for transition.
|
||
setup_transition_pseudo_elements();
|
||
|
||
// 7. Update pseudo-element styles for transition.
|
||
result = update_pseudo_element_styles();
|
||
// If failure is returned,
|
||
if (result.is_error()) {
|
||
// then skip the view transition for transition with an "InvalidStateError" DOMException in transition’s relevant Realm,
|
||
skip_the_view_transition(WebIDL::InvalidStateError::create(realm, "Failed to update pseudo-element styles"_utf16));
|
||
// and return.
|
||
return;
|
||
}
|
||
// NOTE: The above steps will require running document lifecycle phases, to compute information
|
||
// calculated during style/layout.
|
||
// FIXME: Figure out what this entails.
|
||
|
||
// 8. Set transition’s phase to "animating".
|
||
m_phase = Phase::Animating;
|
||
|
||
// 9. Resolve transition’s ready promise.
|
||
WebIDL::resolve_promise(realm, m_ready_promise);
|
||
}
|
||
|
||
// https://drafts.csswg.org/css-view-transitions-1/#capture-the-old-state
|
||
ErrorOr<void> ViewTransition::capture_the_old_state()
|
||
{
|
||
// To capture the old state for ViewTransition transition:
|
||
|
||
// 1. Let document be transition’s relevant global object’s associated document.
|
||
auto& document = as<HTML::Window>(HTML::relevant_global_object(*this)).associated_document();
|
||
|
||
// 2. Let namedElements be transition’s named elements.
|
||
auto& named_elements = m_named_elements;
|
||
|
||
// 3. Let usedTransitionNames be a new set of strings.
|
||
auto used_transition_names = AK::OrderedHashTable<FlyString>();
|
||
|
||
// 4. Let captureElements be a new list of elements.
|
||
auto capture_elements = AK::Vector<DOM::Element&>();
|
||
|
||
// 5. If the snapshot containing block size exceeds an implementation-defined maximum, then return failure.
|
||
auto snapshot_containing_block = document.navigable()->snapshot_containing_block();
|
||
if (snapshot_containing_block.width() > NumericLimits<int>::max() || snapshot_containing_block.height() > NumericLimits<int>::max())
|
||
return Error::from_string_literal("The snapshot containing block is too large.");
|
||
|
||
// 6. Set transition’s initial snapshot containing block size to the snapshot containing block size.
|
||
m_initial_snapshot_containing_block_size = snapshot_containing_block.size();
|
||
|
||
// 7. For each element of every element that is connected, and has a node document equal to document, in paint
|
||
// order:
|
||
// FIXME: Actually do this in paint order
|
||
auto result = document.document_element()->for_each_in_inclusive_subtree_of_type<DOM::Element>([&](auto& element) {
|
||
// NOTE: Step 1 is handled at the end of this function.
|
||
|
||
// 2. If element has more than one box fragment, then continue.
|
||
// FIXME: Implement this once we have fragments.
|
||
|
||
// 3. Let transitionName be the element’s document-scoped view transition name.
|
||
auto transition_name = element.document_scoped_view_transition_name();
|
||
|
||
// 4. If transitionName is none, or element is not rendered, then continue.
|
||
if (!transition_name.has_value() || element.not_rendered())
|
||
return TraversalDecision::Continue;
|
||
|
||
// 5. If usedTransitionNames contains transitionName, then:
|
||
if (used_transition_names.contains(transition_name.value())) {
|
||
// 1. For each element in captureElements:
|
||
for (auto& element : capture_elements)
|
||
// 1. Set element’s captured in a view transition to false.
|
||
element.set_captured_in_a_view_transition(false);
|
||
|
||
// 2. Return failure
|
||
return TraversalDecision::Break;
|
||
}
|
||
|
||
// 6. Append transitionName to usedTransitionNames.
|
||
used_transition_names.set(transition_name.value());
|
||
|
||
// 7. Set element’s captured in a view transition to true.
|
||
element.set_captured_in_a_view_transition(true);
|
||
|
||
// 8. Append element to captureElements.
|
||
capture_elements.append(element);
|
||
|
||
// 1. If any flat tree ancestor of this element skips its contents, then continue.
|
||
if (element.skips_its_contents())
|
||
return TraversalDecision::SkipChildrenAndContinue;
|
||
|
||
return TraversalDecision::Continue;
|
||
});
|
||
if (result == TraversalDecision::Break)
|
||
return Error::from_string_literal("Cannot include multiple elements with the same view-transition-name in a view transition.");
|
||
|
||
// 8. For each element in captureElements:
|
||
for (auto& element : capture_elements) {
|
||
// 1. Let capture be a new captured element struct.
|
||
auto capture = heap().allocate<CapturedElement>();
|
||
|
||
// 2. Set capture’s old image to the result of capturing the image of element.
|
||
capture->old_image = element.capture_the_image();
|
||
|
||
// 3. Let originalRect be snapshot containing block if element is the document element, otherwise, the
|
||
// element's border box.
|
||
auto original_rect = element.is_document_element() ? snapshot_containing_block : element.paintable_box()->absolute_border_box_rect();
|
||
|
||
// 4. Set capture’s old width to originalRect’s width.
|
||
capture->old_width = original_rect.width();
|
||
|
||
// 5. Set capture’s old height to originalRect’s height.
|
||
capture->old_height = original_rect.height();
|
||
|
||
// 6. Set capture’s old transform to a <transform-function> that would map element’s border box from the
|
||
// snapshot containing block origin to its current visual position.
|
||
// FIXME: Actually compute the right transform here.
|
||
capture->old_transform = CSS::Transformation(CSS::TransformFunction::Translate, Vector<CSS::TransformValue>({ CSS::TransformValue(CSS::Length(0, CSS::LengthUnit::Px)), CSS::TransformValue(CSS::Length(0, CSS::LengthUnit::Px)) }));
|
||
|
||
// 7. Set capture’s old writing-mode to the computed value of writing-mode on element.
|
||
capture->old_writing_mode = element.layout_node()->computed_values().writing_mode();
|
||
|
||
// 8. Set capture’s old direction to the computed value of direction on element.
|
||
capture->old_direction = element.layout_node()->computed_values().direction();
|
||
|
||
// 9. Set capture’s old text-orientation to the computed value of text-orientation on element.
|
||
// FIXME: Implement this once we have text-orientation.
|
||
|
||
// 10. Set capture’s old mix-blend-mode to the computed value of mix-blend-mode on element.
|
||
capture->old_mix_blend_mode = element.layout_node()->computed_values().mix_blend_mode();
|
||
|
||
// 11. Set capture’s old backdrop-filter to the computed value of backdrop-filter on element.
|
||
capture->old_backdrop_filter = element.layout_node()->computed_values().backdrop_filter();
|
||
|
||
// 12. Set capture’s old color-scheme to the computed value of color-scheme on element.
|
||
capture->old_color_scheme = element.layout_node()->computed_values().color_scheme();
|
||
|
||
// 13. Let transitionName be the computed value of view-transition-name for element.
|
||
auto transition_name = element.layout_node()->computed_values().view_transition_name();
|
||
|
||
// 14. Set namedElements[transitionName] to capture.
|
||
named_elements.set(transition_name.value(), capture);
|
||
}
|
||
|
||
// 9. For each element in captureElements:
|
||
for (auto& element : capture_elements) {
|
||
// 1. Set element’s captured in a view transition to false.
|
||
element.set_captured_in_a_view_transition(false);
|
||
}
|
||
|
||
return {};
|
||
}
|
||
|
||
// https://drafts.csswg.org/css-view-transitions-1/#capture-the-new-state
|
||
ErrorOr<void> ViewTransition::capture_the_new_state()
|
||
{
|
||
// To capture the new state for ViewTransition transition:
|
||
|
||
// 1. Let document be transition’s relevant global object’s associated document.
|
||
auto& document = as<HTML::Window>(HTML::relevant_global_object(*this)).associated_document();
|
||
|
||
// 2. Let namedElements be transition’s named elements.
|
||
// NOTE: We just use m_named_elements
|
||
|
||
// 3. Let usedTransitionNames be a new set of strings.
|
||
auto used_transition_names = AK::OrderedHashTable<FlyString>();
|
||
|
||
// 4. For each element of every element that is connected, and has a node document equal to document, in paint
|
||
// order:
|
||
// FIXME: Actually do this in paint order
|
||
auto result = document.document_element()->for_each_in_inclusive_subtree_of_type<DOM::Element>([&](auto& element) {
|
||
// NOTE: Step 1 is handled at the end of this function.
|
||
|
||
// 2. Let transitionName be the element’s document-scoped view transition name.
|
||
auto transition_name = element.document_scoped_view_transition_name();
|
||
|
||
// 3. If transitionName is none, or element is not rendered, then continue.
|
||
if (!transition_name.has_value() || element.not_rendered())
|
||
return TraversalDecision::Continue;
|
||
|
||
// 4. If element has more than one box fragment, then continue.
|
||
// FIXME: Implement this once we have fragments
|
||
|
||
// 5. If usedTransitionNames contains transitionName, then return failure.
|
||
if (used_transition_names.contains(transition_name.value()))
|
||
return TraversalDecision::Break;
|
||
|
||
// 6. Append transitionName to usedTransitionNames.
|
||
used_transition_names.set(transition_name.value());
|
||
|
||
// 7. If namedElements[transitionName] does not exist, then set namedElements[transitionName] to a new captured element struct.
|
||
if (!m_named_elements.contains(transition_name.value())) {
|
||
auto captured_element = heap().allocate<CapturedElement>();
|
||
m_named_elements.set(transition_name.value(), captured_element);
|
||
}
|
||
|
||
// 8. Set namedElements[transitionName]'s new element to element.
|
||
m_named_elements.get(transition_name.value()).value()->new_element = element;
|
||
|
||
// 1. If any flat tree ancestor of this element skips its contents, then continue.
|
||
if (element.skips_its_contents())
|
||
return TraversalDecision::SkipChildrenAndContinue;
|
||
|
||
return TraversalDecision::Continue;
|
||
});
|
||
if (result == TraversalDecision::Break)
|
||
return Error::from_string_literal("Cannot include multiple elements with the same view-transition-name in a view transition.");
|
||
|
||
return {};
|
||
}
|
||
|
||
// https://drafts.csswg.org/css-view-transitions-1/#setup-transition-pseudo-elements
|
||
void ViewTransition::setup_transition_pseudo_elements()
|
||
{
|
||
// To setup transition pseudo-elements for a ViewTransition transition:
|
||
|
||
// 1. Let document be this’s relevant global object’s associated document.
|
||
auto& document = as<HTML::Window>(HTML::relevant_global_object(*this)).associated_document();
|
||
|
||
// 2. Set document’s show view transition tree to true.
|
||
document.set_show_view_transition_tree(true);
|
||
// Note: stylesheet is not a variable in the spec but ends up being referenced a lot in this algorithm.
|
||
auto stylesheet = document.dynamic_view_transition_style_sheet();
|
||
|
||
// 3. For each transitionName → capturedElement of transition’s named elements:
|
||
for (auto [transition_name, captured_element] : m_named_elements) {
|
||
// 1. Let group be a new '::view-transition-group()', with its view transition name set to transitionName.
|
||
auto group = heap().allocate<NamedViewTransitionPseudoElement>(CSS::PseudoElement::ViewTransitionGroup, transition_name);
|
||
|
||
// 2. Append group to transition’s transition root pseudo-element.
|
||
m_transition_root_pseudo_element->append_child(group);
|
||
|
||
// 3. Let imagePair be a new '::view-transition-image-pair()', with its view transition name set to
|
||
// transitionName.
|
||
auto image_pair = heap().allocate<NamedViewTransitionPseudoElement>(CSS::PseudoElement::ViewTransitionImagePair, transition_name);
|
||
|
||
// 4. Append imagePair to group.
|
||
group->append_child(image_pair);
|
||
|
||
// 5. If capturedElement’s old image is not null, then:
|
||
if (captured_element->old_image) {
|
||
// 1. Let old be a new '::view-transition-old()', with its view transition name set to transitionName,
|
||
// displaying capturedElement’s old image as its replaced content.
|
||
auto old = heap().allocate<ReplacedNamedViewTransitionPseudoElement>(CSS::PseudoElement::ViewTransitionOld, transition_name, captured_element->old_image);
|
||
|
||
// 2. Append old to imagePair.
|
||
image_pair->append_child(old);
|
||
}
|
||
|
||
// 6. If capturedElement’s new element is not null, then:
|
||
if (captured_element->new_element) {
|
||
// 1. Let new be a new ::view-transition-new(), with its view transition name set to transitionName.
|
||
// NOTE: The styling of this pseudo is handled in update pseudo-element styles.
|
||
auto new_ = heap().allocate<ReplacedNamedViewTransitionPseudoElement>(CSS::PseudoElement::ViewTransitionNew, transition_name);
|
||
|
||
// 2. Append new to imagePair.
|
||
image_pair->append_child(new_);
|
||
}
|
||
|
||
// 7. If capturedElement’s old image is null, then:
|
||
if (!captured_element->old_image) {
|
||
// 1. Assert: capturedElement’s new element is not null.
|
||
VERIFY(captured_element->new_element);
|
||
|
||
// 2. Set capturedElement’s image animation name rule to a new CSSStyleRule representing the
|
||
// following CSS, and append it to document’s dynamic view transition style sheet:
|
||
// :root::view-transition-new(transitionName) {
|
||
// animation-name: -ua-view-transition-fade-in;
|
||
// }
|
||
// NOTE: The above code example contains variables to be replaced.
|
||
unsigned index = MUST(stylesheet->insert_rule(MUST(String::formatted(R"(
|
||
:root::view-transition-new({}) {{
|
||
animation-name: -ua-view-transition-fade-in;
|
||
}}
|
||
)",
|
||
transition_name)),
|
||
stylesheet->rules().length()));
|
||
captured_element->image_animation_name_rule = as<CSS::CSSStyleRule>(stylesheet->css_rules()->item(index));
|
||
}
|
||
|
||
// 8. If capturedElement’s new element is null, then:
|
||
if (!captured_element->new_element) {
|
||
// 1. Assert: capturedElement’s old image is not null.
|
||
VERIFY(captured_element->old_image);
|
||
|
||
// 2. Set capturedElement’s image animation name rule to a new CSSStyleRule representing the
|
||
// following CSS, and append it to document’s dynamic view transition style sheet:
|
||
// :root::view-transition-old(transitionName) {
|
||
// animation-name: -ua-view-transition-fade-out;
|
||
// }
|
||
// NOTE: The above code example contains variables to be replaced.
|
||
unsigned index = MUST(stylesheet->insert_rule(MUST(String::formatted(R"(
|
||
:root::view-transition-old({}) {{
|
||
animation-name: -ua-view-transition-fade-out;
|
||
}}
|
||
)",
|
||
transition_name)),
|
||
stylesheet->rules().length()));
|
||
captured_element->image_animation_name_rule = as<CSS::CSSStyleRule>(stylesheet->css_rules()->item(index));
|
||
}
|
||
|
||
// 9. If both of capturedElement’s old image and new element are not null, then:
|
||
if (captured_element->old_image && captured_element->new_element) {
|
||
// 1. Let transform be capturedElement’s old transform.
|
||
auto& transform = captured_element->old_transform;
|
||
// FIXME: Remove this once tranform gets used in step 5 below.
|
||
(void)transform;
|
||
|
||
// 2. Let width be capturedElement’s old width.
|
||
auto& width = captured_element->old_width;
|
||
|
||
// 3. Let height be capturedElement’s old height.
|
||
auto& height = captured_element->old_height;
|
||
|
||
// 4. Let backdropFilter be capturedElement’s old backdrop-filter.
|
||
auto& backdrop_filter = captured_element->old_backdrop_filter;
|
||
// FIXME: Remove this once tranform gets used in step 5 below.
|
||
(void)backdrop_filter;
|
||
|
||
// 5. Set capturedElement’s group keyframes to a new CSSKeyframesRule representing the following
|
||
// CSS, and append it to document’s dynamic view transition style sheet:
|
||
// @keyframes -ua-view-transition-group-anim-transitionName {
|
||
// from {
|
||
// transform: transform;
|
||
// width: width;
|
||
// height: height;
|
||
// backdrop-filter: backdropFilter;
|
||
// }
|
||
// }
|
||
// NOTE: The above code example contains variables to be replaced.
|
||
unsigned index = MUST(stylesheet->insert_rule(MUST(String::formatted(R"(
|
||
@keyframes -ua-view-transition-group-anim-{} {{
|
||
from {{
|
||
transform: {};
|
||
width: {};
|
||
height: {};
|
||
backdrop-filter: {};
|
||
}}
|
||
}}
|
||
)",
|
||
transition_name, "transform", width, height, "backdrop_filter")),
|
||
stylesheet->rules().length()));
|
||
// FIXME: all the strings above should be the identically named variables, serialized somehow.
|
||
captured_element->group_keyframes = as<CSS::CSSKeyframesRule>(stylesheet->css_rules()->item(index));
|
||
|
||
// 6. Set capturedElement’s group animation name rule to a new CSSStyleRule representing the
|
||
// following CSS, and append it to document’s dynamic view transition style sheet:
|
||
// :root::view-transition-group(transitionName) {
|
||
// animation-name: -ua-view-transition-group-anim-transitionName;
|
||
// }
|
||
// NOTE: The above code example contains variables to be replaced.
|
||
index = MUST(stylesheet->insert_rule(MUST(String::formatted(R"(
|
||
:root::view-transition-group({0}) {{
|
||
animation-name: -ua-view-transition-group-anim-{0};
|
||
}}
|
||
)",
|
||
transition_name)),
|
||
stylesheet->rules().length()));
|
||
captured_element->group_animation_name_rule = as<CSS::CSSStyleRule>(stylesheet->css_rules()->item(index));
|
||
|
||
// 7. Set capturedElement’s image pair isolation rule to a new CSSStyleRule representing the
|
||
// following CSS, and append it to document’s dynamic view transition style sheet:
|
||
// :root::view-transition-image-pair(transitionName) {
|
||
// isolation: isolate;
|
||
// }
|
||
// NOTE: The above code example contains variables to be replaced.
|
||
index = MUST(stylesheet->insert_rule(MUST(String::formatted(R"(
|
||
:root::view-transition-image-pair({}) {{
|
||
isolation: isolate;
|
||
}}
|
||
)",
|
||
transition_name)),
|
||
stylesheet->rules().length()));
|
||
captured_element->image_pair_isolation_rule = as<CSS::CSSStyleRule>(stylesheet->css_rules()->item(index));
|
||
|
||
// 8. Set capturedElement’s image animation name rule to a new CSSStyleRule representing the
|
||
// following CSS, and append it to document’s dynamic view transition style sheet:
|
||
// :root::view-transition-old(transitionName) {
|
||
// animation-name: -ua-view-transition-fade-out, -ua-mix-blend-mode-plus-lighter;
|
||
// }
|
||
// :root::view-transition-new(transitionName) {
|
||
// animation-name: -ua-view-transition-fade-in, -ua-mix-blend-mode-plus-lighter;
|
||
// }
|
||
// NOTE: The above code example contains variables to be replaced.
|
||
// NOTE: mix-blend-mode: plus-lighter ensures that the blending of identical pixels from the
|
||
// old and new images results in the same color value as those pixels, and achieves a “correct”
|
||
// cross-fade.
|
||
// AD-HOC: We can't use the given CSS exactly since it is two rules, not one.
|
||
// Instead we turn it into one rule, with both of them nested inside.
|
||
index = MUST(stylesheet->insert_rule(MUST(String::formatted(R"(
|
||
:root {{
|
||
&::view-transition-old({0}) {{
|
||
animation-name: -ua-view-transition-fade-out, -ua-mix-blend-mode-plus-lighter;
|
||
}}
|
||
&::view-transition-new({0}) {{
|
||
animation-name: -ua-view-transition-fade-in, -ua-mix-blend-mode-plus-lighter;
|
||
}}
|
||
}}
|
||
)",
|
||
transition_name)),
|
||
stylesheet->rules().length()));
|
||
captured_element->image_animation_name_rule = as<CSS::CSSStyleRule>(stylesheet->css_rules()->item(index));
|
||
}
|
||
}
|
||
}
|
||
|
||
// https://drafts.csswg.org/css-view-transitions-1/#call-the-update-callback
|
||
void ViewTransition::call_the_update_callback()
|
||
{
|
||
auto& realm = this->realm();
|
||
// To call the update callback of a ViewTransition transition:
|
||
|
||
// 1. Assert: transition’s phase is "done", or before "update-callback-called".
|
||
VERIFY(m_phase == Phase::Done || to_underlying(m_phase) < to_underlying(Phase::UpdateCallbackCalled));
|
||
|
||
// 2. If transition’s phase is not "done", then set transition’s phase to "update-callback-called".
|
||
if (m_phase != Phase::Done)
|
||
m_phase = Phase::UpdateCallbackCalled;
|
||
|
||
// 3. Let callbackPromise be null.
|
||
WebIDL::Promise* callback_promise;
|
||
|
||
// 4. If transition’s update callback is null, then set callbackPromise to a promise resolved with undefined, in
|
||
// transition’s relevant Realm.
|
||
if (!m_update_callback) {
|
||
auto& relevant_realm = HTML::relevant_realm(*this);
|
||
callback_promise = WebIDL::create_promise(relevant_realm);
|
||
WebIDL::resolve_promise(relevant_realm, *callback_promise, JS::js_undefined());
|
||
}
|
||
|
||
// 5. Otherwise, set callbackPromise to the result of invoking transition’s update callback.
|
||
else {
|
||
auto promise = MUST(WebIDL::invoke_callback(*m_update_callback, {}, {}));
|
||
// FIXME: since WebIDL::invoke_callback does not yet convert the value for us,
|
||
// We need to do it here manually.
|
||
// https://webidl.spec.whatwg.org/#js-promise
|
||
|
||
// 1. Let promiseCapability be ? NewPromiseCapability(%Promise%).
|
||
auto promise_capability = WebIDL::create_promise(realm);
|
||
// 2. Perform ? Call(promiseCapability.[[Resolve]], undefined, « V »).
|
||
// FIXME: We should not need to push an incumbent realm here, but http://wpt.live/css/css-view-transitions/update-callback-timeout.html crashes without it.
|
||
HTML::main_thread_event_loop().push_onto_backup_incumbent_realm_stack(realm);
|
||
MUST(JS::call(realm.vm(), *promise_capability->resolve(), JS::js_undefined(), promise));
|
||
HTML::main_thread_event_loop().pop_backup_incumbent_realm_stack();
|
||
// 3. Return promiseCapability.
|
||
callback_promise = GC::make_root(promise_capability);
|
||
}
|
||
|
||
// 6. Let fulfillSteps be to following steps:
|
||
auto fulfill_steps = GC::create_function(realm.heap(), [this, &realm](JS::Value) -> WebIDL::ExceptionOr<JS::Value> {
|
||
// 1. Resolve transition’s update callback done promise with undefined.
|
||
WebIDL::resolve_promise(realm, m_update_callback_done_promise, JS::js_undefined());
|
||
|
||
// 2. Activate transition.
|
||
activate_view_transition();
|
||
|
||
return JS::js_undefined();
|
||
});
|
||
|
||
// 7. Let rejectSteps be the following steps given reason:
|
||
auto reject_steps = GC::create_function(realm.heap(), [this, &realm](JS::Value reason) -> WebIDL::ExceptionOr<JS::Value> {
|
||
// 1. Reject transition’s update callback done promise with reason.
|
||
WebIDL::reject_promise(realm, m_update_callback_done_promise, reason);
|
||
|
||
// 2. If transition’s phase is "done", then return.
|
||
// NOTE: This happens if transition was skipped before this point.
|
||
if (m_phase == Phase::Done)
|
||
return JS::js_undefined();
|
||
|
||
// 3. Mark as handled transition’s ready promise.
|
||
// NOTE: transition’s update callback done promise will provide the unhandledrejection. This
|
||
// step avoids a duplicate.
|
||
WebIDL::mark_promise_as_handled(m_update_callback_done_promise);
|
||
|
||
// 4. Skip the view transition transition with reason.
|
||
skip_the_view_transition(reason);
|
||
|
||
return JS::js_undefined();
|
||
});
|
||
|
||
// 8. React to callbackPromise with fulfillSteps and rejectSteps.
|
||
// AD-HOC: This can cause an assertion failure when the reaction algorithm ends up accessing the incumbent realm, which may not exist here.
|
||
// For now, lets just manually push something onto the incumbent realm stack here as a hack.
|
||
// A spec bug for this has been filed at https://github.com/w3c/csswg-drafts/issues/11990
|
||
HTML::main_thread_event_loop().push_onto_backup_incumbent_realm_stack(realm);
|
||
WebIDL::react_to_promise(*callback_promise, fulfill_steps, reject_steps);
|
||
HTML::main_thread_event_loop().pop_backup_incumbent_realm_stack();
|
||
|
||
// 9. To skip a transition after a timeout, the user agent may perform the following steps in parallel:
|
||
// FIXME: Figure out if we want to do this.
|
||
}
|
||
|
||
// https://drafts.csswg.org/css-view-transitions-1/#schedule-the-update-callback
|
||
void ViewTransition::schedule_the_update_callback()
|
||
{
|
||
// To schedule the update callback given a ViewTransition transition:
|
||
|
||
// 1. Append transition to transition’s relevant settings object’s update callback queue.
|
||
// AD-HOC: The update callback queue is a property on document, not a settings object.
|
||
// For now we'll just put it on the relevant global object's associated document.
|
||
// Spec bug is filed at https://github.com/w3c/csswg-drafts/issues/11986
|
||
as<HTML::Window>(HTML::relevant_global_object(*this)).associated_document().update_callback_queue().append(this);
|
||
|
||
// 2. Queue a global task on the DOM manipulation task source, given transition’s relevant global object, to flush
|
||
// the update callback queue.
|
||
HTML::queue_global_task(HTML::Task::Source::DOMManipulation, HTML::relevant_global_object(*this), GC::create_function(realm().heap(), [&] {
|
||
// AD-HOC: Spec doesn't say what document to flush it for.
|
||
// Lets just use the one we use elsewhere.
|
||
// (see https://github.com/w3c/csswg-drafts/issues/11986 )
|
||
as<HTML::Window>(HTML::relevant_global_object(*this)).associated_document().flush_the_update_callback_queue();
|
||
}));
|
||
}
|
||
|
||
// https://drafts.csswg.org/css-view-transitions-1/#skip-the-view-transition
|
||
void ViewTransition::skip_the_view_transition(JS::Value reason)
|
||
{
|
||
auto& realm = this->realm();
|
||
// To skip the view transition for ViewTransition transition with reason reason:
|
||
|
||
// 1. Let document be transition’s relevant global object’s associated document.
|
||
auto& document = as<HTML::Window>(HTML::relevant_global_object(*this)).associated_document();
|
||
|
||
// 2. Assert: transition’s phase is not "done".
|
||
VERIFY(m_phase != Phase::Done);
|
||
|
||
// 3. If transition’s phase is before "update-callback-called", then schedule the update callback for transition.
|
||
if (to_underlying(m_phase) < to_underlying(Phase::UpdateCallbackCalled)) {
|
||
schedule_the_update_callback();
|
||
}
|
||
|
||
// 4. Set rendering suppression for view transitions to false.
|
||
document.set_rendering_suppression_for_view_transitions(false);
|
||
|
||
// 5. If document’s active view transition is transition, Clear view transition transition.
|
||
if (document.active_view_transition() == this)
|
||
clear_view_transition();
|
||
|
||
// 6. Set transition’s phase to "done".
|
||
m_phase = Phase::Done;
|
||
|
||
// 7. Reject transition’s ready promise with reason.
|
||
WebIDL::reject_promise(realm, m_ready_promise, reason);
|
||
|
||
// 8. Resolve transition’s finished promise with the result of reacting to transition’s update callback done promise:
|
||
// - If the promise was fulfilled, then return undefined.
|
||
// AD-HOC: This can cause an assertion failure when the reaction algorithm ends up accessing the incumbent realm, which may not exist here.
|
||
// For now, lets just manually push something onto the incumbent realm stack here as a hack.
|
||
// A spec bug for this has been filed at https://github.com/w3c/csswg-drafts/issues/11990
|
||
HTML::main_thread_event_loop().push_onto_backup_incumbent_realm_stack(realm);
|
||
WebIDL::resolve_promise(realm, m_finished_promise, WebIDL::react_to_promise(m_update_callback_done_promise, GC::create_function(realm.heap(), [](JS::Value) -> WebIDL::ExceptionOr<JS::Value> { return JS::js_undefined(); }), nullptr)->promise());
|
||
HTML::main_thread_event_loop().pop_backup_incumbent_realm_stack();
|
||
}
|
||
|
||
// https://drafts.csswg.org/css-view-transitions-1/#handle-transition-frame
|
||
void ViewTransition::handle_transition_frame()
|
||
{
|
||
auto& realm = this->realm();
|
||
// To handle transition frame given a ViewTransition transition
|
||
|
||
// 1. Let document be transition’s relevant global object’s associated document.
|
||
auto& document = as<HTML::Window>(HTML::relevant_global_object(*this)).associated_document();
|
||
|
||
// 2. Let hasActiveAnimations be a boolean, initially false.
|
||
bool has_active_animations = false;
|
||
|
||
// 3. For each element of transition’s transition root pseudo-element’s inclusive descendants:
|
||
m_transition_root_pseudo_element->for_each_in_inclusive_subtree([&](DOM::PseudoElementTreeNode&) {
|
||
// For each animation whose timeline is a document timeline associated with document, and contains at
|
||
// least one associated effect whose effect target is element, set hasActiveAnimations to true if any of the
|
||
// following conditions are true:
|
||
// FIXME: Implement this.
|
||
|
||
// - animation’s play state is paused or running.
|
||
// FIXME: Implement this.
|
||
|
||
// - document’s pending animation event queue has any events associated with animation.
|
||
// FIXME: Implement this.
|
||
|
||
return TraversalDecision::Continue;
|
||
});
|
||
|
||
// 4. If hasActiveAnimations is false:
|
||
if (!has_active_animations) {
|
||
// 1. Set transition’s phase to "done".
|
||
m_phase = Phase::Done;
|
||
|
||
// 2. Clear view transition transition.
|
||
clear_view_transition();
|
||
|
||
// 3. Resolve transition’s finished promise.
|
||
// FIXME: Without this TemporaryExecutionContext, this would fail an assert later on about missing one.
|
||
// Figure out why and where this actually needs to be handled.
|
||
HTML::TemporaryExecutionContext context(realm);
|
||
WebIDL::resolve_promise(realm, m_finished_promise);
|
||
|
||
// 4. Return.
|
||
return;
|
||
}
|
||
|
||
// 5. If transition’s initial snapshot containing block size is not equal to the snapshot containing block size,
|
||
auto snapshot_containing_block_size = document.navigable()->snapshot_containing_block_size();
|
||
if (m_initial_snapshot_containing_block_size != snapshot_containing_block_size) {
|
||
// then skip the view transition for transition with an "InvalidStateError" DOMException in transition’s relevant Realm,
|
||
skip_the_view_transition(WebIDL::InvalidStateError::create(realm, "Transition's initial snapshot containing block size is not equal to the snapshot containing block size"_utf16));
|
||
// and return.
|
||
return;
|
||
}
|
||
|
||
// 6. Update pseudo-element styles for transition.
|
||
auto result = update_pseudo_element_styles();
|
||
// If failure is returned,
|
||
if (result.is_error()) {
|
||
// then skip the view transition for transition with an "InvalidStateError" DOMException in transition’s relevant Realm,
|
||
skip_the_view_transition(WebIDL::InvalidStateError::create(realm, "Failed to update pseudo-element styles"_utf16));
|
||
// and return.
|
||
return;
|
||
}
|
||
}
|
||
|
||
// https://drafts.csswg.org/css-view-transitions-1/#update-pseudo-element-styles
|
||
ErrorOr<void> ViewTransition::update_pseudo_element_styles()
|
||
{
|
||
// To update pseudo-element styles for a ViewTransition transition:
|
||
|
||
// 1. For each transitionName → capturedElement of transition’s named elements:
|
||
for (auto [transition_name, captured_element] : m_named_elements) {
|
||
// 1. Let width, height, transform, writingMode, direction, textOrientation, mixBlendMode, backdropFilter and
|
||
// colorScheme be null.
|
||
Optional<CSSPixels> width = {};
|
||
Optional<CSSPixels> height = {};
|
||
Optional<CSS::Transformation> transform = {};
|
||
Optional<CSS::WritingMode> writing_mode = {};
|
||
Optional<CSS::Direction> direction = {};
|
||
// FIXME: Implement this once we have text-orientation.
|
||
Optional<CSS::MixBlendMode> mix_blend_mode = {};
|
||
Optional<CSS::Filter> backdrop_filter = {};
|
||
Optional<CSS::PreferredColorScheme> color_scheme = {};
|
||
|
||
// 2. If capturedElement’s new element is null, then:
|
||
if (!captured_element->new_element) {
|
||
// 1. Set width to capturedElement’s old width.
|
||
width = captured_element->old_width;
|
||
|
||
// 2. Set height to capturedElement’s old height.
|
||
height = captured_element->old_height;
|
||
|
||
// 3. Set transform to capturedElement’s old transform.
|
||
transform = captured_element->old_transform;
|
||
|
||
// 4. Set writingMode to capturedElement’s old writing-mode.
|
||
writing_mode = captured_element->old_writing_mode;
|
||
|
||
// 5. Set direction to capturedElement’s old direction.
|
||
direction = captured_element->old_direction;
|
||
|
||
// 6. Set textOrientation to capturedElement’s old text-orientation.
|
||
// FIXME: Implement this once we have text-orientation.
|
||
|
||
// 7. Set mixBlendMode to capturedElement’s old mix-blend-mode.
|
||
mix_blend_mode = captured_element->old_mix_blend_mode;
|
||
|
||
// 8. Set backdropFilter to capturedElement’s old backdrop-filter.
|
||
backdrop_filter = captured_element->old_backdrop_filter;
|
||
|
||
// 9. Set colorScheme to capturedElement’s old color-scheme.
|
||
color_scheme = captured_element->old_color_scheme;
|
||
}
|
||
|
||
// 3. Otherwise:
|
||
else {
|
||
// 1. Return failure if any of the following conditions is true:
|
||
|
||
// - capturedElement’s new element has a flat tree ancestor that skips its contents.
|
||
for (auto ancestor = captured_element->new_element->parent_element(); ancestor; ancestor = ancestor->parent_element()) {
|
||
if (ancestor->skips_its_contents())
|
||
return Error::from_string_literal("capturedElement’s new element has a flat tree ancestor that skips its contents.");
|
||
}
|
||
|
||
// - capturedElement’s new element is not rendered.
|
||
if (captured_element->new_element->not_rendered())
|
||
return Error::from_string_literal("capturedElement’s new element is not rendered.");
|
||
|
||
// - capturedElement has more than one box fragment.
|
||
// FIXME: Implement this once we have fragments.
|
||
// FIXME: capturedElement would not have box fragments. Update this once the spec issue for that has been resolved:
|
||
// https://github.com/w3c/csswg-drafts/issues/11991
|
||
|
||
// NOTE: Other rendering constraints are enforced via capturedElement’s new element being
|
||
// captured in a view transition.
|
||
|
||
// 2. Let newRect be the snapshot containing block if capturedElement’s new element is the
|
||
// document element, otherwise, capturedElement’s border box.
|
||
auto new_rect = captured_element->new_element->is_document_element() ? captured_element->new_element->navigable()->snapshot_containing_block() : captured_element->new_element->paintable_box()->absolute_border_box_rect();
|
||
|
||
// 3. Set width to the current width of newRect.
|
||
width = new_rect.width();
|
||
|
||
// 4. Set height to the current height of newRect.
|
||
height = new_rect.height();
|
||
|
||
// 5. Set transform to a transform that would map newRect from the snapshot containing block origin
|
||
// to its current visual position.
|
||
auto offset = new_rect.location() - captured_element->new_element->navigable()->snapshot_containing_block().location();
|
||
transform = CSS::Transformation(CSS::TransformFunction::Translate, Vector<CSS::TransformValue>({ CSS::TransformValue(CSS::Length::make_px(offset.x())), CSS::TransformValue(CSS::Length::make_px(offset.y())) }));
|
||
|
||
// 6. Set writingMode to the computed value of writing-mode on capturedElement’s new element.
|
||
writing_mode = captured_element->new_element->layout_node()->computed_values().writing_mode();
|
||
|
||
// 7. Set direction to the computed value of direction on capturedElement’s new element.
|
||
direction = captured_element->new_element->layout_node()->computed_values().direction();
|
||
|
||
// 8. Set textOrientation to the computed value of text-orientation on capturedElement’s new
|
||
// element.
|
||
// FIXME: Implement this.
|
||
|
||
// 9. Set mixBlendMode to the computed value of mix-blend-mode on capturedElement’s new
|
||
// element.
|
||
mix_blend_mode = captured_element->new_element->layout_node()->computed_values().mix_blend_mode();
|
||
|
||
// 10. Set backdropFilter to the computed value of backdrop-filter on capturedElement’s new element.
|
||
backdrop_filter = captured_element->new_element->layout_node()->computed_values().backdrop_filter();
|
||
|
||
// 11. Set colorScheme to the computed value of color-scheme on capturedElement’s new element.
|
||
color_scheme = captured_element->new_element->layout_node()->computed_values().color_scheme();
|
||
}
|
||
|
||
// 4. If capturedElement’s group styles rule is null, then set capturedElement’s group styles rule to a new
|
||
// CSSStyleRule representing the following CSS, and append it to transition’s relevant global object’s
|
||
// associated document’s dynamic view transition style sheet.
|
||
if (!captured_element->group_styles_rule) {
|
||
// :root::view-transition-group(transitionName) {
|
||
// width: width;
|
||
// height: height;
|
||
// transform: transform;
|
||
// writing-mode: writingMode;
|
||
// direction: direction;
|
||
// text-orientation: textOrientation;
|
||
// mix-blend-mode: mixBlendMode;
|
||
// backdrop-filter: backdropFilter;
|
||
// color-scheme: colorScheme;
|
||
// }
|
||
// NOTE: The above code example contains variables to be replaced.
|
||
auto stylesheet = as<HTML::Window>(HTML::relevant_global_object(*this)).associated_document().dynamic_view_transition_style_sheet();
|
||
unsigned index = MUST(stylesheet->insert_rule(MUST(String::formatted(R"(
|
||
:root::view-transition-group({}) {{
|
||
width: {};
|
||
height: {};
|
||
transform: {};
|
||
writing-mode: {};
|
||
direction: {};
|
||
text-orientation: {};
|
||
mix-blend-mode: {};
|
||
backdrop-filter: {};
|
||
color-scheme: {};
|
||
}}
|
||
)",
|
||
transition_name, width, height, "transform", "writing_mode", "direction", "text_orientation", "mix_blend_mode", "backdrop_filter", "color_scheme")),
|
||
stylesheet->rules().length()));
|
||
// FIXME: all the strings above should be the identically named variables, serialized somehow.
|
||
captured_element->group_styles_rule = as<CSS::CSSStyleRule>(stylesheet->css_rules()->item(index));
|
||
}
|
||
// Otherwise, update capturedElement’s group styles rule to match the following CSS:
|
||
// :root::view-transition-group(transitionName) {
|
||
// width: width;
|
||
// height: height;
|
||
// transform: transform;
|
||
// writing-mode: writingMode;
|
||
// direction: direction;
|
||
// text-orientation: textOrientation;
|
||
// mix-blend-mode: mixBlendMode;
|
||
// backdrop-filter: backdropFilter;
|
||
// color-scheme: colorScheme;
|
||
// }
|
||
// NOTE: The above code example contains variables to be replaced.
|
||
else {
|
||
captured_element->group_styles_rule->set_selector_text(MUST(String::formatted(":root::view-transition-group({0})", transition_name)));
|
||
captured_element->group_styles_rule->set_css_text(MUST(String::formatted(R"(
|
||
width: {};
|
||
height: {};
|
||
transform: {};
|
||
writing-mode: {};
|
||
direction: {};
|
||
text-orientation: {};
|
||
mix-blend-mode: {};
|
||
backdrop-filter: {};
|
||
color-scheme: {};
|
||
)",
|
||
width, height, "transform", "writing_mode", "direction", "text_orientation", "mix_blend_mode", "backdrop_filter", "color_scheme")));
|
||
// FIXME: all the strings above should be the identically named variables, serialized somehow.
|
||
}
|
||
|
||
// 5. If capturedElement’s new element is not null, then:
|
||
if (captured_element->new_element) {
|
||
// 1. Let new be the ::view-transition-new() with the view transition name transitionName.
|
||
ReplacedNamedViewTransitionPseudoElement* new_;
|
||
m_transition_root_pseudo_element->for_each_in_inclusive_subtree_of_type<ReplacedNamedViewTransitionPseudoElement>([&](auto& element) {
|
||
if (element.m_type == CSS::PseudoElement::ViewTransitionNew && element.m_view_transition_name == transition_name) {
|
||
new_ = &element;
|
||
return TraversalDecision::Break;
|
||
}
|
||
return TraversalDecision::Continue;
|
||
});
|
||
|
||
// 2. Set new’s replaced element content to the result of capturing the image of capturedElement’s
|
||
// new element.
|
||
new_->m_content = captured_element->new_element->capture_the_image();
|
||
}
|
||
}
|
||
return {};
|
||
}
|
||
|
||
// https://drafts.csswg.org/css-view-transitions-1/#clear-view-transition
|
||
void ViewTransition::clear_view_transition()
|
||
{
|
||
// To clear view transition of a ViewTransition transition:
|
||
|
||
// 1. Let document be transition’s relevant global object’s associated document.
|
||
auto& document = as<HTML::Window>(HTML::relevant_global_object(*this)).associated_document();
|
||
|
||
// 2. Assert: document’s active view transition is transition.
|
||
VERIFY(document.active_view_transition() == this);
|
||
|
||
// 3. For each capturedElement of transition’s named elements' values:
|
||
for (auto captured_element : m_named_elements) {
|
||
// 1. If capturedElement’s new element is not null, then set capturedElement’s new element's captured in a
|
||
// view transition to false.
|
||
if (captured_element.value->new_element) {
|
||
captured_element.value->new_element->set_captured_in_a_view_transition(false);
|
||
}
|
||
|
||
// 2. For each style of capturedElement’s style definitions:
|
||
auto steps = [&](GC::Ptr<CSS::CSSRule> style) {
|
||
// 1. If style is not null, and style is in document’s dynamic view transition style sheet, then remove
|
||
// style from document’s dynamic view transition style sheet.
|
||
if (style) {
|
||
auto stylesheet = document.dynamic_view_transition_style_sheet();
|
||
auto rules = stylesheet->css_rules();
|
||
for (u32 i = 0; i < rules->length(); i++) {
|
||
if (rules->item(i) == style) {
|
||
MUST(stylesheet->delete_rule(i));
|
||
break;
|
||
}
|
||
}
|
||
}
|
||
};
|
||
|
||
steps(captured_element.value->group_keyframes);
|
||
steps(captured_element.value->group_animation_name_rule);
|
||
steps(captured_element.value->group_styles_rule);
|
||
steps(captured_element.value->image_pair_isolation_rule);
|
||
steps(captured_element.value->image_animation_name_rule);
|
||
}
|
||
|
||
// 4. Set document’s show view transition tree to false.
|
||
document.set_show_view_transition_tree(false);
|
||
|
||
// 5. Set document’s active view transition to null.
|
||
document.set_active_view_transition(nullptr);
|
||
}
|
||
|
||
}
|