mirrors/ladybird
0
0
Fork 0
mirror of https://github.com/LadybirdBrowser/ladybird.git synced 2025-07-29 04:09:13 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 9

LibWeb: Mark canvas element for relayout when width or height changes

Browse source 
While width and height are presentational hints on canvas, they actually
map to the CSS aspect-ratio attribute, not to CSS width and height.
For this reason, we actually need to manually mark for relayout here.

Also import a WPT test that was flaky before this change.
This commit is contained in:
Andreas Kling 2025-05-19 11:04:13 +02:00 • committed by Andreas Kling
commit 1a055fcb24
Notes: github-actions[bot] 2025-05-19 11:59:00 +00:00
5 changed files with 42 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

1
Libraries/LibWeb/DOM/Node.h
View file

@ -93,6 +93,7 @@ enum class StyleInvalidationReason {
#define ENUMERATE_SET_NEEDS_LAYOUT_REASONS(X) \
X(CharacterDataReplaceData) \
X(FinalizeACrossDocumentNavigation) \
X(HTMLCanvasElementWidthOrHeightChange) \
X(HTMLImageElementReactToChangesInTheEnvironment) \
X(HTMLImageElementUpdateTheImageData) \
X(HTMLVideoElementSetVideoTrack) \

2
Libraries/LibWeb/HTML/HTMLCanvasElement.cpp
View file

@ -193,6 +193,8 @@ void HTMLCanvasElement::attribute_changed(FlyString const& local_name, Optional<
if (local_name.equals_ignoring_ascii_case(HTML::AttributeNames::width) || local_name.equals_ignoring_ascii_case(HTML::AttributeNames::height)) {
notify_context_about_canvas_size_change();
reset_context_to_default_state();
if (auto layout_node = this->layout_node())
layout_node->set_needs_layout_update(DOM::SetNeedsLayoutReason::HTMLCanvasElementWidthOrHeightChange);
}
}

6
Tests/LibWeb/Text/expected/wpt-import/html/canvas/element/canvas-host/2d.canvas.host.size.attributes.setAttribute.decimal.txt Normal file
View file

@ -0,0 +1,6 @@
Harness status: OK
Found 1 tests
1 Pass
Pass Parsing of non-negative integers in setAttribute

33
Tests/LibWeb/Text/input/wpt-import/html/canvas/element/canvas-host/2d.canvas.host.size.attributes.setAttribute.decimal.html Normal file
View file

@ -0,0 +1,33 @@
<!DOCTYPE html>
<!-- DO NOT EDIT! This test has been generated by /html/canvas/tools/gentest.py. -->
<meta charset="UTF-8">
<title>Canvas test: 2d.canvas.host.size.attributes.setAttribute.decimal</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.canvas.host.size.attributes.setAttribute.decimal</h1>
<p class="desc">Parsing of non-negative integers in setAttribute</p>
<p class="output">Actual output:</p>
<canvas id="c" class="output" width="50" height="50"><p class="fallback">FAIL (fallback content)</p></canvas>
<p class="output expectedtext">Expected output:<p><img src="2d.canvas.host.size.attributes.setAttribute.decimal.png" class="output expected" id="expected" alt="">
<ul id="d"></ul>
<script>
var t = async_test("Parsing of non-negative integers in setAttribute");
_addTest(function(canvas, ctx) {
canvas.setAttribute('width', '100.999');
canvas.setAttribute('height', '100.999');
_assertSame(canvas.width, 100, "canvas.width", "100");
_assertSame(canvas.height, 100, "canvas.height", "100");
_assertSame(window.getComputedStyle(canvas, null).getPropertyValue("width"), "100px", "window.getComputedStyle(canvas, null).getPropertyValue(\"width\")", "\"100px\"");
_assertSame(canvas.getAttribute('width'), '100.999', "canvas.getAttribute('width')", "'100.999'");
_assertSame(canvas.getAttribute('height'), '100.999', "canvas.getAttribute('height')", "'100.999'");
});
</script>

BIN
Tests/LibWeb/Text/input/wpt-import/html/canvas/element/canvas-host/2d.canvas.host.size.attributes.setAttribute.decimal.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 137 B