mirror of
https://github.com/RGBCube/serenity
synced 2025-07-24 22:07:34 +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/CSSStyleRule.cpp
|
||||
CSS/CSSStyleSheet.cpp
|
||||
CSS/ComputedCSSStyleDeclaration.cpp
|
||||
CSS/DefaultStyleSheetSource.cpp
|
||||
CSS/Length.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 <LibJS/Runtime/FunctionObject.h>
|
||||
#include <LibWeb/CSS/ComputedCSSStyleDeclaration.h>
|
||||
#include <LibWeb/DOM/Document.h>
|
||||
#include <LibWeb/DOM/Event.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
|
||||
{
|
||||
dbgln("Generating CSS computed style for {} @ {:p}", element.node_name(), &element);
|
||||
Vector<CSS::StyleProperty> properties;
|
||||
HashMap<String, CSS::StyleProperty> custom_properties;
|
||||
return CSS::PropertyOwningCSSStyleDeclaration::create(move(properties), move(custom_properties));
|
||||
return CSS::ComputedCSSStyleDeclaration::create(element);
|
||||
}
|
||||
|
||||
NonnullRefPtr<CSS::MediaQueryList> Window::match_media(String media)
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue