eliott/ladybird
1
0
Fork 0
mirror of https://github.com/LadybirdBrowser/ladybird synced 2026-04-28 10:37:17 +02:00
Code Issues Packages Projects Releases Wiki Activity

LibWeb: Implement HTMLImageElement x() and y() getters

Browse Source 
These attributes get the image's top left border edge  relative to the
root element's origin.

These methods ignore any transforms.
This commit is contained in:
Tim Ledbetter
2026-01-10 00:06:19 +00:00
committed by Jelle Raaijmakers
parent 52781cc2fd
commit 79a427e1ef
Notes: github-actions[bot] 2026-01-10 23:34:04 +00:00 
Author: https://github.com/tcl3
Commit: https://github.com/LadybirdBrowser/ladybird/commit/79a427e1ef9
Pull-request: https://github.com/LadybirdBrowser/ladybird/pull/7408
Reviewed-by: https://github.com/gmta ✅
9 changed files with 142 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
Tests/LibWeb/Text/input/wpt-import/css/cssom-view/HTMLImageElement-x-and-y-ignore-transforms.html Normal file
View File

@@ -0,0 +1,30 @@
<!DOCTYPE html>
<link rel="author" href="mailto:mrobinson@igalia.com.org">
<link rel="help" href="https://drafts.csswg.org/cssom-view/#extensions-to-the-htmlimageelement-interface">
<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1676952">
<title>CSS OM View Test: HTMLImageElement's 'x' and 'y' property values should ignore transforms</title>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<style>
.transformed {
transform: translate(40px, 40px);
}
</style>
<div id="container">
<img id="image" src="../../images/green.png">
</div>
<script>
test(() => {
const unTransformedX = image.x;
const unTransformedY = image.y;
container.classList.add("transformed");
assert_equals(unTransformedX, image.x);
assert_equals(unTransformedY, image.y);
}, `HTMLImageElement's 'x' and 'y' property values ignore transforms`);
</script>

46
Tests/LibWeb/Text/input/wpt-import/css/cssom-view/cssom-view-img-attributes-001.html Normal file
View File

@@ -0,0 +1,46 @@
<!DOCTYPE html>
<html>
<head>
<title>CSS Test: HTMLImageElement x and y attributes</title>
<link rel="author" title="Adobe" href="http://html.adobe.com/">
<link rel="author" title="Alan Stearns" href="mailto:stearns@adobe.com">
<link rel="reviewer" title="" href="">
<link rel="help" href="https://drafts.csswg.org/cssom-view/#excensions-to-the-htmlimageelement-interface">
<meta name="assert" content="HTMLImageElement attributes give x and y position of CSS layout box">
<meta name="flags" content="dom">
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
</head>
<body>
<div id="log"></div>
<script type="text/javascript">
function testIMGAttributes(attribute_name, display_none) {
var element = document.createElement("img");
document.body.appendChild(element);
element.style.setProperty("position", "absolute");
element.style.setProperty("left", "10px");
element.style.setProperty("top", "10px");
if (display_none) {
element.style.setProperty("display", "none");
}
var attributeValue = element[attribute_name];
document.body.removeChild(element);
return attributeValue;
}
var imgAttributes = [
["x", false, 10],
["y", false, 10],
["x", true, 0],
["y", true, 0],
];
imgAttributes.forEach(function(test_data) {
test (function() { assert_equals(testIMGAttributes(test_data[0], test_data[1]), test_data[2])},
"test " + test_data[0] + " with display " + test_data[1])
}
);
</script>
</body>
</html>