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

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

View File

@ -73,6 +73,10 @@ enum class InvalidateLayoutTreeReason {
#define ENUMERATE_UPDATE_LAYOUT_REASONS(X) \
X(CanvasRenderingContext2DSetFilter) \
X(CanvasRenderingContext2DSetFillStyle) \
X(CanvasRenderingContext2DSetShadowColor) \
X(CanvasRenderingContext2DSetStrokeStyle) \
X(CanvasSetFillStyle) \
X(CursorBlinkTimer) \
X(Debugging) \
X(DocumentElementFromPoint) \

View File

@ -43,7 +43,9 @@ void CanvasFillStrokeStyles<IncludingClass>::set_fill_style(FillOrStrokeStyleVar
if (style_value && style_value->has_color()) {
CSS::ColorResolutionContext color_resolution_context {};
if (context && 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());
}
@ -97,7 +99,9 @@ void CanvasFillStrokeStyles<IncludingClass>::set_stroke_style(FillOrStrokeStyleV
if (style_value && style_value->has_color()) {
CSS::ColorResolutionContext color_resolution_context {};
if (context && 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());
}

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);

View File

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

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

View File

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

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

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>

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>

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>

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>