mirror of
https://github.com/zebrajr/ladybird.git
synced 2025-12-06 00:19:53 +01:00
LibWeb: Prevent crash in content calculations for ListItemMarkerBox
In several content calculation methods in FormattingContext, we assumed that if create_independent_formatting_context_if_needed() fails the input Layout::Box is a BlockContainer; however, the web platform test css/css-pseudo/parsing/marker-supported-properties-in-animation.html is one scenario where the input is a Layout::ListItemMarkerBox instead and there is no FormattingContext supported for it yet.
This commit is contained in:
parent
991ab62dd7
commit
30729feebb
|
|
@ -226,6 +226,19 @@ OwnPtr<FormattingContext> FormattingContext::create_independent_formatting_conte
|
|||
}
|
||||
}
|
||||
|
||||
NonnullOwnPtr<FormattingContext> FormattingContext::create_independent_formatting_context(LayoutState& state, LayoutMode layout_mode, Box const& child_box)
|
||||
{
|
||||
if (auto context = create_independent_formatting_context_if_needed(state, layout_mode, child_box))
|
||||
return context.release_nonnull();
|
||||
|
||||
if (auto child_block_container = as_if<BlockContainer>(child_box))
|
||||
return make<BlockFormattingContext>(state, layout_mode, *child_block_container, nullptr);
|
||||
|
||||
// HACK: Instead of crashing in scenarios that assume the formatting context can be created, create a dummy formatting context that does nothing.
|
||||
dbgln("FIXME: An independent formatting context was requested from a Box that does not have a formatting context type. A dummy formatting context will be created instead.");
|
||||
return make<DummyFormattingContext>(state, layout_mode, child_box);
|
||||
}
|
||||
|
||||
OwnPtr<FormattingContext> FormattingContext::layout_inside(Box const& child_box, LayoutMode layout_mode, AvailableSpace const& available_space)
|
||||
{
|
||||
{
|
||||
|
|
@ -1167,7 +1180,8 @@ CSSPixelRect FormattingContext::content_box_rect_in_static_position_ancestor_coo
|
|||
{
|
||||
auto box_used_values = m_state.get(box);
|
||||
CSSPixelRect rect = { { 0, 0 }, box_used_values.content_size() };
|
||||
VERIFY(box_used_values.offset.is_zero()); // Set as result of this calculation
|
||||
// FIXME: ListItemMarkerBox's should also run this assertion once it has a supported FormattingContext type
|
||||
VERIFY(box_used_values.offset.is_zero() || box.is_list_item_marker_box()); // Set as result of this calculation
|
||||
for (auto const* current = box.static_position_containing_block(); current; current = current->containing_block()) {
|
||||
if (current == box.containing_block())
|
||||
return rect;
|
||||
|
|
@ -1454,10 +1468,7 @@ CSSPixels FormattingContext::calculate_min_content_width(Layout::Box const& box)
|
|||
box_state.width_constraint = SizeConstraint::MinContent;
|
||||
box_state.set_indefinite_content_width();
|
||||
|
||||
auto context = const_cast<FormattingContext*>(this)->create_independent_formatting_context_if_needed(throwaway_state, LayoutMode::IntrinsicSizing, box);
|
||||
if (!context) {
|
||||
context = make<BlockFormattingContext>(throwaway_state, LayoutMode::IntrinsicSizing, as<BlockContainer>(box), nullptr);
|
||||
}
|
||||
auto context = const_cast<FormattingContext*>(this)->create_independent_formatting_context(throwaway_state, LayoutMode::IntrinsicSizing, box);
|
||||
|
||||
auto available_width = AvailableSize::make_min_content();
|
||||
auto available_height = box_state.has_definite_height()
|
||||
|
|
@ -1494,10 +1505,7 @@ CSSPixels FormattingContext::calculate_max_content_width(Layout::Box const& box)
|
|||
box_state.border_right = actual_box_state.border_right;
|
||||
box_state.padding_right = actual_box_state.padding_right;
|
||||
|
||||
auto context = const_cast<FormattingContext*>(this)->create_independent_formatting_context_if_needed(throwaway_state, LayoutMode::IntrinsicSizing, box);
|
||||
if (!context) {
|
||||
context = make<BlockFormattingContext>(throwaway_state, LayoutMode::IntrinsicSizing, as<BlockContainer>(box), nullptr);
|
||||
}
|
||||
auto context = const_cast<FormattingContext*>(this)->create_independent_formatting_context(throwaway_state, LayoutMode::IntrinsicSizing, box);
|
||||
|
||||
auto available_width = AvailableSize::make_max_content();
|
||||
auto available_height = box_state.has_definite_height()
|
||||
|
|
@ -1535,10 +1543,7 @@ CSSPixels FormattingContext::calculate_min_content_height(Layout::Box const& box
|
|||
box_state.set_indefinite_content_height();
|
||||
box_state.set_content_width(width);
|
||||
|
||||
auto context = const_cast<FormattingContext*>(this)->create_independent_formatting_context_if_needed(throwaway_state, LayoutMode::IntrinsicSizing, box);
|
||||
if (!context) {
|
||||
context = make<BlockFormattingContext>(throwaway_state, LayoutMode::IntrinsicSizing, as<BlockContainer>(box), nullptr);
|
||||
}
|
||||
auto context = const_cast<FormattingContext*>(this)->create_independent_formatting_context(throwaway_state, LayoutMode::IntrinsicSizing, box);
|
||||
|
||||
context->run(AvailableSpace(AvailableSize::make_definite(width), AvailableSize::make_min_content()));
|
||||
|
||||
|
|
@ -1566,10 +1571,7 @@ CSSPixels FormattingContext::calculate_max_content_height(Layout::Box const& box
|
|||
box_state.set_indefinite_content_height();
|
||||
box_state.set_content_width(width);
|
||||
|
||||
auto context = const_cast<FormattingContext*>(this)->create_independent_formatting_context_if_needed(throwaway_state, LayoutMode::IntrinsicSizing, box);
|
||||
if (!context) {
|
||||
context = make<BlockFormattingContext>(throwaway_state, LayoutMode::IntrinsicSizing, as<BlockContainer>(box), nullptr);
|
||||
}
|
||||
auto context = const_cast<FormattingContext*>(this)->create_independent_formatting_context(throwaway_state, LayoutMode::IntrinsicSizing, box);
|
||||
|
||||
context->run(AvailableSpace(AvailableSize::make_definite(width), AvailableSize::make_max_content()));
|
||||
|
||||
|
|
|
|||
|
|
@ -64,6 +64,7 @@ public:
|
|||
CSSPixels compute_height_for_replaced_element(Box const&, AvailableSpace const&) const;
|
||||
|
||||
OwnPtr<FormattingContext> create_independent_formatting_context_if_needed(LayoutState&, LayoutMode, Box const& child_box);
|
||||
NonnullOwnPtr<FormattingContext> create_independent_formatting_context(LayoutState&, LayoutMode, Box const& child_box);
|
||||
|
||||
virtual void parent_context_did_dimension_child_root_box() { }
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,102 @@
|
|||
Harness status: OK
|
||||
|
||||
Found 96 tests
|
||||
|
||||
39 Pass
|
||||
57 Fail
|
||||
Pass Animation of font in ::marker
|
||||
Pass Animation of font-family in ::marker
|
||||
Fail Animation of font-feature-settings in ::marker
|
||||
Fail Animation of font-kerning in ::marker
|
||||
Pass Animation of font-size in ::marker
|
||||
Fail Animation of font-size-adjust in ::marker
|
||||
Pass Animation of font-stretch in ::marker
|
||||
Pass Animation of font-style in ::marker
|
||||
Fail Animation of font-synthesis in ::marker
|
||||
Fail Animation of font-synthesis-small-caps in ::marker
|
||||
Fail Animation of font-synthesis-style in ::marker
|
||||
Fail Animation of font-synthesis-weight in ::marker
|
||||
Pass Animation of font-variant in ::marker
|
||||
Pass Animation of font-variant-caps in ::marker
|
||||
Fail Animation of font-variant-east-asian in ::marker
|
||||
Fail Animation of font-variant-ligatures in ::marker
|
||||
Fail Animation of font-variant-numeric in ::marker
|
||||
Fail Animation of font-variant-position in ::marker
|
||||
Pass Animation of font-weight in ::marker
|
||||
Pass Animation of line-height in ::marker
|
||||
Fail Animation of white-space in ::marker
|
||||
Fail Animation of color in ::marker
|
||||
Fail Animation of text-combine-upright in ::marker
|
||||
Pass Animation of unicode-bidi in ::marker
|
||||
Pass Animation of direction in ::marker
|
||||
Fail Animation of content in ::marker
|
||||
Fail Animation of hyphens in ::marker
|
||||
Fail Animation of letter-spacing in ::marker
|
||||
Fail Animation of line-break in ::marker
|
||||
Fail Animation of overflow-wrap in ::marker
|
||||
Fail Animation of tab-size in ::marker
|
||||
Fail Animation of text-transform in ::marker
|
||||
Fail Animation of word-break in ::marker
|
||||
Fail Animation of word-spacing in ::marker
|
||||
Fail Animation of text-decoration-skip-ink in ::marker
|
||||
Fail Animation of text-emphasis in ::marker
|
||||
Fail Animation of text-emphasis-color in ::marker
|
||||
Fail Animation of text-emphasis-position in ::marker
|
||||
Fail Animation of text-emphasis-style in ::marker
|
||||
Fail Animation of text-shadow in ::marker
|
||||
Fail Animation of cursor in ::marker
|
||||
Pass Animation of display in ::marker
|
||||
Pass Animation of position in ::marker
|
||||
Pass Animation of float in ::marker
|
||||
Fail Animation of list-style in ::marker
|
||||
Pass Animation of list-style-image in ::marker
|
||||
Pass Animation of list-style-position in ::marker
|
||||
Pass Animation of list-style-type in ::marker
|
||||
Pass Transition of font in ::marker
|
||||
Pass Transition of font-family in ::marker
|
||||
Pass Transition of font-feature-settings in ::marker
|
||||
Pass Transition of font-kerning in ::marker
|
||||
Fail Transition of font-size in ::marker
|
||||
Fail Transition of font-size-adjust in ::marker
|
||||
Fail Transition of font-stretch in ::marker
|
||||
Fail Transition of font-style in ::marker
|
||||
Fail Transition of font-synthesis in ::marker
|
||||
Fail Transition of font-synthesis-small-caps in ::marker
|
||||
Fail Transition of font-synthesis-style in ::marker
|
||||
Fail Transition of font-synthesis-weight in ::marker
|
||||
Pass Transition of font-variant in ::marker
|
||||
Pass Transition of font-variant-caps in ::marker
|
||||
Pass Transition of font-variant-east-asian in ::marker
|
||||
Pass Transition of font-variant-ligatures in ::marker
|
||||
Pass Transition of font-variant-numeric in ::marker
|
||||
Pass Transition of font-variant-position in ::marker
|
||||
Fail Transition of font-weight in ::marker
|
||||
Fail Transition of line-height in ::marker
|
||||
Pass Transition of white-space in ::marker
|
||||
Pass Transition of color in ::marker
|
||||
Fail Transition of text-combine-upright in ::marker
|
||||
Pass Transition of unicode-bidi in ::marker
|
||||
Pass Transition of direction in ::marker
|
||||
Pass Transition of content in ::marker
|
||||
Fail Transition of hyphens in ::marker
|
||||
Pass Transition of letter-spacing in ::marker
|
||||
Fail Transition of line-break in ::marker
|
||||
Pass Transition of overflow-wrap in ::marker
|
||||
Pass Transition of tab-size in ::marker
|
||||
Pass Transition of text-transform in ::marker
|
||||
Pass Transition of word-break in ::marker
|
||||
Pass Transition of word-spacing in ::marker
|
||||
Fail Transition of text-decoration-skip-ink in ::marker
|
||||
Fail Transition of text-emphasis in ::marker
|
||||
Fail Transition of text-emphasis-color in ::marker
|
||||
Fail Transition of text-emphasis-position in ::marker
|
||||
Fail Transition of text-emphasis-style in ::marker
|
||||
Fail Transition of text-shadow in ::marker
|
||||
Pass Transition of cursor in ::marker
|
||||
Fail Transition of display in ::marker
|
||||
Fail Transition of position in ::marker
|
||||
Fail Transition of float in ::marker
|
||||
Fail Transition of list-style in ::marker
|
||||
Fail Transition of list-style-image in ::marker
|
||||
Fail Transition of list-style-position in ::marker
|
||||
Fail Transition of list-style-type in ::marker
|
||||
|
|
@ -0,0 +1,405 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Pseudo-Elements Test: Supported properties in ::marker animations</title>
|
||||
<link rel="help" href="https://drafts.csswg.org/css-pseudo-4/#marker-pseudo">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-animations-1/#keyframes">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-transitions-1/#transitions">
|
||||
<link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
|
||||
<meta name="assert" content="This test checks ::marker supports animations and transitions, but only for the properties that apply to ::marker." />
|
||||
<style id="style"></style>
|
||||
<script src="../../../resources/testharness.js"></script>
|
||||
<script src="../../../resources/testharnessreport.js"></script>
|
||||
<div id="log"></div>
|
||||
<ul>
|
||||
<li id="target">target</li>
|
||||
</ul>
|
||||
<script>
|
||||
const interpolationTests = [
|
||||
// ::marker supports all font properties.
|
||||
{
|
||||
property: "font",
|
||||
from: "oblique normal 100 ultra-condensed 5px / 20px serif",
|
||||
to: "italic small-caps 900 ultra-expanded 25px / 50px Ahem",
|
||||
midPoint: ["italic small-caps 500 expanded 15px / 35px Ahem", "italic small-caps 500 expanded 15px/35px Ahem"],
|
||||
},
|
||||
{
|
||||
property: "font-family",
|
||||
from: "serif",
|
||||
to: "Ahem",
|
||||
midPoint: "Ahem",
|
||||
},
|
||||
{
|
||||
property: "font-feature-settings",
|
||||
from: "'c2sc'",
|
||||
to: "'smcp'",
|
||||
midPoint: "\"smcp\"",
|
||||
},
|
||||
{
|
||||
property: "font-kerning",
|
||||
from: "normal",
|
||||
to: "none",
|
||||
midPoint: "none",
|
||||
},
|
||||
{
|
||||
property: "font-size",
|
||||
from: "5px",
|
||||
to: "25px",
|
||||
midPoint: "15px",
|
||||
},
|
||||
{
|
||||
property: "font-size-adjust",
|
||||
from: "1",
|
||||
to: "3",
|
||||
midPoint: "2",
|
||||
},
|
||||
{
|
||||
property: "font-stretch",
|
||||
from: "ultra-condensed",
|
||||
to: "ultra-expanded",
|
||||
midPoint: ["expanded", "125%"],
|
||||
},
|
||||
{
|
||||
property: "font-style",
|
||||
from: "oblique",
|
||||
to: "italic",
|
||||
midPoint: "italic",
|
||||
},
|
||||
{
|
||||
property: "font-synthesis",
|
||||
from: "weight",
|
||||
to: "none",
|
||||
midPoint: "none",
|
||||
},
|
||||
{
|
||||
property: "font-synthesis-small-caps",
|
||||
from: "auto",
|
||||
to: "none",
|
||||
midPoint: "none",
|
||||
},
|
||||
{
|
||||
property: "font-synthesis-style",
|
||||
from: "auto",
|
||||
to: "none",
|
||||
midPoint: "none",
|
||||
},
|
||||
{
|
||||
property: "font-synthesis-weight",
|
||||
from: "auto",
|
||||
to: "none",
|
||||
midPoint: "none",
|
||||
},
|
||||
{
|
||||
property: "font-variant",
|
||||
from: "unicase",
|
||||
to: "small-caps",
|
||||
midPoint: "small-caps",
|
||||
},
|
||||
{
|
||||
property: "font-variant-caps",
|
||||
from: "unicase",
|
||||
to: "small-caps",
|
||||
midPoint: "small-caps",
|
||||
},
|
||||
{
|
||||
property: "font-variant-east-asian",
|
||||
from: "proportional-width",
|
||||
to: "full-width",
|
||||
midPoint: "full-width",
|
||||
},
|
||||
{
|
||||
property: "font-variant-ligatures",
|
||||
from: "no-historical-ligatures",
|
||||
to: "historical-ligatures",
|
||||
midPoint: "historical-ligatures",
|
||||
},
|
||||
{
|
||||
property: "font-variant-numeric",
|
||||
from: "ordinal",
|
||||
to: "slashed-zero",
|
||||
midPoint: "slashed-zero",
|
||||
},
|
||||
{
|
||||
property: "font-variant-position",
|
||||
from: "super",
|
||||
to: "sub",
|
||||
midPoint: "sub",
|
||||
},
|
||||
{
|
||||
property: "font-weight",
|
||||
from: "100",
|
||||
to: "900",
|
||||
midPoint: "500",
|
||||
},
|
||||
|
||||
// `line-height` is not a font property but is a longhand of `font`, and is also supported.
|
||||
{
|
||||
property: "line-height",
|
||||
from: "20px",
|
||||
to: "50px",
|
||||
midPoint: "35px",
|
||||
},
|
||||
|
||||
// ::marker supports `white-space`
|
||||
{
|
||||
property: "white-space",
|
||||
from: "pre-line",
|
||||
to: "nowrap",
|
||||
midPoint: "nowrap",
|
||||
},
|
||||
|
||||
// ::marker supports `color`
|
||||
{
|
||||
property: "color",
|
||||
from: "rgb(0, 100, 200)",
|
||||
to: "rgb(100, 200, 0)",
|
||||
midPoint: "rgb(50, 150, 100)",
|
||||
},
|
||||
|
||||
// ::marker supports `text-combine-upright`, `unicode-bidi` and `direction`,
|
||||
// but they are not animatable.
|
||||
{
|
||||
property: "text-combine-upright",
|
||||
from: "all",
|
||||
to: "all",
|
||||
midPoint: null,
|
||||
},
|
||||
{
|
||||
property: "unicode-bidi",
|
||||
from: "embed",
|
||||
to: "plaintext",
|
||||
midPoint: null,
|
||||
},
|
||||
{
|
||||
property: "direction",
|
||||
from: "rtl",
|
||||
to: "rtl",
|
||||
midPoint: null,
|
||||
},
|
||||
|
||||
// ::marker supports `content`
|
||||
{
|
||||
property: "content",
|
||||
from: "'foo'",
|
||||
to: "'bar'",
|
||||
midPoint: "\"bar\"",
|
||||
},
|
||||
|
||||
// ::marker supports text properties.
|
||||
{
|
||||
property: "hyphens",
|
||||
from: "manual",
|
||||
to: "none",
|
||||
midPoint: "none",
|
||||
},
|
||||
{
|
||||
property: "letter-spacing",
|
||||
from: "0px",
|
||||
to: "20px",
|
||||
midPoint: "10px",
|
||||
},
|
||||
{
|
||||
property: "line-break",
|
||||
from: "strict",
|
||||
to: "anywhere",
|
||||
midPoint: "anywhere",
|
||||
},
|
||||
{
|
||||
property: "overflow-wrap",
|
||||
from: "break-word",
|
||||
to: "anywhere",
|
||||
midPoint: "anywhere",
|
||||
},
|
||||
{
|
||||
property: "tab-size",
|
||||
from: "0px",
|
||||
to: "20px",
|
||||
midPoint: "10px",
|
||||
},
|
||||
{
|
||||
property: "text-transform",
|
||||
from: "lowercase",
|
||||
to: "uppercase",
|
||||
midPoint: "uppercase",
|
||||
},
|
||||
{
|
||||
property: "word-break",
|
||||
from: "break-all",
|
||||
to: "break-word",
|
||||
midPoint: "break-word",
|
||||
},
|
||||
{
|
||||
property: "word-spacing",
|
||||
from: "0px",
|
||||
to: "20px",
|
||||
midPoint: "10px",
|
||||
},
|
||||
|
||||
// ::marker supports inherited text decoration properties.
|
||||
{
|
||||
property: "text-decoration-skip-ink",
|
||||
from: "auto",
|
||||
to: "none",
|
||||
midPoint: "none",
|
||||
},
|
||||
{
|
||||
property: "text-emphasis",
|
||||
from: "dot rgb(0, 200, 0)",
|
||||
to: "triangle rgb(100, 0, 200)",
|
||||
midPoint: "triangle rgb(50, 100, 100)",
|
||||
},
|
||||
{
|
||||
property: "text-emphasis-color",
|
||||
from: "rgb(0, 200, 0)",
|
||||
to: "rgb(100, 0, 200)",
|
||||
midPoint: "rgb(50, 100, 100)",
|
||||
},
|
||||
{
|
||||
property: "text-emphasis-position",
|
||||
from: "over right",
|
||||
to: "under left",
|
||||
midPoint: "under left",
|
||||
},
|
||||
{
|
||||
property: "text-emphasis-style",
|
||||
from: "filled dot",
|
||||
to: "filled triangle",
|
||||
midPoint: "triangle",
|
||||
},
|
||||
{
|
||||
property: "text-shadow",
|
||||
from: "rgb(0, 200, 0) 1px 2px 3px",
|
||||
to: "rgb(100, 0, 200) 3px 2px 1px",
|
||||
midPoint: "rgb(50, 100, 100) 2px 2px 2px",
|
||||
},
|
||||
|
||||
// ::marker supports `cursor`.
|
||||
{
|
||||
property: "cursor",
|
||||
from: "auto",
|
||||
to: "move",
|
||||
midPoint: "move",
|
||||
},
|
||||
|
||||
// ::marker does NOT support layout properties
|
||||
{
|
||||
property: "display",
|
||||
from: "flex",
|
||||
to: "none",
|
||||
midPoint: ["block", "inline", "inline-block"],
|
||||
},
|
||||
{
|
||||
property: "position",
|
||||
from: "fixed",
|
||||
to: "absolute",
|
||||
midPoint: "static",
|
||||
},
|
||||
{
|
||||
property: "float",
|
||||
from: "left",
|
||||
to: "right",
|
||||
midPoint: "none",
|
||||
},
|
||||
|
||||
// ::marker does NOT support list properties despite being affected by them,
|
||||
// they apply to the list item instead.
|
||||
{
|
||||
property: "list-style",
|
||||
from: "inside url('foo') square",
|
||||
to: "inside url('bar') decimal",
|
||||
midPoint: "outside none disc",
|
||||
},
|
||||
{
|
||||
property: "list-style-image",
|
||||
from: "url('foo')",
|
||||
to: "url('bar')",
|
||||
midPoint: "none",
|
||||
},
|
||||
{
|
||||
property: "list-style-position",
|
||||
from: "inside",
|
||||
to: "inside",
|
||||
midPoint: "outside",
|
||||
},
|
||||
{
|
||||
property: "list-style-type",
|
||||
from: "square",
|
||||
to: "decimal",
|
||||
midPoint: "disc",
|
||||
},
|
||||
];
|
||||
|
||||
const target = document.getElementById("target");
|
||||
const styleElement = document.getElementById("style");
|
||||
const markerStyle = getComputedStyle(target, "::marker");
|
||||
|
||||
function check({property, from, to, midPoint}) {
|
||||
assert_true(property in markerStyle, property + " doesn't seem to be supported in the computed style");
|
||||
assert_true(CSS.supports(property, from), `'${from}' is a supported value for ${property}.`);
|
||||
assert_true(CSS.supports(property, to), `'${to}' is a supported value for ${property}.`);
|
||||
const computed = markerStyle.getPropertyValue(property);
|
||||
if (Array.isArray(midPoint)) {
|
||||
assert_in_array(computed, midPoint);
|
||||
} else {
|
||||
assert_equals(computed, midPoint);
|
||||
}
|
||||
}
|
||||
|
||||
function testAnimations(interpolationTests) {
|
||||
styleElement.textContent = `
|
||||
::marker {
|
||||
animation: anim 2s -1s paused linear;
|
||||
}
|
||||
@keyframes anim {
|
||||
from {}
|
||||
to {}
|
||||
}
|
||||
`;
|
||||
const keyframes = styleElement.sheet.cssRules[1];
|
||||
const fromStyle = keyframes.cssRules[0].style;
|
||||
const toStyle = keyframes.cssRules[1].style;
|
||||
for (let {property, from, to, midPoint} of interpolationTests) {
|
||||
fromStyle.cssText = "";
|
||||
toStyle.cssText = "";
|
||||
if (midPoint == null) {
|
||||
midPoint = markerStyle.getPropertyValue(property);
|
||||
}
|
||||
fromStyle.setProperty(property, from);
|
||||
toStyle.setProperty(property, to);
|
||||
test(() => {
|
||||
check({property, from, to, midPoint});
|
||||
}, `Animation of ${property} in ::marker`);
|
||||
}
|
||||
}
|
||||
|
||||
function testTransitions(interpolationTests) {
|
||||
styleElement.textContent = `
|
||||
.transition::marker {
|
||||
transition: all 2s -1s linear;
|
||||
}
|
||||
.from::marker {}
|
||||
.to::marker {}
|
||||
`;
|
||||
const fromStyle = styleElement.sheet.cssRules[1].style;
|
||||
const toStyle = styleElement.sheet.cssRules[2].style;
|
||||
for (let {property, from, to, midPoint} of interpolationTests) {
|
||||
fromStyle.cssText = "";
|
||||
toStyle.cssText = "";
|
||||
if (midPoint == null) {
|
||||
midPoint = to;
|
||||
}
|
||||
fromStyle.setProperty(property, from);
|
||||
toStyle.setProperty(property, to);
|
||||
target.className = "from";
|
||||
markerStyle.width;
|
||||
target.classList.add("transition");
|
||||
markerStyle.width;
|
||||
target.classList.add("to");
|
||||
test(() => {
|
||||
check({property, from, to, midPoint});
|
||||
}, `Transition of ${property} in ::marker`);
|
||||
}
|
||||
}
|
||||
|
||||
testAnimations(interpolationTests);
|
||||
testTransitions(interpolationTests);
|
||||
</script>
|
||||
Loading…
Reference in New Issue
Block a user