mirror of
https://github.com/RGBCube/serenity
synced 2025-07-24 21:47:43 +00:00
LibWeb: Add ComputedCSSSstyleDeclaration and support 2 properties :^)
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:
parent
caa9e1f622
commit
8b27bc078c
4 changed files with 146 additions and 4 deletions
|
@ -17,6 +17,7 @@ set(SOURCES
|
||||||
CSS/CSSStyleDeclaration.cpp
|
CSS/CSSStyleDeclaration.cpp
|
||||||
CSS/CSSStyleRule.cpp
|
CSS/CSSStyleRule.cpp
|
||||||
CSS/CSSStyleSheet.cpp
|
CSS/CSSStyleSheet.cpp
|
||||||
|
CSS/ComputedCSSStyleDeclaration.cpp
|
||||||
CSS/DefaultStyleSheetSource.cpp
|
CSS/DefaultStyleSheetSource.cpp
|
||||||
CSS/Length.cpp
|
CSS/Length.cpp
|
||||||
CSS/MediaQueryList.cpp
|
CSS/MediaQueryList.cpp
|
||||||
|
|
110
Userland/Libraries/LibWeb/CSS/ComputedCSSStyleDeclaration.cpp
Normal file
110
Userland/Libraries/LibWeb/CSS/ComputedCSSStyleDeclaration.cpp
Normal file
|
@ -0,0 +1,110 @@
|
||||||
|
/*
|
||||||
|
* Copyright (c) 2021, Andreas Kling <kling@serenityos.org>
|
||||||
|
*
|
||||||
|
* SPDX-License-Identifier: BSD-2-Clause
|
||||||
|
*/
|
||||||
|
|
||||||
|
#include <LibWeb/CSS/ComputedCSSStyleDeclaration.h>
|
||||||
|
#include <LibWeb/CSS/StyleResolver.h>
|
||||||
|
#include <LibWeb/DOM/Document.h>
|
||||||
|
#include <LibWeb/DOM/Element.h>
|
||||||
|
|
||||||
|
namespace Web::CSS {
|
||||||
|
|
||||||
|
ComputedCSSStyleDeclaration::ComputedCSSStyleDeclaration(DOM::Element& element)
|
||||||
|
: m_element(element)
|
||||||
|
{
|
||||||
|
}
|
||||||
|
|
||||||
|
ComputedCSSStyleDeclaration::~ComputedCSSStyleDeclaration()
|
||||||
|
{
|
||||||
|
}
|
||||||
|
|
||||||
|
size_t ComputedCSSStyleDeclaration::length() const
|
||||||
|
{
|
||||||
|
return 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
String ComputedCSSStyleDeclaration::item(size_t index) const
|
||||||
|
{
|
||||||
|
(void)index;
|
||||||
|
return {};
|
||||||
|
}
|
||||||
|
|
||||||
|
static CSS::ValueID to_css_value_id(CSS::Display value)
|
||||||
|
{
|
||||||
|
switch (value) {
|
||||||
|
case CSS::Display::None:
|
||||||
|
return CSS::ValueID::None;
|
||||||
|
case CSS::Display::Block:
|
||||||
|
return CSS::ValueID::Block;
|
||||||
|
case CSS::Display::Inline:
|
||||||
|
return CSS::ValueID::Inline;
|
||||||
|
case CSS::Display::InlineBlock:
|
||||||
|
return CSS::ValueID::InlineBlock;
|
||||||
|
case CSS::Display::ListItem:
|
||||||
|
return CSS::ValueID::ListItem;
|
||||||
|
case CSS::Display::Table:
|
||||||
|
return CSS::ValueID::Table;
|
||||||
|
case CSS::Display::TableRow:
|
||||||
|
return CSS::ValueID::TableRow;
|
||||||
|
case CSS::Display::TableCell:
|
||||||
|
return CSS::ValueID::TableCell;
|
||||||
|
case CSS::Display::TableHeaderGroup:
|
||||||
|
return CSS::ValueID::TableHeaderGroup;
|
||||||
|
case CSS::Display::TableRowGroup:
|
||||||
|
return CSS::ValueID::TableRowGroup;
|
||||||
|
case CSS::Display::TableFooterGroup:
|
||||||
|
return CSS::ValueID::TableFooterGroup;
|
||||||
|
case CSS::Display::TableColumn:
|
||||||
|
return CSS::ValueID::TableColumn;
|
||||||
|
case CSS::Display::TableColumnGroup:
|
||||||
|
return CSS::ValueID::TableColumnGroup;
|
||||||
|
case CSS::Display::TableCaption:
|
||||||
|
return CSS::ValueID::TableCaption;
|
||||||
|
case CSS::Display::Flex:
|
||||||
|
return CSS::ValueID::Flex;
|
||||||
|
}
|
||||||
|
VERIFY_NOT_REACHED();
|
||||||
|
}
|
||||||
|
|
||||||
|
Optional<StyleProperty> ComputedCSSStyleDeclaration::property(PropertyID property_id) const
|
||||||
|
{
|
||||||
|
const_cast<DOM::Document&>(m_element->document()).force_layout();
|
||||||
|
|
||||||
|
if (!m_element->layout_node()) {
|
||||||
|
auto style = m_element->document().style_resolver().resolve_style(const_cast<DOM::Element&>(*m_element));
|
||||||
|
if (auto maybe_property = style->property(property_id); maybe_property.has_value()) {
|
||||||
|
return StyleProperty {
|
||||||
|
.property_id = property_id,
|
||||||
|
.value = maybe_property.release_value(),
|
||||||
|
};
|
||||||
|
}
|
||||||
|
return {};
|
||||||
|
}
|
||||||
|
|
||||||
|
auto& layout_node = *m_element->layout_node();
|
||||||
|
|
||||||
|
switch (property_id) {
|
||||||
|
case CSS::PropertyID::Color:
|
||||||
|
return StyleProperty {
|
||||||
|
.property_id = property_id,
|
||||||
|
.value = ColorStyleValue::create(layout_node.computed_values().color()),
|
||||||
|
};
|
||||||
|
case CSS::PropertyID::Display: {
|
||||||
|
return StyleProperty {
|
||||||
|
.property_id = property_id,
|
||||||
|
.value = IdentifierStyleValue::create(to_css_value_id(layout_node.computed_values().display())),
|
||||||
|
};
|
||||||
|
}
|
||||||
|
default:
|
||||||
|
return {};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
bool ComputedCSSStyleDeclaration::set_property(PropertyID, StringView)
|
||||||
|
{
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
33
Userland/Libraries/LibWeb/CSS/ComputedCSSStyleDeclaration.h
Normal file
33
Userland/Libraries/LibWeb/CSS/ComputedCSSStyleDeclaration.h
Normal 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;
|
||||||
|
};
|
||||||
|
|
||||||
|
}
|
|
@ -6,6 +6,7 @@
|
||||||
|
|
||||||
#include <LibGUI/DisplayLink.h>
|
#include <LibGUI/DisplayLink.h>
|
||||||
#include <LibJS/Runtime/FunctionObject.h>
|
#include <LibJS/Runtime/FunctionObject.h>
|
||||||
|
#include <LibWeb/CSS/ComputedCSSStyleDeclaration.h>
|
||||||
#include <LibWeb/DOM/Document.h>
|
#include <LibWeb/DOM/Document.h>
|
||||||
#include <LibWeb/DOM/Event.h>
|
#include <LibWeb/DOM/Event.h>
|
||||||
#include <LibWeb/DOM/EventDispatcher.h>
|
#include <LibWeb/DOM/EventDispatcher.h>
|
||||||
|
@ -189,10 +190,7 @@ Page const* Window::page() const
|
||||||
|
|
||||||
NonnullRefPtr<CSS::CSSStyleDeclaration> Window::get_computed_style(DOM::Element& element) const
|
NonnullRefPtr<CSS::CSSStyleDeclaration> Window::get_computed_style(DOM::Element& element) const
|
||||||
{
|
{
|
||||||
dbgln("Generating CSS computed style for {} @ {:p}", element.node_name(), &element);
|
return CSS::ComputedCSSStyleDeclaration::create(element);
|
||||||
Vector<CSS::StyleProperty> properties;
|
|
||||||
HashMap<String, CSS::StyleProperty> custom_properties;
|
|
||||||
return CSS::PropertyOwningCSSStyleDeclaration::create(move(properties), move(custom_properties));
|
|
||||||
}
|
}
|
||||||
|
|
||||||
NonnullRefPtr<CSS::MediaQueryList> Window::match_media(String media)
|
NonnullRefPtr<CSS::MediaQueryList> Window::match_media(String media)
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue