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

LibWeb/HTML: Use paintable box for 'associated CSS layout box' check

Browse source 
This is consistent with other functions such as
HTMLElement::offset_width and fixes a crash for the included test.
Returning an offset of zero is not correct for this case, but this is
still an improvement to not crash.
This commit is contained in:
Shannon Booth 2024-12-29 12:43:57 +13:00 • committed by Andreas Kling
commit 44bb2b7e32
Notes: github-actions[bot] 2025-01-02 10:29:35 +00:00
3 changed files with 78 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

4
Libraries/LibWeb/HTML/HTMLElement.cpp
View file

@ -460,7 +460,7 @@ int HTMLElement::offset_top() const
// NOTE: Ensure that layout is up-to-date before looking at metrics. // NOTE: Ensure that layout is up-to-date before looking at metrics.
const_cast<DOM::Document&>(document()).update_layout(); const_cast<DOM::Document&>(document()).update_layout();
if (!layout_node()) if (!paintable_box())
return 0; return 0;
CSSPixels top_border_edge_of_element = paintable_box()->absolute_border_box_rect().y(); CSSPixels top_border_edge_of_element = paintable_box()->absolute_border_box_rect().y();
@ -502,7 +502,7 @@ int HTMLElement::offset_left() const
// NOTE: Ensure that layout is up-to-date before looking at metrics. // NOTE: Ensure that layout is up-to-date before looking at metrics.
const_cast<DOM::Document&>(document()).update_layout(); const_cast<DOM::Document&>(document()).update_layout();
if (!layout_node()) if (!paintable_box())
return 0; return 0;
CSSPixels left_border_edge_of_element = paintable_box()->absolute_border_box_rect().x(); CSSPixels left_border_edge_of_element = paintable_box()->absolute_border_box_rect().x();

24
Tests/LibWeb/Text/expected/wpt-import/html/rendering/widgets/button-layout/display-other.txt Normal file
View file

@ -0,0 +1,24 @@
Harness status: OK
Found 18 tests
3 Pass
15 Fail
Fail display: block
Pass display: run-in
Pass display: flow
Fail display: flow-root
Fail display: table
Pass display: list-item
Fail display: table-row-group
Fail display: table-header-group
Fail display: table-footer-group
Fail display: table-row
Fail display: table-cell
Fail display: table-column-group
Fail display: table-column
Fail display: table-caption
Fail display: ruby-base
Fail display: ruby-text
Fail display: ruby-base-container
Fail display: ruby-text-container

52
Tests/LibWeb/Text/input/wpt-import/html/rendering/widgets/button-layout/display-other.html Normal file
View file

@ -0,0 +1,52 @@
<!doctype html>
<title>button with other display values</title>
<script src=../../../../resources/testharness.js></script>
<script src=../../../../resources/testharnessreport.js></script>
<style>
body { margin: 0 }
.float { width: 100px; height: 100px; float: left; background: blue; margin: 10px }
</style>
<div class=float></div>
<button id=button style="display: block;"><div class=float></div></button><span id=after>after</span>
<script>
// These should all behave as flow-root.
const displayValues = ['run-in', 'flow', 'flow-root', 'table', 'list-item',
'table-row-group', 'table-header-group', 'table-footer-group',
'table-row', 'table-cell', 'table-column-group', 'table-column',
'table-caption', 'ruby-base', 'ruby-text', 'ruby-base-container',
'ruby-text-container'];
const button = document.getElementById('button');
const after = document.getElementById('after');
function getValues() {
return {
buttonLeft: button.offsetLeft,
buttonTop: button.offsetTop,
buttonWidth: button.clientWidth,
buttonHeight: button.clientHeight,
afterLeft: after.offsetLeft,
afterTop: after.offsetTop,
};
}
const expected = getValues();
test(t => {
assert_equals(expected.buttonLeft, 120, 'buttonLeft');
assert_equals(expected.buttonTop, 0, 'buttonTop');
assert_greater_than_equal(expected.buttonWidth, 120, 'buttonWidth');
assert_greater_than_equal(expected.buttonHeight, 120, 'buttonHeight');
assert_equals(expected.afterLeft, 0, 'afterLeft');
assert_greater_than_equal(expected.afterTop, 120, 'afterTop');
}, 'display: block');
for (const val of displayValues) {
test(t => {
t.add_cleanup(() => {
button.style.display = 'block';
});
assert_true(CSS.supports(`display: ${val}`), `display: ${val} is not supported`);
button.style.display = val;
const values = getValues();
for (const prop in values) {
assert_equals(values[prop], expected[prop], prop);
}
}, `display: ${val}`);
}
</script>