Stowage/ladybird
2
0
Fork 0
mirror of https://github.com/LadybirdBrowser/ladybird.git synced 2025-10-31 13:20:59 +00:00
Code Issues Projects Releases Packages Wiki Activity
ladybird/Libraries/LibWeb/CSS/StyleResolver.cpp

479 lines
19 KiB
C++
Raw Normal View History

Meta: Add license header to source files As suggested by Joshua, this commit adds the 2-clause BSD license as a comment block to the top of every source file. For the first pass, I've just added myself for simplicity. I encourage everyone to add themselves as copyright holders of any file they've added or modified in some significant way. If I've added myself in error somewhere, feel free to replace it with the appropriate copyright holder instead. Going forward, all new source files should include a license header.
2020-01-18 09:38:21 +01:00
/*
* Copyright (c) 2018-2020, Andreas Kling <kling@serenityos.org>
* All rights reserved.
*
* Redistribution and use in source and binary forms, with or without
* modification, are permitted provided that the following conditions are met:
*
* 1. Redistributions of source code must retain the above copyright notice, this
* list of conditions and the following disclaimer.
*
* 2. Redistributions in binary form must reproduce the above copyright notice,
* this list of conditions and the following disclaimer in the documentation
* and/or other materials provided with the distribution.
*
* THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
* AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
* IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
* DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
* FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
* DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
* SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
* CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
* OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
* OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
*/
LibWeb: Apply style rules in order of specificity (kinda) We now sort the matched rules by the specificity of the first selector in them. This is not perfect, since a rule can have multiple selectors, but it is a nice chin-related progression on ACID2. :^)
2020-06-10 16:41:30 +02:00
#include <AK/QuickSort.h>
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
#include <LibWeb/CSS/SelectorEngine.h>
#include <LibWeb/CSS/StyleResolver.h>
#include <LibWeb/CSS/StyleSheet.h>
#include <LibWeb/DOM/Document.h>
#include <LibWeb/DOM/Element.h>
#include <LibWeb/Dump.h>
#include <LibWeb/Parser/CSSParser.h>
LibHTML: Implement the "margin" shorthand property This is a very bulky way of doing this, and doesn't seem sustainable to implement every shorthand property this way, but it's a place to start. The "margin" CSS property now expands into its four longhands as far as my understanding of the specs. Note that shorthand expansion happens when we *resolve* style, not when we parse CSS. I'm not sure this is correct anymore, I think other UA's may actually expand shorthands into the declaration directly at parse these days. If so, we should do this at parsing as well.
2019-11-18 11:49:19 +01:00
#include <ctype.h>
LibHTML: Implement some very simple selector matching. We walk the entire DOM and check all selectors against all elements. Only id, class and tag name are checked right now. There's no ancestor stack or compound selectors. All in good time :^)
2019-06-27 20:40:21 +02:00
#include <stdio.h>
LibHTML: Start fleshing out a StyleResolver class. This will be responsible for matching selectors and creating LayoutStyle objects for the document and its elements.
2019-06-27 17:47:59 +02:00
LibWeb: Move everything into the Web namespace
2020-03-07 10:27:02 +01:00
namespace Web {
LibHTML: Start fleshing out a StyleResolver class. This will be responsible for matching selectors and creating LayoutStyle objects for the document and its elements.
2019-06-27 17:47:59 +02:00
StyleResolver::StyleResolver(Document& document)
: m_document(document)
{
}
StyleResolver::~StyleResolver()
{
}
LibHTML: Make StyleResolver responsible for loading the default style Instead of HtmlView clients having to worry about parsing and loading the default CSS, just take care of it inside StyleResolver. The default style is automatically inserted into the stylesheet list, at the very start, so everyone else gets a chance to override it.
2019-10-05 09:01:12 +02:00
static StyleSheet& default_stylesheet()
{
static StyleSheet* sheet;
if (!sheet) {
extern const char default_stylesheet_source[];
String css = default_stylesheet_source;
LibHTML: Make the CSS parser return RefPtr's It should be possible for the CSS parser to fail, and we'll know it failed if it returns nullptr. Returning RefPtr's makes it actually possible to return nullptr. :^)
2019-11-07 17:58:54 +01:00
sheet = parse_css(css).leak_ref();
LibHTML: Make StyleResolver responsible for loading the default style Instead of HtmlView clients having to worry about parsing and loading the default CSS, just take care of it inside StyleResolver. The default style is automatically inserted into the stylesheet list, at the very start, so everyone else gets a chance to override it.
2019-10-05 09:01:12 +02:00
}
return *sheet;
}
template<typename Callback>
void StyleResolver::for_each_stylesheet(Callback callback) const
{
callback(default_stylesheet());
LibWeb: Process style sheets in document order Until now we would simply apply stylesheets in the order they finished loading. This patch adds a StyleSheetList object that hangs off of each Document and contains all the style sheets in document order. There's still a lot of work to do for a proper cascade, but at least this makes us consistently wrong every time. :^)
2020-06-04 16:06:32 +02:00
for (auto& sheet : document().style_sheets().sheets()) {
LibHTML: Make StyleResolver responsible for loading the default style Instead of HtmlView clients having to worry about parsing and loading the default CSS, just take care of it inside StyleResolver. The default style is automatically inserted into the stylesheet list, at the very start, so everyone else gets a chance to override it.
2019-10-05 09:01:12 +02:00
callback(sheet);
}
}
LibHTML: Implement some very simple selector matching. We walk the entire DOM and check all selectors against all elements. Only id, class and tag name are checked right now. There's no ancestor stack or compound selectors. All in good time :^)
2019-06-27 20:40:21 +02:00
NonnullRefPtrVector<StyleRule> StyleResolver::collect_matching_rules(const Element& element) const
{
NonnullRefPtrVector<StyleRule> matching_rules;
LibHTML: Make StyleResolver responsible for loading the default style Instead of HtmlView clients having to worry about parsing and loading the default CSS, just take care of it inside StyleResolver. The default style is automatically inserted into the stylesheet list, at the very start, so everyone else gets a chance to override it.
2019-10-05 09:01:12 +02:00
for_each_stylesheet([&](auto& sheet) {
LibHTML: Implement some very simple selector matching. We walk the entire DOM and check all selectors against all elements. Only id, class and tag name are checked right now. There's no ancestor stack or compound selectors. All in good time :^)
2019-06-27 20:40:21 +02:00
for (auto& rule : sheet.rules()) {
for (auto& selector : rule.selectors()) {
LibHTML: Move selector matching into a SelectorEngine namespace
2019-10-08 15:33:58 +02:00
if (SelectorEngine::matches(selector, element)) {
LibHTML: Implement some very simple selector matching. We walk the entire DOM and check all selectors against all elements. Only id, class and tag name are checked right now. There's no ancestor stack or compound selectors. All in good time :^)
2019-06-27 20:40:21 +02:00
matching_rules.append(rule);
break;
}
}
}
LibHTML: Make StyleResolver responsible for loading the default style Instead of HtmlView clients having to worry about parsing and loading the default CSS, just take care of it inside StyleResolver. The default style is automatically inserted into the stylesheet list, at the very start, so everyone else gets a chance to override it.
2019-10-05 09:01:12 +02:00
});
LibHTML: Hide debugging output unless HTML_DEBUG is defined
2019-09-25 12:42:10 +03:00
#ifdef HTML_DEBUG
LibHTML: Let's put debug output on the debugger stream
2019-10-03 10:25:00 +02:00
dbgprintf("Rules matching Element{%p}\n", &element);
LibHTML: Implement some very simple selector matching. We walk the entire DOM and check all selectors against all elements. Only id, class and tag name are checked right now. There's no ancestor stack or compound selectors. All in good time :^)
2019-06-27 20:40:21 +02:00
for (auto& rule : matching_rules) {
dump_rule(rule);
}
LibHTML: Hide debugging output unless HTML_DEBUG is defined
2019-09-25 12:42:10 +03:00
#endif
LibHTML: Implement some very simple selector matching. We walk the entire DOM and check all selectors against all elements. Only id, class and tag name are checked right now. There's no ancestor stack or compound selectors. All in good time :^)
2019-06-27 20:40:21 +02:00
return matching_rules;
}
LibHTML: Use an enum for CSS property ID's Instead of using string everywhere, have the CSS parser produce enum values, since they are a lot nicer to work with. In the future we should generate most of this code based on a list of supported CSS properties.
2019-10-08 15:34:19 +02:00
bool StyleResolver::is_inherited_property(CSS::PropertyID property_id)
LibHTML: Make CSS inheritance slightly less hacky Add a simple is_inherited_property(name) lookup function and use that to implement CSS property inheritance. It's a bug that "text-decoration" is inherited, but we currently rely on this in order to propagate e.g underline into linkified line boxes.
2019-10-04 22:52:49 +02:00
{
LibHTML: Use an enum for CSS property ID's Instead of using string everywhere, have the CSS parser produce enum values, since they are a lot nicer to work with. In the future we should generate most of this code based on a list of supported CSS properties.
2019-10-08 15:34:19 +02:00
static HashTable<CSS::PropertyID> inherited_properties;
LibHTML: Make CSS inheritance slightly less hacky Add a simple is_inherited_property(name) lookup function and use that to implement CSS property inheritance. It's a bug that "text-decoration" is inherited, but we currently rely on this in order to propagate e.g underline into linkified line boxes.
2019-10-04 22:52:49 +02:00
if (inherited_properties.is_empty()) {
LibHTML: Use an enum for CSS property ID's Instead of using string everywhere, have the CSS parser produce enum values, since they are a lot nicer to work with. In the future we should generate most of this code based on a list of supported CSS properties.
2019-10-08 15:34:19 +02:00
inherited_properties.set(CSS::PropertyID::BorderCollapse);
inherited_properties.set(CSS::PropertyID::BorderSpacing);
inherited_properties.set(CSS::PropertyID::Color);
inherited_properties.set(CSS::PropertyID::FontFamily);
inherited_properties.set(CSS::PropertyID::FontSize);
inherited_properties.set(CSS::PropertyID::FontStyle);
inherited_properties.set(CSS::PropertyID::FontVariant);
inherited_properties.set(CSS::PropertyID::FontWeight);
inherited_properties.set(CSS::PropertyID::LetterSpacing);
inherited_properties.set(CSS::PropertyID::LineHeight);
inherited_properties.set(CSS::PropertyID::ListStyle);
inherited_properties.set(CSS::PropertyID::ListStyleImage);
inherited_properties.set(CSS::PropertyID::ListStylePosition);
inherited_properties.set(CSS::PropertyID::ListStyleType);
inherited_properties.set(CSS::PropertyID::TextAlign);
inherited_properties.set(CSS::PropertyID::TextIndent);
inherited_properties.set(CSS::PropertyID::TextTransform);
inherited_properties.set(CSS::PropertyID::Visibility);
inherited_properties.set(CSS::PropertyID::WhiteSpace);
inherited_properties.set(CSS::PropertyID::WordSpacing);
LibHTML: Make CSS inheritance slightly less hacky Add a simple is_inherited_property(name) lookup function and use that to implement CSS property inheritance. It's a bug that "text-decoration" is inherited, but we currently rely on this in order to propagate e.g underline into linkified line boxes.
2019-10-04 22:52:49 +02:00
// FIXME: This property is not supposed to be inherited, but we currently
// rely on inheritance to propagate decorations into line boxes.
LibHTML: Use an enum for CSS property ID's Instead of using string everywhere, have the CSS parser produce enum values, since they are a lot nicer to work with. In the future we should generate most of this code based on a list of supported CSS properties.
2019-10-08 15:34:19 +02:00
inherited_properties.set(CSS::PropertyID::TextDecoration);
LibHTML: Make CSS inheritance slightly less hacky Add a simple is_inherited_property(name) lookup function and use that to implement CSS property inheritance. It's a bug that "text-decoration" is inherited, but we currently rely on this in order to propagate e.g underline into linkified line boxes.
2019-10-04 22:52:49 +02:00
}
LibHTML: Use an enum for CSS property ID's Instead of using string everywhere, have the CSS parser produce enum values, since they are a lot nicer to work with. In the future we should generate most of this code based on a list of supported CSS properties.
2019-10-08 15:34:19 +02:00
return inherited_properties.contains(property_id);
LibHTML: Make CSS inheritance slightly less hacky Add a simple is_inherited_property(name) lookup function and use that to implement CSS property inheritance. It's a bug that "text-decoration" is inherited, but we currently rely on this in order to propagate e.g underline into linkified line boxes.
2019-10-04 22:52:49 +02:00
}
LibHTML: Implement the "margin" shorthand property This is a very bulky way of doing this, and doesn't seem sustainable to implement every shorthand property this way, but it's a place to start. The "margin" CSS property now expands into its four longhands as far as my understanding of the specs. Note that shorthand expansion happens when we *resolve* style, not when we parse CSS. I'm not sure this is correct anymore, I think other UA's may actually expand shorthands into the declaration directly at parse these days. If so, we should do this at parsing as well.
2019-11-18 11:49:19 +01:00
static Vector<String> split_on_whitespace(const StringView& string)
{
if (string.is_empty())
return {};
Vector<String> v;
AK: Use size_t for the length of strings Using int was a mistake. This patch changes String, StringImpl, StringView and StringBuilder to use size_t instead of int for lengths. Obviously a lot of code needs to change as a result of this.
2019-12-09 17:45:40 +01:00
size_t substart = 0;
for (size_t i = 0; i < string.length(); ++i) {
LibHTML: Implement the "margin" shorthand property This is a very bulky way of doing this, and doesn't seem sustainable to implement every shorthand property this way, but it's a place to start. The "margin" CSS property now expands into its four longhands as far as my understanding of the specs. Note that shorthand expansion happens when we *resolve* style, not when we parse CSS. I'm not sure this is correct anymore, I think other UA's may actually expand shorthands into the declaration directly at parse these days. If so, we should do this at parsing as well.
2019-11-18 11:49:19 +01:00
char ch = string.characters_without_null_termination()[i];
if (isspace(ch)) {
AK: Use size_t for the length of strings Using int was a mistake. This patch changes String, StringImpl, StringView and StringBuilder to use size_t instead of int for lengths. Obviously a lot of code needs to change as a result of this.
2019-12-09 17:45:40 +01:00
size_t sublen = i - substart;
LibHTML: Implement the "margin" shorthand property This is a very bulky way of doing this, and doesn't seem sustainable to implement every shorthand property this way, but it's a place to start. The "margin" CSS property now expands into its four longhands as far as my understanding of the specs. Note that shorthand expansion happens when we *resolve* style, not when we parse CSS. I'm not sure this is correct anymore, I think other UA's may actually expand shorthands into the declaration directly at parse these days. If so, we should do this at parsing as well.
2019-11-18 11:49:19 +01:00
if (sublen != 0)
v.append(string.substring_view(substart, sublen));
substart = i + 1;
}
}
AK: Use size_t for the length of strings Using int was a mistake. This patch changes String, StringImpl, StringView and StringBuilder to use size_t instead of int for lengths. Obviously a lot of code needs to change as a result of this.
2019-12-09 17:45:40 +01:00
size_t taillen = string.length() - substart;
LibHTML: Implement the "margin" shorthand property This is a very bulky way of doing this, and doesn't seem sustainable to implement every shorthand property this way, but it's a place to start. The "margin" CSS property now expands into its four longhands as far as my understanding of the specs. Note that shorthand expansion happens when we *resolve* style, not when we parse CSS. I'm not sure this is correct anymore, I think other UA's may actually expand shorthands into the declaration directly at parse these days. If so, we should do this at parsing as well.
2019-11-18 11:49:19 +01:00
if (taillen != 0)
v.append(string.substring_view(substart, taillen));
return v;
}
LibWeb: Expand border-{top,right,bottom-left} CSS shorthand properties This code is pretty rough, but it's something that will also improve with the eventual new CSS parser.
2020-06-10 16:14:31 +02:00
enum class Edge {
Top,
Right,
Bottom,
Left,
All,
};
static bool contains(Edge a, Edge b)
{
return a == b || b == Edge::All;
}
static inline void set_property_border_width(StyleProperties& style, const StyleValue& value, Edge edge)
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 20:29:39 +01:00
{
ASSERT(value.is_length());
LibWeb: Expand border-{top,right,bottom-left} CSS shorthand properties This code is pretty rough, but it's something that will also improve with the eventual new CSS parser.
2020-06-10 16:14:31 +02:00
if (contains(Edge::Top, edge))
style.set_property(CSS::PropertyID::BorderTopWidth, value);
if (contains(Edge::Right, edge))
style.set_property(CSS::PropertyID::BorderRightWidth, value);
if (contains(Edge::Bottom, edge))
style.set_property(CSS::PropertyID::BorderBottomWidth, value);
if (contains(Edge::Left, edge))
style.set_property(CSS::PropertyID::BorderLeftWidth, value);
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 20:29:39 +01:00
}
LibWeb: Expand border-{top,right,bottom-left} CSS shorthand properties This code is pretty rough, but it's something that will also improve with the eventual new CSS parser.
2020-06-10 16:14:31 +02:00
static inline void set_property_border_color(StyleProperties& style, const StyleValue& value, Edge edge)
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 20:29:39 +01:00
{
ASSERT(value.is_color());
LibWeb: Expand border-{top,right,bottom-left} CSS shorthand properties This code is pretty rough, but it's something that will also improve with the eventual new CSS parser.
2020-06-10 16:14:31 +02:00
if (contains(Edge::Top, edge))
style.set_property(CSS::PropertyID::BorderTopColor, value);
if (contains(Edge::Right, edge))
style.set_property(CSS::PropertyID::BorderRightColor, value);
if (contains(Edge::Bottom, edge))
style.set_property(CSS::PropertyID::BorderBottomColor, value);
if (contains(Edge::Left, edge))
style.set_property(CSS::PropertyID::BorderLeftColor, value);
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 20:29:39 +01:00
}
LibWeb: Expand border-{top,right,bottom-left} CSS shorthand properties This code is pretty rough, but it's something that will also improve with the eventual new CSS parser.
2020-06-10 16:14:31 +02:00
static inline void set_property_border_style(StyleProperties& style, const StyleValue& value, Edge edge)
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 20:29:39 +01:00
{
ASSERT(value.is_string());
LibWeb: Expand border-{top,right,bottom-left} CSS shorthand properties This code is pretty rough, but it's something that will also improve with the eventual new CSS parser.
2020-06-10 16:14:31 +02:00
if (contains(Edge::Top, edge))
style.set_property(CSS::PropertyID::BorderTopStyle, value);
if (contains(Edge::Right, edge))
style.set_property(CSS::PropertyID::BorderRightStyle, value);
if (contains(Edge::Bottom, edge))
style.set_property(CSS::PropertyID::BorderBottomStyle, value);
if (contains(Edge::Left, edge))
style.set_property(CSS::PropertyID::BorderLeftStyle, value);
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 20:29:39 +01:00
}
LibHTML: Implement the "margin" shorthand property This is a very bulky way of doing this, and doesn't seem sustainable to implement every shorthand property this way, but it's a place to start. The "margin" CSS property now expands into its four longhands as far as my understanding of the specs. Note that shorthand expansion happens when we *resolve* style, not when we parse CSS. I'm not sure this is correct anymore, I think other UA's may actually expand shorthands into the declaration directly at parse these days. If so, we should do this at parsing as well.
2019-11-18 11:49:19 +01:00
static void set_property_expanding_shorthands(StyleProperties& style, CSS::PropertyID property_id, const StyleValue& value)
{
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 20:29:39 +01:00
if (property_id == CSS::PropertyID::Border) {
LibWeb: Expand border-{top,right,bottom-left} CSS shorthand properties This code is pretty rough, but it's something that will also improve with the eventual new CSS parser.
2020-06-10 16:14:31 +02:00
set_property_expanding_shorthands(style, CSS::PropertyID::BorderTop, value);
set_property_expanding_shorthands(style, CSS::PropertyID::BorderRight, value);
set_property_expanding_shorthands(style, CSS::PropertyID::BorderBottom, value);
set_property_expanding_shorthands(style, CSS::PropertyID::BorderLeft, value);
}
if (property_id == CSS::PropertyID::BorderTop
|| property_id == CSS::PropertyID::BorderRight
|| property_id == CSS::PropertyID::BorderBottom
|| property_id == CSS::PropertyID::BorderLeft) {
Edge edge = Edge::All;
switch (property_id) {
case CSS::PropertyID::BorderTop:
edge = Edge::Top;
break;
case CSS::PropertyID::BorderRight:
edge = Edge::Right;
break;
case CSS::PropertyID::BorderBottom:
edge = Edge::Bottom;
break;
case CSS::PropertyID::BorderLeft:
edge = Edge::Left;
break;
default:
break;
}
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 20:29:39 +01:00
auto parts = split_on_whitespace(value.to_string());
if (value.is_length()) {
LibWeb: Expand border-{top,right,bottom-left} CSS shorthand properties This code is pretty rough, but it's something that will also improve with the eventual new CSS parser.
2020-06-10 16:14:31 +02:00
set_property_border_width(style, value, edge);
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 20:29:39 +01:00
return;
}
if (value.is_color()) {
LibWeb: Expand border-{top,right,bottom-left} CSS shorthand properties This code is pretty rough, but it's something that will also improve with the eventual new CSS parser.
2020-06-10 16:14:31 +02:00
set_property_border_color(style, value, edge);
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 20:29:39 +01:00
return;
}
if (value.is_string()) {
auto parts = split_on_whitespace(value.to_string());
if (parts.size() == 1) {
if (auto value = parse_line_style(parts[0])) {
LibWeb: Expand border-{top,right,bottom-left} CSS shorthand properties This code is pretty rough, but it's something that will also improve with the eventual new CSS parser.
2020-06-10 16:14:31 +02:00
set_property_border_style(style, value.release_nonnull(), edge);
set_property_border_color(style, ColorStyleValue::create(Gfx::Color::Black), edge);
set_property_border_width(style, LengthStyleValue::create(Length(3, Length::Type::Px)), edge);
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 20:29:39 +01:00
return;
}
}
RefPtr<LengthStyleValue> line_width_value;
RefPtr<ColorStyleValue> color_value;
RefPtr<StringStyleValue> line_style_value;
for (auto& part : parts) {
if (auto value = parse_line_width(part)) {
if (line_width_value)
return;
line_width_value = move(value);
continue;
}
if (auto value = parse_color(part)) {
if (color_value)
return;
color_value = move(value);
continue;
}
if (auto value = parse_line_style(part)) {
if (line_style_value)
return;
line_style_value = move(value);
continue;
}
}
if (line_width_value)
LibWeb: Expand border-{top,right,bottom-left} CSS shorthand properties This code is pretty rough, but it's something that will also improve with the eventual new CSS parser.
2020-06-10 16:14:31 +02:00
set_property_border_width(style, line_width_value.release_nonnull(), edge);
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 20:29:39 +01:00
if (color_value)
LibWeb: Expand border-{top,right,bottom-left} CSS shorthand properties This code is pretty rough, but it's something that will also improve with the eventual new CSS parser.
2020-06-10 16:14:31 +02:00
set_property_border_color(style, color_value.release_nonnull(), edge);
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 20:29:39 +01:00
if (line_style_value)
LibWeb: Expand border-{top,right,bottom-left} CSS shorthand properties This code is pretty rough, but it's something that will also improve with the eventual new CSS parser.
2020-06-10 16:14:31 +02:00
set_property_border_style(style, line_style_value.release_nonnull(), edge);
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 20:29:39 +01:00
return;
}
return;
}
LibHTML: Add shorthand expansion for border-{style,width,color} This is going to be quite boring to do by hand for every single CSS property. We'll probably want to come up with a way to auto-generate some/most of the shorthand expansion code.
2019-11-27 20:51:15 +01:00
if (property_id == CSS::PropertyID::BorderStyle) {
style.set_property(CSS::PropertyID::BorderTopStyle, value);
style.set_property(CSS::PropertyID::BorderRightStyle, value);
style.set_property(CSS::PropertyID::BorderBottomStyle, value);
style.set_property(CSS::PropertyID::BorderLeftStyle, value);
return;
}
if (property_id == CSS::PropertyID::BorderWidth) {
LibWeb: Expand 2-part border-width shorthand CSS properties
2020-06-10 16:42:58 +02:00
auto parts = split_on_whitespace(value.to_string());
if (parts.size() == 2) {
auto vertical_border_width = parse_css_value(parts[0]);
auto horizonal_border_width = parse_css_value(parts[1]);
style.set_property(CSS::PropertyID::BorderTopWidth, vertical_border_width);
style.set_property(CSS::PropertyID::BorderRightWidth, horizonal_border_width);
style.set_property(CSS::PropertyID::BorderBottomWidth, vertical_border_width);
style.set_property(CSS::PropertyID::BorderLeftWidth, horizonal_border_width);
} else {
style.set_property(CSS::PropertyID::BorderTopWidth, value);
style.set_property(CSS::PropertyID::BorderRightWidth, value);
style.set_property(CSS::PropertyID::BorderBottomWidth, value);
style.set_property(CSS::PropertyID::BorderLeftWidth, value);
}
LibHTML: Add shorthand expansion for border-{style,width,color} This is going to be quite boring to do by hand for every single CSS property. We'll probably want to come up with a way to auto-generate some/most of the shorthand expansion code.
2019-11-27 20:51:15 +01:00
return;
}
if (property_id == CSS::PropertyID::BorderColor) {
style.set_property(CSS::PropertyID::BorderTopColor, value);
style.set_property(CSS::PropertyID::BorderRightColor, value);
style.set_property(CSS::PropertyID::BorderBottomColor, value);
style.set_property(CSS::PropertyID::BorderLeftColor, value);
return;
}
LibWeb: Naive support for CSS "background" shorthand Many sites simply use "background" as an alias for "background-color" so let's at least support that.
2020-05-30 11:58:05 +02:00
if (property_id == CSS::PropertyID::Background) {
auto parts = split_on_whitespace(value.to_string());
NonnullRefPtrVector<StyleValue> values;
for (auto& part : parts) {
values.append(parse_css_value(part));
}
if (values[0].is_color())
style.set_property(CSS::PropertyID::BackgroundColor, values[0]);
return;
}
LibHTML: Implement the "margin" shorthand property This is a very bulky way of doing this, and doesn't seem sustainable to implement every shorthand property this way, but it's a place to start. The "margin" CSS property now expands into its four longhands as far as my understanding of the specs. Note that shorthand expansion happens when we *resolve* style, not when we parse CSS. I'm not sure this is correct anymore, I think other UA's may actually expand shorthands into the declaration directly at parse these days. If so, we should do this at parsing as well.
2019-11-18 11:49:19 +01:00
if (property_id == CSS::PropertyID::Margin) {
if (value.is_length()) {
style.set_property(CSS::PropertyID::MarginTop, value);
style.set_property(CSS::PropertyID::MarginRight, value);
style.set_property(CSS::PropertyID::MarginBottom, value);
style.set_property(CSS::PropertyID::MarginLeft, value);
return;
}
if (value.is_string()) {
auto parts = split_on_whitespace(value.to_string());
if (parts.size() == 2) {
auto vertical = parse_css_value(parts[0]);
auto horizontal = parse_css_value(parts[1]);
style.set_property(CSS::PropertyID::MarginTop, vertical);
style.set_property(CSS::PropertyID::MarginBottom, vertical);
style.set_property(CSS::PropertyID::MarginLeft, horizontal);
style.set_property(CSS::PropertyID::MarginRight, horizontal);
return;
}
if (parts.size() == 3) {
auto top = parse_css_value(parts[0]);
auto horizontal = parse_css_value(parts[1]);
auto bottom = parse_css_value(parts[2]);
style.set_property(CSS::PropertyID::MarginTop, top);
style.set_property(CSS::PropertyID::MarginBottom, bottom);
style.set_property(CSS::PropertyID::MarginLeft, horizontal);
style.set_property(CSS::PropertyID::MarginRight, horizontal);
return;
}
if (parts.size() == 4) {
auto top = parse_css_value(parts[0]);
auto right = parse_css_value(parts[1]);
auto bottom = parse_css_value(parts[2]);
auto left = parse_css_value(parts[3]);
style.set_property(CSS::PropertyID::MarginTop, top);
style.set_property(CSS::PropertyID::MarginBottom, bottom);
style.set_property(CSS::PropertyID::MarginLeft, left);
style.set_property(CSS::PropertyID::MarginRight, right);
return;
}
dbg() << "Unsure what to do with CSS margin value '" << value.to_string() << "'";
return;
}
return;
}
LibHTML: Expand the "padding" shorthand property This expands in the same way as "margin".
2019-11-18 12:25:22 +01:00
if (property_id == CSS::PropertyID::Padding) {
if (value.is_length()) {
style.set_property(CSS::PropertyID::PaddingTop, value);
style.set_property(CSS::PropertyID::PaddingRight, value);
style.set_property(CSS::PropertyID::PaddingBottom, value);
style.set_property(CSS::PropertyID::PaddingLeft, value);
return;
}
if (value.is_string()) {
auto parts = split_on_whitespace(value.to_string());
if (parts.size() == 2) {
auto vertical = parse_css_value(parts[0]);
auto horizontal = parse_css_value(parts[1]);
style.set_property(CSS::PropertyID::PaddingTop, vertical);
style.set_property(CSS::PropertyID::PaddingBottom, vertical);
style.set_property(CSS::PropertyID::PaddingLeft, horizontal);
style.set_property(CSS::PropertyID::PaddingRight, horizontal);
return;
}
if (parts.size() == 3) {
auto top = parse_css_value(parts[0]);
auto horizontal = parse_css_value(parts[1]);
auto bottom = parse_css_value(parts[2]);
style.set_property(CSS::PropertyID::PaddingTop, top);
style.set_property(CSS::PropertyID::PaddingBottom, bottom);
style.set_property(CSS::PropertyID::PaddingLeft, horizontal);
style.set_property(CSS::PropertyID::PaddingRight, horizontal);
return;
}
if (parts.size() == 4) {
auto top = parse_css_value(parts[0]);
auto right = parse_css_value(parts[1]);
auto bottom = parse_css_value(parts[2]);
auto left = parse_css_value(parts[3]);
style.set_property(CSS::PropertyID::PaddingTop, top);
style.set_property(CSS::PropertyID::PaddingBottom, bottom);
style.set_property(CSS::PropertyID::PaddingLeft, left);
style.set_property(CSS::PropertyID::PaddingRight, right);
return;
}
dbg() << "Unsure what to do with CSS padding value '" << value.to_string() << "'";
return;
}
return;
}
LibWeb: Don't render list item markers for "list-style-type: none"
2020-05-30 12:04:15 +02:00
if (property_id == CSS::PropertyID::ListStyle) {
auto parts = split_on_whitespace(value.to_string());
if (!parts.is_empty()) {
auto value = parse_css_value(parts[0]);
style.set_property(CSS::PropertyID::ListStyleType, value);
}
return;
}
LibHTML: Implement the "margin" shorthand property This is a very bulky way of doing this, and doesn't seem sustainable to implement every shorthand property this way, but it's a place to start. The "margin" CSS property now expands into its four longhands as far as my understanding of the specs. Note that shorthand expansion happens when we *resolve* style, not when we parse CSS. I'm not sure this is correct anymore, I think other UA's may actually expand shorthands into the declaration directly at parse these days. If so, we should do this at parsing as well.
2019-11-18 11:49:19 +01:00
style.set_property(property_id, value);
}
LibHTML: Rename "style_properties" to "style" everywhere
2019-10-07 09:23:53 +02:00
NonnullRefPtr<StyleProperties> StyleResolver::resolve_style(const Element& element, const StyleProperties* parent_style) const
LibHTML: Start fleshing out a StyleResolver class. This will be responsible for matching selectors and creating LayoutStyle objects for the document and its elements.
2019-06-27 17:47:59 +02:00
{
LibHTML: Rename "style_properties" to "style" everywhere
2019-10-07 09:23:53 +02:00
auto style = StyleProperties::create();
LibHTML: Implement basic style inheritance
2019-09-25 12:33:28 +03:00
LibHTML: Rename "style_properties" to "style" everywhere
2019-10-07 09:23:53 +02:00
if (parent_style) {
LibHTML: Use an enum for CSS property ID's Instead of using string everywhere, have the CSS parser produce enum values, since they are a lot nicer to work with. In the future we should generate most of this code based on a list of supported CSS properties.
2019-10-08 15:34:19 +02:00
parent_style->for_each_property([&](auto property_id, auto& value) {
if (is_inherited_property(property_id))
LibHTML: Implement the "margin" shorthand property This is a very bulky way of doing this, and doesn't seem sustainable to implement every shorthand property this way, but it's a place to start. The "margin" CSS property now expands into its four longhands as far as my understanding of the specs. Note that shorthand expansion happens when we *resolve* style, not when we parse CSS. I'm not sure this is correct anymore, I think other UA's may actually expand shorthands into the declaration directly at parse these days. If so, we should do this at parsing as well.
2019-11-18 11:49:19 +01:00
set_property_expanding_shorthands(style, property_id, value);
LibHTML: Implement basic style inheritance
2019-09-25 12:33:28 +03:00
});
}
LibHTML: Rename "style_properties" to "style" everywhere
2019-10-07 09:23:53 +02:00
element.apply_presentational_hints(*style);
LibHTML: Add support for <body bgcolor="#rrggbb" text="#rrggbb"> This patch implements basic support for presentational hints, which are old-school HTML attributes that affect style. You add support for a presentational hint attribute by overriding Element::apply_presentational_hints(StyleProperties&) and setting all of the corresponding CSS properties as appropriate. To make the background color fill the entire document, not just the bounds of the <body> element's LayoutNode, we special-case it in the HtmlView::paint_event() code for now. I'm not entirely sure what the nicest solution would be, but I'm sure we'll discover it eventually.
2019-10-04 21:05:52 +02:00
LibHTML: Implement some very simple selector matching. We walk the entire DOM and check all selectors against all elements. Only id, class and tag name are checked right now. There's no ancestor stack or compound selectors. All in good time :^)
2019-06-27 20:40:21 +02:00
auto matching_rules = collect_matching_rules(element);
LibWeb: Apply style rules in order of specificity (kinda) We now sort the matched rules by the specificity of the first selector in them. This is not perfect, since a rule can have multiple selectors, but it is a nice chin-related progression on ACID2. :^)
2020-06-10 16:41:30 +02:00
// FIXME: We need to look at the specificity of the matching *selector*, not just the matched *rule*!
// FIXME: It's really awkward that NonnullRefPtrVector cannot be quick_sort()'ed
quick_sort(reinterpret_cast<Vector<NonnullRefPtr<StyleRule>>&>(matching_rules), [&](auto& a, auto& b) {
return a->selectors().first().specificity() < b->selectors().first().specificity();
});
LibHTML: Start building the style tree. Walk the DOM and construct a parallel style tree that points back to the DOM and has the relevant CSS property values hanging off of them. The values are picked based on naive selector matching. There's no cascade or specificity taken into account yet.
2019-06-28 21:17:34 +02:00
for (auto& rule : matching_rules) {
LibHTML: Fix incorrect CSS object model A StyleRule has a StyleDeclaration which has many StyleProperty. :^)
2019-09-30 20:06:17 +02:00
for (auto& property : rule.declaration().properties()) {
LibHTML: Implement the "margin" shorthand property This is a very bulky way of doing this, and doesn't seem sustainable to implement every shorthand property this way, but it's a place to start. The "margin" CSS property now expands into its four longhands as far as my understanding of the specs. Note that shorthand expansion happens when we *resolve* style, not when we parse CSS. I'm not sure this is correct anymore, I think other UA's may actually expand shorthands into the declaration directly at parse these days. If so, we should do this at parsing as well.
2019-11-18 11:49:19 +01:00
set_property_expanding_shorthands(style, property.property_id, property.value);
LibHTML: Start building the style tree. Walk the DOM and construct a parallel style tree that points back to the DOM and has the relevant CSS property values hanging off of them. The values are picked based on naive selector matching. There's no cascade or specificity taken into account yet.
2019-06-28 21:17:34 +02:00
}
}
LibHTML: Implement basic support for inline style attributes You can now style elements with inline styles: <div style="color: #ff0000">This is red!</div> Pretty neat :^)
2019-09-30 20:25:33 +02:00
LibWeb: Use the globals from HTML::AttributeNames in style resolution Using these avoids the FlyString lookups, so we should basically always prefer them over string literal attribute names.
2020-05-30 13:06:26 +02:00
auto style_attribute = element.attribute(HTML::AttributeNames::style);
LibHTML: Implement basic support for inline style attributes You can now style elements with inline styles: <div style="color: #ff0000">This is red!</div> Pretty neat :^)
2019-09-30 20:25:33 +02:00
if (!style_attribute.is_null()) {
if (auto declaration = parse_css_declaration(style_attribute)) {
for (auto& property : declaration->properties()) {
LibHTML: Implement the "margin" shorthand property This is a very bulky way of doing this, and doesn't seem sustainable to implement every shorthand property this way, but it's a place to start. The "margin" CSS property now expands into its four longhands as far as my understanding of the specs. Note that shorthand expansion happens when we *resolve* style, not when we parse CSS. I'm not sure this is correct anymore, I think other UA's may actually expand shorthands into the declaration directly at parse these days. If so, we should do this at parsing as well.
2019-11-18 11:49:19 +01:00
set_property_expanding_shorthands(style, property.property_id, property.value);
LibHTML: Implement basic support for inline style attributes You can now style elements with inline styles: <div style="color: #ff0000">This is red!</div> Pretty neat :^)
2019-09-30 20:25:33 +02:00
}
}
}
LibHTML: Rename "style_properties" to "style" everywhere
2019-10-07 09:23:53 +02:00
return style;
LibHTML: Start fleshing out a StyleResolver class. This will be responsible for matching selectors and creating LayoutStyle objects for the document and its elements.
2019-06-27 17:47:59 +02:00
}
LibWeb: Move everything into the Web namespace
2020-03-07 10:27:02 +01:00
}
Reference in a new issue Copy permalink