RGBCube/serenity
1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-07-28 17:37:47 +00:00
Code Issues Activity Actions

LibWeb: Begin implementing the HTMLInputElement 'image' type state

Browse source 
This implements enough to represent <input type=image> with its loaded
source image (or fallback to its alt text, if applicable). This does not
implement acquring coordinates from user-activated click events on the
image.
This commit is contained in:
Timothy Flynn 2024-02-18 21:12:14 -05:00 • committed by Andreas Kling
parent 45a47cb32b
commit debb5690ce
7 changed files with 214 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

17
Tests/LibWeb/Layout/expected/input-image.txt Normal file
View file

@ -0,0 +1,17 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (0,0) content-size 800x600 [BFC] children: not-inline
BlockContainer <body> at (8,8) content-size 784x120 children: not-inline
BlockContainer <form> at (8,8) content-size 784x120 children: inline
frag 0 from ImageBox start: 0, length: 0, rect: [8,8 120x120] baseline: 120
TextNode <#text>
ImageBox <input> at (8,8) content-size 120x120 inline-block children: not-inline
TextNode <#text>
BlockContainer <(anonymous)> at (8,144) content-size 784x0 children: inline
TextNode <#text>
ViewportPaintable (Viewport<#document>) [0,0 800x600]
PaintableWithLines (BlockContainer<HTML>) [0,0 800x600]
PaintableWithLines (BlockContainer<BODY>) [8,8 784x120] overflow: [8,8 784x136]
PaintableWithLines (BlockContainer<FORM>) [8,8 784x120]
ImagePaintable (ImageBox<INPUT>) [8,8 120x120]
PaintableWithLines (BlockContainer(anonymous)) [8,144 784x0]

3
Tests/LibWeb/Layout/input/input-image.html Normal file
View file

@ -0,0 +1,3 @@
<form>
<input type="image" src="120.png" alt="Image not found" width="48" height="48">
</form>

2
Tests/LibWeb/Text/expected/input-image.txt Normal file
View file

@ -0,0 +1,2 @@
../../Layout/input/120.png loaded
file:///i-do-no-exist-i-swear.png failed

31
Tests/LibWeb/Text/input/input-image.html Normal file
View file

@ -0,0 +1,31 @@
<script src="./include.js"></script>
<script type="text/javascript">
const SOURCES = ["../../Layout/input/120.png", "file:///i-do-no-exist-i-swear.png"];
const runTest = source => {
let input = document.createElement("input");
input.type = "image";
input.alt = "submit";
return new Promise((resolve, reject) => {
input.addEventListener("load", () => {
resolve(`${input.src} loaded`);
});
input.addEventListener("error", () => {
resolve(`${input.src} failed`);
});
input.setAttribute("src", source);
});
};
asyncTest(done => {
let promises = SOURCES.map(source => runTest(source));
Promise.allSettled(promises)
.then(results => results.map(result => result.value))
.then(results => results.sort())
.then(results => results.forEach(println))
.finally(done);
});
</script>