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

LibWeb: Add ComputedCSSSstyleDeclaration and support 2 properties :^)

Browse source 
getComputedStyle(element) now returns a ComputedCSSStyleDeclaration
object, which is a live view of the computed style of a given element.

This works by ComputedCSSStyleDeclaration being a wrapper around an
element pointer. When you ask it for a CSS property, it gets the latest
computed style values from the element and returns them as a
CSS::StyleProperty object.

This first cut adds support for computed 'color' and 'display'.

In case the element doesn't have a corresponding node in the layout
tree, we fall back to using specified style instead. This is achieved by
performing an on-the-fly style resolution for the individual element and
then grabbing the requested property from that resolved style.
This commit is contained in:
Andreas Kling 2021-09-12 20:05:29 +02:00
parent caa9e1f622
commit 8b27bc078c
4 changed files with 146 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

33
Userland/Libraries/LibWeb/CSS/ComputedCSSStyleDeclaration.h Normal file
View file

@ -0,0 +1,33 @@
/*
* Copyright (c) 2021, Andreas Kling <kling@serenityos.org>
*
* SPDX-License-Identifier: BSD-2-Clause
*/
#pragma once
#include <LibWeb/CSS/CSSStyleDeclaration.h>
namespace Web::CSS {
class ComputedCSSStyleDeclaration final : public CSSStyleDeclaration {
public:
static NonnullRefPtr<ComputedCSSStyleDeclaration> create(DOM::Element& element)
{
return adopt_ref(*new ComputedCSSStyleDeclaration(element));
}
virtual ~ComputedCSSStyleDeclaration() override;
virtual size_t length() const override;
virtual String item(size_t index) const override;
virtual Optional<StyleProperty> property(PropertyID) const override;
virtual bool set_property(PropertyID, StringView css_text) override;
private:
explicit ComputedCSSStyleDeclaration(DOM::Element&);
NonnullRefPtr<DOM::Element> m_element;
};
}