1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-07-10 09:07:35 +00:00
Commit graph

79 commits

Author SHA1 Message Date
Andreas Kling
422bbe98a5 LibWeb: Start adding support for the <iframe> element! :^)
This patch introduces a bunch of things:

- Subframes (Web::Frame::create_subframe())
- HTMLIFrameElement (loads and owns the hosted Web::Frame)
- LayoutFrame (layout and rendering of the hosted frame)

There's still a huge number of things missing, like scrolling, overflow
handling, event handling, scripting, etc. But we can make a little
iframe in a document and it actually renders another document there.
I think that's pretty cool! :^)
2020-06-05 23:36:02 +02:00
Andreas Kling
ffae239e91 Base: Fix bad URL in welcome page 2020-06-02 22:05:29 +02:00
Andreas Kling
d4ddb0013c LibWeb: Share decoded images at the Resource level :^)
This patch adds ImageResource as a subclass of Resource. This new class
also keeps a Gfx::ImageDecoder so that we can share decoded bitmaps
between all clients of an image resource inside LibWeb.

With this, we now share both encoded and decoded data for images. :^)

I had to change how the purgeable-volatile flag is updated to keep the
volatile-images-outside-the-visible-viewport optimization working.
HTMLImageElement now inherits from ImageResourceClient (a subclass of
ResourceClient with additional image-specific stuff) and informs its
ImageResource about whether it's inside the viewport or outside.

This is pretty awesome! :^)
2020-06-02 20:32:38 +02:00
FalseHonesty
b352a6b59d LibWeb: Implement vendor specific CSS color style for System Palette
Add "-libweb-palette-foo-bar" CSS color properties to allow CSS to
style itself using the currently selected System Theme.
2020-05-26 10:17:50 +02:00
Linus Groh
67b742bf32 LibWeb: Add document.querySelector() 2020-05-26 00:12:20 +02:00
Andreas Kling
e44c87cfff LibWeb: Implement enough HTML parsing to handle a small simple DOM :^)
We can now parse a little DOM like this:

<!DOCTYPE html>
<html>
    <head></head>
    <body>
        <div></div>
    </body>
</html>

This is pretty slow work, but the incremental progress is satisfying!
2020-05-24 00:49:22 +02:00
Andreas Kling
634ce37663 LibWeb: Make hit-testing work with display: inline-block;
When hit testing encountered a block with inline children, we assumed
that the inline children are nothing but text boxes. An inline-block
box is actually a block child of a block with inline children, so we
have to handle that scenario as well. :^)

Fixes #2353.
2020-05-23 21:08:25 +02:00
Andreas Kling
6caa5661f3 LibWeb: Teach HTMLTokenizer how to tokenize attributes
Properly tokenize single-quoted, double-quoted and unquoted attributes!
2020-05-23 01:22:15 +02:00
Andreas Kling
272b35d2e1 LibWeb: Begin work on a spec-compliant HTML parser
In order to actually view the web as it is, we're gonna need a proper
HTML parser. So let's build one!

This patch introduces the Web::HTMLTokenizer class, which currently
operates on a StringView input stream where it fetches (ASCII only atm)
codepoints and tokenizes acccording to the HTML spec tokenization algo.

The tokenizer state machine looks a bit weird but is written in a way
that tries to mimic the spec as closely as possible, in order to make
development easier and bugs less likely.

This initial version is far from finished, but it can parse a trivial
document with a DOCTYPE and open/close tags. :^)
2020-05-22 21:46:13 +02:00
Linus Groh
65d94a1e74 Base: Add simple setInterval() test 2020-05-21 15:18:08 +02:00
Hüseyin ASLITÜRK
ec9f1af0fb Base: Add HTML character escape test document
Test page for Turkish and Swedish custom characters.
2020-05-21 01:19:42 +02:00
Andreas Kling
3b11e471bd LibWeb: Allow reloading the current page with location.reload() 2020-05-18 22:05:13 +02:00
Andreas Kling
71007f6ebb LibWeb: Add location.protocol and location.host 2020-05-18 21:59:16 +02:00
Andreas Kling
efdfdbabdb LibWeb: Allow navigating to a new URL by setting window.location.href 2020-05-18 21:52:50 +02:00
Andreas Kling
1ec4db04cd LibWeb: Add a simple window.location object with some getters :^) 2020-05-18 21:42:40 +02:00
Linus Groh
7bfd24ca76 LibWeb: Support the :root pseudo class 2020-05-14 08:49:51 +02:00
Andreas Kling
5f9d80d8bc LibWeb: Add basic support for CSS percentages
Many properties can now have percentage values that get resolved in
layout. The reference value (what is this a percentage *of*?) differs
per property, so I've added a helper where you provide a reference
value as an added parameter to the existing length_or_fallback().
2020-05-11 23:07:30 +02:00
Linus Groh
4c1a765076 LibWeb: Add basic support for "border-style: {dotted,dashed}" 2020-05-10 19:41:00 +02:00
AnotherTest
a82419469f LibWeb: Add canvas.fill
This implements only one of the two forms of this function,
ctx.fill(winding_rule).
Also tweaks the quadratic curve demo to have a nice looking filled
shape.
2020-05-06 14:50:29 +02:00
Andreas Kling
e73ad78ba6 LibWeb: Add support for "display: inline-block"
This display type is implemented using a LayoutBlock that is_inline().
Basically it behaves like a block internally, and its children are laid
out in the normal block layout fashion. Externally however, it behaves
like an atomic inline-level box.

Layout of inline-block boxes happens in three stages:

1. The outer dimensions of the block are computed during the recursive
   normal layout pass. We skip positioning, but lay out children.

2. Later on, during line layout in the *containing block*, the inline
   block now contributes a linebox fragment. When linebox fragments are
   positioned, we learn the final position of the inline block. That's
   when we set the inline block's position.

3. We re-layout the inline block's children once again. This is done to
   make sure they end up in the right position. The layout tree doesn't
   use relative offsets, so after we position the inline block in (2),
   its children will not have its positions updated. Relayout moves
   all children of inline blocks to the right place.

This is a rather naive approach but it does get the basic behavior into
place so we can iterate on it. :^)
2020-05-05 16:18:28 +02:00
AnotherTest
0a55679de4 LibWeb: Add canvas.quadraticCurveTo()
Also adds a test, and removes debug spam ™️
2020-05-05 09:21:07 +02:00
LepkoQQ
c7f0de14b5 LibGfx: Decode paletted and grayscale images with 1/2/4 bit depth
When dealing with png data that has less than 8 bits per pixel, round
up to the next byte when allocating per row buffers and streamers. This
fixes decoding odd sized PNGs with less than 8 bits per pixel.

Also added a test page with some odd sized palleted PNGs.
2020-05-02 01:28:18 +02:00
Andreas Kling
e3232eb25b LibWeb: Support loading data: URLs transparently via ResourceLoader
This is pretty darn cool! :^)
2020-04-26 22:57:00 +02:00
LepkoQQ
b094c064d8 Base: Add test page for decoding different basic png formats. 2020-04-26 20:29:17 +02:00
Emanuele Torre
a804615b9b Base: Close head tag in canvas-path.html and give the document a title 2020-04-23 09:42:43 +02:00
Andreas Kling
0d93e249c3 LibWeb: Add some basic path drawing functionality to the canvas element
This patch adds the following methods to CanvasRenderingContext2D:

- beginPath()
- moveTo(x, y)
- lineTo(x, y)
- closePath()
- stroke()

We also add the lineWidth property. :^)
2020-04-16 21:06:03 +02:00
Andreas Kling
aab022b77b Base: Add a little test web page for canvas drawImage() :^) 2020-04-14 20:42:14 +02:00
Brian Gianforcaro
39855fe9ef LibWeb: Add canvas.strokeRect(), and fix scale & translate
Add an implementation of CanvasRenderingContext2DWrapper.strokeRect().
While implementing this I fixed fillRect() and the new strokeRect() to
honor the .scale() and .translate() values that had previously been plumbed.

Also enhance the canvas.html demo to utilize strokeRect(), scale(), and translate().
2020-04-08 11:07:50 +02:00
Linus Groh
bf62625001 Base: Add trigonometry demo webpage 2020-04-06 10:58:16 +02:00
Andreas Kling
56ca91b9f8 LibWeb: Implement <script src> support for synchronous scripts
Scripts loaded in this way will block the parser until they finish
executing. This means that they see the DOM before the whole document
has been fully parsed. This is all normal, of course.

To make this work, I changed the way we notify DOM nodes about tree
insertion. The inserted_into() callbacks are now incrementally invoked
during parse, as each node is appended to its parent.

To accomodate inline scripts and inline style sheets, we now also have
a children_changed() callback which is invoked on any parent when it
has children added/removed.
2020-04-03 23:06:09 +02:00
Andreas Kling
a2b0cc8f08 LibWeb: Add "navigator" object and expose navigator.userAgent
A lot of web content looks for this property. We'll probably have to
tweak this as we go, but at least now we have it. :^)
2020-04-03 18:12:20 +02:00
Andreas Kling
839beb52f3 Base: Tweak the canvas demo page to stop using fractional RGB values
This is a hack to workaround missing support for fractional values in
"rgb(r,g,b)" color parsing.
2020-03-31 19:10:08 +02:00
Andreas Kling
06aec9667e LibWeb: Support more advanced selectors in document.querySelectorAll()
I made some mistakes in the selector parsing code. It's now able to
parse selectors composed of multiple complex selectors, instead of just
one complex selector.
2020-03-30 11:35:39 +02:00
Andreas Kling
0f7bcd4111 LibWeb: Add naive support for document.querySelectorAll()
This currently returns a JS::Array of elements matching a selector.
The more correct behavior would be to return a static NodeList, but as
we don't have NodeLists right now, that'll be a task for the future.
2020-03-30 11:35:39 +02:00
Elisée Maurer
d01b97b50a
Base: Replace <!DOCTYPE> with <!DOCTYPE html> in a few files (#1511)
<!DOCTYPE> by itself is not a valid document type declaration.
2020-03-26 07:37:12 +01:00
Andreas Kling
68b04d5c78 LibWeb: Implement getting and setting element.innerHTML
Getting the innerHTML property will recurse through the subtree inside
the element and serialize it into a string as it goes.

Setting it will parse the set value as an HTML fragment. It will then
remove all current children of the element and replace them with all
the children inside the parsed fragment.

Setting element.innerHTML will currently force a complete rebuild of
the document's layout tree.

This is pretty neat! :^)
2020-03-25 18:53:20 +01:00
myphs
f42f300ba3 LibWeb: CSS: Add "position: absolute" with top and left
This momentarily handles the CSS property "position: absolute;" in
combination with the properties "top" and "left", so that elements can
be placed anywhere on the page independently from their parents.

Statically positioned elements ignore absolute positioned elements when
calculating their position as they don't take up space.
2020-03-23 20:17:29 +01:00
Andreas Kling
39045bfde8 LibWeb: Add basic support for requestAnimationFrame()
We now support rAF, driven by GUI::DisplayLink callbacks. It's a bit
strange how we keep registering new callbacks over and over.
That's something we can definitely optimize.

This allows you to update animations/whatever without doing it more
often than the browser can display.
2020-03-22 21:18:03 +01:00
Andreas Kling
065db26d7c Base: Add a demo web page for canvas+setInterval+randomness
Click somewhere in the black area and drag for colorful effect! :^)
2020-03-21 19:07:21 +01:00
Andreas Kling
a7d458f76a Base: Tidy up the events.html test page a little bit 2020-03-21 14:53:13 +01:00
myphs
0891f860f7 LibWeb: Add CSS property 'border'
This makes it possible to write shorter CSS. Instead of writing
.foo {
        border-width: 3px;
        border-style: solid;
        border-color: blue;
}
it is now possible to write
.foo {
        border: 3px solid blue;
}
while the order of values is irrelevant.
Currently only the basic values are supported. More values should be
added in the future.

Three more value specific parse functions were added:
parse_line_width, parse_color, and parse_line_style

Additionally a few test cases were added to borders.html.
2020-03-20 21:40:55 +01:00
Andreas Kling
a37c29e353 LibWeb: Add <canvas> element and start fleshing out CRC2D
This patch adds HTMLCanvasElement along with a LayoutCanvas object.
The DOM and layout parts are very similar to <img> elements.

The <canvas> element holds a Gfx::Bitmap which is sized according to
the "width" and "height" attributes on the element.

Calling .getContext("2d") on a <canvas> element gives you a context
object that draws into the underlying Gfx::Bitmap of the <canvas>.
The context weakly points to the <canvas> which allows it to outlive
the canvas element if needed.

This is really quite cool. :^)
2020-03-19 19:07:56 +01:00
Andreas Kling
73d28a0551 LibJS: Prefer FunctionDeclaration if a statement begins with "function" 2020-03-19 18:07:07 +01:00
Andreas Kling
e265058768 LibWeb: Fire "mousedown" and "mousemove" events in the DOM :^) 2020-03-18 17:13:22 +01:00
Andreas Kling
f39e5352f0 LibWeb: Start working on DOM event support
This patch adds the EventTarget class and makes Node inherit from it.

You can register event listeners on an EventTarget, and when you call
dispatch_event() on it, the event listeners will get invoked.

An event listener is basically a wrapper around a JS::Function*.

This is pretty far from how DOM events should eventually work, but it's
a place to start and we'll build more on top of this. :^)
2020-03-18 17:13:22 +01:00
Andreas Kling
b5a22fc408 LibWeb: Implement Document.getElementById()
This was pleasantly simple! We don't have an ElementWrapper yet, so it
just returns a NodeWrapper, but it still basically works. :^)
2020-03-14 13:25:40 +01:00
Andreas Kling
1c406294fc LibWeb: Start implementing basic JavaScript DOM bindings
This patch introduces the Wrapper and Wrappable classes.

Node now inherits from Wrappable, and can be wrapped in a GC-allocated
Bindings::NodeWrapper object. The only property we expose right now is
the very simple nodeName property.

When a Document's JS::Interpreter is first instantiated, we add a
"document" property with a DocumentWrapper object to the global object.

This is pretty cool! :^)
2020-03-14 13:25:40 +01:00
Andreas Kling
9c9d3f0904 LibWeb: Parse <script> elements and run any JavaScript found inside
This patch begins integrating LibJS into LibWeb. Document holds the
JS::Interpreter for now, and it is created on demand when you first
call Document::interpreter().

We also add a simple "alert()" function to the global object.
2020-03-14 13:25:38 +01:00
Andreas Kling
830a57c6b2 LibWeb: Rename directory LibHTML => LibWeb
Let's rename this to LibWeb since it aims to provide more parts of the
web platform than just HTML. :^)
2020-03-07 10:32:51 +01:00
Andreas Kling
91ba94fbd4 LibHTML: Support the :only-child pseudo class 2019-12-16 19:52:11 +01:00