OSSForks/ladybird
1
0
Fork 0
mirror of https://github.com/zebrajr/ladybird.git synced 2025-12-06 00:19:53 +01:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

LibWeb: Ensure layout is up to date before resolving canvas colors

Browse Source
This commit is contained in:
Tim Ledbetter 2025-10-27 10:06:59 +00:00 committed by Jelle Raaijmakers
parent 4dbae64dce
commit 9da723b5c6
11 changed files with 210 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

104
Libraries/LibWeb/DOM/Document.h
View File

@ -71,56 +71,60 @@ enum class InvalidateLayoutTreeReason {
[[nodiscard]] StringView to_string(InvalidateLayoutTreeReason);
#define ENUMERATE_UPDATE_LAYOUT_REASONS(X) \
X(CanvasRenderingContext2DSetFilter) \
X(CursorBlinkTimer) \
X(Debugging) \
X(DocumentElementFromPoint) \
X(DocumentElementsFromPoint) \
X(DocumentFindMatchingText) \
X(DocumentSetDesignMode) \
X(DumpDisplayList) \
X(ElementCheckVisibility) \
X(ElementClientHeight) \
X(ElementClientLeft) \
X(ElementClientTop) \
X(ElementClientWidth) \
X(ElementGetClientRects) \
X(ElementIsPotentiallyScrollable) \
X(ElementScroll) \
X(ElementScrollHeight) \
X(ElementScrollIntoView) \
X(ElementScrollLeft) \
X(ElementScrollTop) \
X(ElementScrollWidth) \
X(ElementSetScrollLeft) \
X(ElementSetScrollTop) \
X(EventHandlerHandleDoubleClick) \
X(EventHandlerHandleDragAndDrop) \
X(EventHandlerHandleMouseDown) \
X(EventHandlerHandleMouseMove) \
X(EventHandlerHandleMouseUp) \
X(EventHandlerHandleMouseWheel) \
X(HTMLElementGetTheTextSteps) \
X(HTMLElementOffsetHeight) \
X(HTMLElementOffsetLeft) \
X(HTMLElementOffsetParent) \
X(HTMLElementOffsetTop) \
X(HTMLElementOffsetWidth) \
X(HTMLElementScrollParent) \
X(HTMLEventLoopRenderingUpdate) \
X(HTMLImageElementHeight) \
X(HTMLImageElementWidth) \
X(HTMLInputElementHeight) \
X(HTMLInputElementWidth) \
X(InternalsHitTest) \
X(MediaQueryListMatches) \
X(NodeNameOrDescription) \
X(RangeGetClientRects) \
X(ResolvedCSSStyleDeclarationProperty) \
X(SVGDecodedImageDataRender) \
X(SVGGraphicsElementGetBBox) \
X(SourceSetNormalizeSourceDensities) \
#define ENUMERATE_UPDATE_LAYOUT_REASONS(X) \
X(CanvasRenderingContext2DSetFilter) \
X(CanvasRenderingContext2DSetFillStyle) \
X(CanvasRenderingContext2DSetShadowColor) \
X(CanvasRenderingContext2DSetStrokeStyle) \
X(CanvasSetFillStyle) \
X(CursorBlinkTimer) \
X(Debugging) \
X(DocumentElementFromPoint) \
X(DocumentElementsFromPoint) \
X(DocumentFindMatchingText) \
X(DocumentSetDesignMode) \
X(DumpDisplayList) \
X(ElementCheckVisibility) \
X(ElementClientHeight) \
X(ElementClientLeft) \
X(ElementClientTop) \
X(ElementClientWidth) \
X(ElementGetClientRects) \
X(ElementIsPotentiallyScrollable) \
X(ElementScroll) \
X(ElementScrollHeight) \
X(ElementScrollIntoView) \
X(ElementScrollLeft) \
X(ElementScrollTop) \
X(ElementScrollWidth) \
X(ElementSetScrollLeft) \
X(ElementSetScrollTop) \
X(EventHandlerHandleDoubleClick) \
X(EventHandlerHandleDragAndDrop) \
X(EventHandlerHandleMouseDown) \
X(EventHandlerHandleMouseMove) \
X(EventHandlerHandleMouseUp) \
X(EventHandlerHandleMouseWheel) \
X(HTMLElementGetTheTextSteps) \
X(HTMLElementOffsetHeight) \
X(HTMLElementOffsetLeft) \
X(HTMLElementOffsetParent) \
X(HTMLElementOffsetTop) \
X(HTMLElementOffsetWidth) \
X(HTMLElementScrollParent) \
X(HTMLEventLoopRenderingUpdate) \
X(HTMLImageElementHeight) \
X(HTMLImageElementWidth) \
X(HTMLInputElementHeight) \
X(HTMLInputElementWidth) \
X(InternalsHitTest) \
X(MediaQueryListMatches) \
X(NodeNameOrDescription) \
X(RangeGetClientRects) \
X(ResolvedCSSStyleDeclarationProperty) \
X(SVGDecodedImageDataRender) \
X(SVGGraphicsElementGetBBox) \
X(SourceSetNormalizeSourceDensities) \
X(WindowScroll)
enum class UpdateLayoutReason {

12
Libraries/LibWeb/HTML/Canvas/CanvasFillStrokeStyles.cpp
View File

@ -43,8 +43,10 @@ void CanvasFillStrokeStyles<IncludingClass>::set_fill_style(FillOrStrokeStyleVar
if (style_value && style_value->has_color()) {
CSS::ColorResolutionContext color_resolution_context {};
if (context && context->layout_node()) {
color_resolution_context = CSS::ColorResolutionContext::for_layout_node_with_style(*context->layout_node());
if (context) {
context->document().update_layout(DOM::UpdateLayoutReason::CanvasRenderingContext2DSetFillStyle);
if (context->layout_node())
color_resolution_context = CSS::ColorResolutionContext::for_layout_node_with_style(*context->layout_node());
}
auto parsedValue = style_value->to_color(color_resolution_context).value_or(Color::Black);
@ -97,8 +99,10 @@ void CanvasFillStrokeStyles<IncludingClass>::set_stroke_style(FillOrStrokeStyleV
if (style_value && style_value->has_color()) {
CSS::ColorResolutionContext color_resolution_context {};
if (context && context->layout_node()) {
color_resolution_context = CSS::ColorResolutionContext::for_layout_node_with_style(*context->layout_node());
if (context) {
context->document().update_layout(DOM::UpdateLayoutReason::CanvasRenderingContext2DSetStrokeStyle);
if (context->layout_node())
color_resolution_context = CSS::ColorResolutionContext::for_layout_node_with_style(*context->layout_node());
}
auto parsedValue = style_value->to_color(color_resolution_context).value_or(Color::Black);

4
Libraries/LibWeb/HTML/CanvasRenderingContext2D.cpp
View File

@ -1053,9 +1053,9 @@ void CanvasRenderingContext2D::set_shadow_color(String color)
auto style_value = parse_css_value(CSS::Parser::ParsingParams(), color, CSS::PropertyID::Color);
if (style_value && style_value->has_color()) {
CSS::ColorResolutionContext color_resolution_context {};
context.document().update_layout(DOM::UpdateLayoutReason::CanvasRenderingContext2DSetShadowColor);
if (auto node = context.layout_node()) {
color_resolution_context = CSS::ColorResolutionContext::for_layout_node_with_style(*context.layout_node());
color_resolution_context = CSS::ColorResolutionContext::for_layout_node_with_style(*node);
}
auto parsedValue = style_value->to_color(color_resolution_context).value_or(Color::Black);

6
Tests/LibWeb/Text/expected/wpt-import/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.current.basic.txt Normal file
View File

@ -0,0 +1,6 @@
Harness status: OK
Found 1 tests
1 Pass
Pass currentColor is computed from the canvas element

6
Tests/LibWeb/Text/expected/wpt-import/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.current.changed.txt Normal file
View File

@ -0,0 +1,6 @@
Harness status: OK
Found 1 tests
1 Pass
Pass currentColor is computed when the attribute is set, not when it is painted

6
Tests/LibWeb/Text/expected/wpt-import/html/canvas/element/shadows/2d.shadow.attributes.shadowColor.current.basic.txt Normal file
View File

@ -0,0 +1,6 @@
Harness status: OK
Found 1 tests
1 Pass
Pass currentColor is computed from the canvas element

6
Tests/LibWeb/Text/expected/wpt-import/html/canvas/element/shadows/2d.shadow.attributes.shadowColor.current.changed.txt Normal file
View File

@ -0,0 +1,6 @@
Harness status: OK
Found 1 tests
1 Pass
Pass currentColor is computed when the attribute is set, not when it is painted

31
Tests/LibWeb/Text/input/wpt-import/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.current.basic.html Normal file
View File

@ -0,0 +1,31 @@
<!DOCTYPE html>
<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
<meta charset="UTF-8">
<title>Canvas test: 2d.fillStyle.parse.current.basic</title>
<script src="../../../../resources/testharness.js"></script>
<script src="../../../../resources/testharnessreport.js"></script>
<script src="../../../../html/canvas/resources/canvas-tests.js"></script>
<link rel="stylesheet" href="../../../../html/canvas/resources/canvas-tests.css">
<body class="show_output">
<h1>2d.fillStyle.parse.current.basic</h1>
<p class="desc">currentColor is computed from the canvas element</p>
<p class="output">Actual output:</p>
<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<p class="output expectedtext">Expected output:<p><img src="../../../../images/green-100x50.png" class="output expected" id="expected" alt="">
<ul id="d"></ul>
<script>
var t = async_test("currentColor is computed from the canvas element");
_addTest(function(canvas, ctx) {
canvas.setAttribute('style', 'color: #0f0');
ctx.fillStyle = '#f00';
ctx.fillStyle = 'currentColor';
ctx.fillRect(0, 0, 100, 50);
_assertPixel(canvas, 50,25, 0,255,0,255);
});
</script>

32
Tests/LibWeb/Text/input/wpt-import/html/canvas/element/fill-and-stroke-styles/2d.fillStyle.parse.current.changed.html Normal file
View File

@ -0,0 +1,32 @@
<!DOCTYPE html>
<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
<meta charset="UTF-8">
<title>Canvas test: 2d.fillStyle.parse.current.changed</title>
<script src="../../../../resources/testharness.js"></script>
<script src="../../../../resources/testharnessreport.js"></script>
<script src="../../../../html/canvas/resources/canvas-tests.js"></script>
<link rel="stylesheet" href="../../../../html/canvas/resources/canvas-tests.css">
<body class="show_output">
<h1>2d.fillStyle.parse.current.changed</h1>
<p class="desc">currentColor is computed when the attribute is set, not when it is painted</p>
<p class="output">Actual output:</p>
<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<p class="output expectedtext">Expected output:<p><img src="../../../../images/green-100x50.png" class="output expected" id="expected" alt="">
<ul id="d"></ul>
<script>
var t = async_test("currentColor is computed when the attribute is set, not when it is painted");
_addTest(function(canvas, ctx) {
canvas.setAttribute('style', 'color: #0f0');
ctx.fillStyle = '#f00';
ctx.fillStyle = 'currentColor';
canvas.setAttribute('style', 'color: #f00');
ctx.fillRect(0, 0, 100, 50);
_assertPixel(canvas, 50,25, 0,255,0,255);
});
</script>

29
Tests/LibWeb/Text/input/wpt-import/html/canvas/element/shadows/2d.shadow.attributes.shadowColor.current.basic.html Normal file
View File

@ -0,0 +1,29 @@
<!DOCTYPE html>
<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
<meta charset="UTF-8">
<title>Canvas test: 2d.shadow.attributes.shadowColor.current.basic</title>
<script src="../../../../resources/testharness.js"></script>
<script src="../../../../resources/testharnessreport.js"></script>
<script src="../../../../html/canvas/resources/canvas-tests.js"></script>
<link rel="stylesheet" href="../../../../html/canvas/resources/canvas-tests.css">
<body class="show_output">
<h1>2d.shadow.attributes.shadowColor.current.basic</h1>
<p class="desc">currentColor is computed from the canvas element</p>
<p class="output">Actual output:</p>
<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<ul id="d"></ul>
<script>
var t = async_test("currentColor is computed from the canvas element");
_addTest(function(canvas, ctx) {
canvas.style.color = '#0f0';
ctx.shadowColor = 'currentColor';
_assertSame(ctx.shadowColor, '#00ff00', "ctx.shadowColor", "'#00ff00'");
});
</script>

30
Tests/LibWeb/Text/input/wpt-import/html/canvas/element/shadows/2d.shadow.attributes.shadowColor.current.changed.html Normal file
View File

@ -0,0 +1,30 @@
<!DOCTYPE html>
<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
<meta charset="UTF-8">
<title>Canvas test: 2d.shadow.attributes.shadowColor.current.changed</title>
<script src="../../../../resources/testharness.js"></script>
<script src="../../../../resources/testharnessreport.js"></script>
<script src="../../../../html/canvas/resources/canvas-tests.js"></script>
<link rel="stylesheet" href="../../../../html/canvas/resources/canvas-tests.css">
<body class="show_output">
<h1>2d.shadow.attributes.shadowColor.current.changed</h1>
<p class="desc">currentColor is computed when the attribute is set, not when it is painted</p>
<p class="output">Actual output:</p>
<canvas id="c" class="output" width="100" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<ul id="d"></ul>
<script>
var t = async_test("currentColor is computed when the attribute is set, not when it is painted");
_addTest(function(canvas, ctx) {
canvas.style.color = '#0f0';
ctx.shadowColor = 'currentColor';
canvas.style.color = '#f00';
_assertSame(ctx.shadowColor, '#00ff00', "ctx.shadowColor", "'#00ff00'");
});
</script>