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

599 lines
24 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: Move the CSS parser into CSS/Parser/
2020-07-28 19:20:11 +02:00
#include <LibWeb/CSS/Parser/CSSParser.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>
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 CSS classes into the Web::CSS namespace
2020-07-26 20:01:35 +02:00
namespace Web::CSS {
LibWeb: Move everything into the Web namespace
2020-03-07 10:27:02 +01:00
LibWeb: Move DOM classes into the Web::DOM namespace LibWeb keeps growing and the Web namespace is filling up fast. Let's put DOM stuff into Web::DOM, just like we already started doing with SVG stuff in Web::SVG.
2020-07-26 19:37:56 +02:00
StyleResolver::StyleResolver(DOM::Document& document)
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
: 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;
LibWeb: Don't tolerate unit-less lengths (except 0) in standards mode "width: 500" is not a valid CSS property in standards mode and should be ignored. To plumb the quirks-mode flag into CSS parsing, this patch adds a new CSS::ParsingContext object that must be passed to the CSS parser. Currently it only allows you to check the quirks-mode flag. In the future it will be a good place to put additional information needed for things like relative URL resolution, etc. This narrows <div class=parser> on ACID2 to the correct width. :^)
2020-06-28 12:43:22 +02:00
sheet = parse_css(CSS::ParsingContext(), 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;
}
LibWeb: Add a separate UA style sheet for documents in quirks mode We need to make some additional tweaks to the default UA style when displaying documents in quirks mode.
2020-09-24 10:33:33 +02:00
static StyleSheet& quirks_mode_stylesheet()
{
static StyleSheet* sheet;
if (!sheet) {
extern const char quirks_mode_stylesheet_source[];
String css = quirks_mode_stylesheet_source;
sheet = parse_css(CSS::ParsingContext(), css).leak_ref();
}
return *sheet;
}
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
template<typename Callback>
void StyleResolver::for_each_stylesheet(Callback callback) const
{
callback(default_stylesheet());
LibWeb: Add a separate UA style sheet for documents in quirks mode We need to make some additional tweaks to the default UA style when displaying documents in quirks mode.
2020-09-24 10:33:33 +02:00
if (document().in_quirks_mode())
callback(quirks_mode_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);
}
}
LibWeb: Move DOM classes into the Web::DOM namespace LibWeb keeps growing and the Web namespace is filling up fast. Let's put DOM stuff into Web::DOM, just like we already started doing with SVG stuff in Web::SVG.
2020-07-26 19:37:56 +02:00
Vector<MatchingRule> StyleResolver::collect_matching_rules(const DOM::Element& element) const
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
{
LibWeb: Sort matched style rules by specificity, document order If two rules have equal specificity, they should be applied in the order in which we encountered them.
2020-06-13 00:44:26 +02:00
Vector<MatchingRule> 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
LibWeb: Sort matched style rules by specificity, document order If two rules have equal specificity, they should be applied in the order in which we encountered them.
2020-06-13 00:44:26 +02:00
size_t style_sheet_index = 0;
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) {
LibWeb: Sort matched style rules by specificity, document order If two rules have equal specificity, they should be applied in the order in which we encountered them.
2020-06-13 00:44:26 +02:00
size_t rule_index = 0;
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()) {
LibWeb: Sort matched style rules by specificity, document order If two rules have equal specificity, they should be applied in the order in which we encountered them.
2020-06-13 00:44:26 +02:00
size_t selector_index = 0;
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& selector : rule.selectors()) {
LibHTML: Move selector matching into a SelectorEngine namespace
2019-10-08 15:33:58 +02:00
if (SelectorEngine::matches(selector, element)) {
LibWeb: Sort matched style rules by specificity, document order If two rules have equal specificity, they should be applied in the order in which we encountered them.
2020-06-13 00:44:26 +02:00
matching_rules.append({ rule, style_sheet_index, rule_index, selector_index });
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
break;
}
LibWeb: Sort matched style rules by specificity, document order If two rules have equal specificity, they should be applied in the order in which we encountered them.
2020-06-13 00:44:26 +02:00
++selector_index;
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
}
LibWeb: Sort matched style rules by specificity, document order If two rules have equal specificity, they should be applied in the order in which we encountered them.
2020-06-13 00:44:26 +02:00
++rule_index;
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
}
LibWeb: Sort matched style rules by specificity, document order If two rules have equal specificity, they should be applied in the order in which we encountered them.
2020-06-13 00:44:26 +02:00
++style_sheet_index;
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
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;
}
LibWeb: Add a simple StyleInvalidator class This patch adds a simple, naive & inefficient class for document-wide style invalidation, e.g. after element attribute updates. During construction it collects a HashMap of a document's elements and their matching rules, during destruction it does the same and then compares the results; dirtying all elements that have a different number or order of matching rules afterwards. Much room for improvement, but it solves the problem of stale element styling after attribute updates for now :^) Fixes #4404.
2020-12-14 21:31:10 +00:00
void StyleResolver::sort_matching_rules(Vector<MatchingRule>& matching_rules) const
{
quick_sort(matching_rules, [&](MatchingRule& a, MatchingRule& b) {
auto& a_selector = a.rule->selectors()[a.selector_index];
auto& b_selector = b.rule->selectors()[b.selector_index];
auto a_specificity = a_selector.specificity();
auto b_specificity = b_selector.specificity();
if (a_selector.specificity() == b_selector.specificity()) {
if (a.style_sheet_index == b.style_sheet_index)
return a.rule_index < b.rule_index;
return a.style_sheet_index < b.style_sheet_index;
}
return a_specificity < b_specificity;
});
}
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.
LibWeb: Update text-decoration hack to use text-decoration-line We have a hack that propagates text-decoration-line through inheritance even though it's not an inherited property. Once we implement the CSS cascade properly we can stop doing this.
2020-12-15 20:48:16 +01:00
inherited_properties.set(CSS::PropertyID::TextDecorationLine);
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
}
LibWeb: Move DOM classes into the Web::DOM namespace LibWeb keeps growing and the Web namespace is filling up fast. Let's put DOM stuff into Web::DOM, just like we already started doing with SVG stuff in Web::SVG.
2020-07-26 19:37:56 +02:00
static void set_property_expanding_shorthands(StyleProperties& style, CSS::PropertyID property_id, const StyleValue& value, DOM::Document& document)
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
{
LibWeb: Don't tolerate unit-less lengths (except 0) in standards mode "width: 500" is not a valid CSS property in standards mode and should be ignored. To plumb the quirks-mode flag into CSS parsing, this patch adds a new CSS::ParsingContext object that must be passed to the CSS parser. Currently it only allows you to check the quirks-mode flag. In the future it will be a good place to put additional information needed for things like relative URL resolution, etc. This narrows <div class=parser> on ACID2 to the correct width. :^)
2020-06-28 12:43:22 +02:00
CSS::ParsingContext context(document);
LibWeb: Use IdentifierStyleValue for CSS 'text-decoration-line' Also 'text-decoration' is actually a shorthand, so treat it that way.
2020-12-15 13:36:27 +01:00
if (property_id == CSS::PropertyID::TextDecoration) {
switch (value.to_identifier()) {
case CSS::ValueID::None:
case CSS::ValueID::Underline:
case CSS::ValueID::Overline:
case CSS::ValueID::LineThrough:
case CSS::ValueID::Blink:
set_property_expanding_shorthands(style, CSS::PropertyID::TextDecorationLine, value, document);
default:
break;
}
return;
}
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 "background: url()" into "background-image: url()" This gives us a yellow forehead on ACID2! :^)
2020-06-10 17:47:04 +02:00
set_property_expanding_shorthands(style, CSS::PropertyID::BorderTop, value, document);
set_property_expanding_shorthands(style, CSS::PropertyID::BorderRight, value, document);
set_property_expanding_shorthands(style, CSS::PropertyID::BorderBottom, value, document);
set_property_expanding_shorthands(style, CSS::PropertyID::BorderLeft, value, document);
LibWeb: Don't leave "border" CSS property around after expansion The "border" property is a shorthand that expands into multiple longhand properties. We shouldn't leave it set in a StyleProperties after expanding it.
2020-12-19 19:30:49 +01:00
return;
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 (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) {
LibWeb: Don't tolerate unit-less lengths (except 0) in standards mode "width: 500" is not a valid CSS property in standards mode and should be ignored. To plumb the quirks-mode flag into CSS parsing, this patch adds a new CSS::ParsingContext object that must be passed to the CSS parser. Currently it only allows you to check the quirks-mode flag. In the future it will be a good place to put additional information needed for things like relative URL resolution, etc. This narrows <div class=parser> on ACID2 to the correct width. :^)
2020-06-28 12:43:22 +02:00
if (auto value = parse_line_style(context, 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) {
LibWeb: Don't tolerate unit-less lengths (except 0) in standards mode "width: 500" is not a valid CSS property in standards mode and should be ignored. To plumb the quirks-mode flag into CSS parsing, this patch adds a new CSS::ParsingContext object that must be passed to the CSS parser. Currently it only allows you to check the quirks-mode flag. In the future it will be a good place to put additional information needed for things like relative URL resolution, etc. This narrows <div class=parser> on ACID2 to the correct width. :^)
2020-06-28 12:43:22 +02:00
if (auto value = parse_line_width(context, part)) {
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_width_value)
return;
line_width_value = move(value);
continue;
}
LibWeb: Don't tolerate unit-less lengths (except 0) in standards mode "width: 500" is not a valid CSS property in standards mode and should be ignored. To plumb the quirks-mode flag into CSS parsing, this patch adds a new CSS::ParsingContext object that must be passed to the CSS parser. Currently it only allows you to check the quirks-mode flag. In the future it will be a good place to put additional information needed for things like relative URL resolution, etc. This narrows <div class=parser> on ACID2 to the correct width. :^)
2020-06-28 12:43:22 +02:00
if (auto value = parse_color(context, part)) {
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)
return;
color_value = move(value);
continue;
}
LibWeb: Don't tolerate unit-less lengths (except 0) in standards mode "width: 500" is not a valid CSS property in standards mode and should be ignored. To plumb the quirks-mode flag into CSS parsing, this patch adds a new CSS::ParsingContext object that must be passed to the CSS parser. Currently it only allows you to check the quirks-mode flag. In the future it will be a good place to put additional information needed for things like relative URL resolution, etc. This narrows <div class=parser> on ACID2 to the correct width. :^)
2020-06-28 12:43:22 +02:00
if (auto value = parse_line_style(context, part)) {
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)
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) {
LibWeb: Don't try to expand shorthands from non-string CSS values If something is already e.g a length or a color value, we don't need to try to expand it by stringifying and looking at the parts.
2020-06-10 19:34:49 +02:00
auto parts = split_on_whitespace(value.to_string());
if (value.is_string() && parts.size() == 3) {
LibWeb: Don't tolerate unit-less lengths (except 0) in standards mode "width: 500" is not a valid CSS property in standards mode and should be ignored. To plumb the quirks-mode flag into CSS parsing, this patch adds a new CSS::ParsingContext object that must be passed to the CSS parser. Currently it only allows you to check the quirks-mode flag. In the future it will be a good place to put additional information needed for things like relative URL resolution, etc. This narrows <div class=parser> on ACID2 to the correct width. :^)
2020-06-28 12:43:22 +02:00
auto top = parse_css_value(context, parts[0]);
auto right = parse_css_value(context, parts[1]);
auto bottom = parse_css_value(context, parts[2]);
auto left = parse_css_value(context, parts[1]);
if (top && right && bottom && left) {
style.set_property(CSS::PropertyID::BorderTopStyle, *top);
style.set_property(CSS::PropertyID::BorderRightStyle, *right);
style.set_property(CSS::PropertyID::BorderBottomStyle, *bottom);
style.set_property(CSS::PropertyID::BorderLeftStyle, *left);
}
LibWeb: Don't try to expand shorthands from non-string CSS values If something is already e.g a length or a color value, we don't need to try to expand it by stringifying and looking at the parts.
2020-06-10 19:34:49 +02:00
} else {
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);
}
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::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());
LibWeb: Don't try to expand shorthands from non-string CSS values If something is already e.g a length or a color value, we don't need to try to expand it by stringifying and looking at the parts.
2020-06-10 19:34:49 +02:00
if (value.is_string() && parts.size() == 2) {
LibWeb: Don't tolerate unit-less lengths (except 0) in standards mode "width: 500" is not a valid CSS property in standards mode and should be ignored. To plumb the quirks-mode flag into CSS parsing, this patch adds a new CSS::ParsingContext object that must be passed to the CSS parser. Currently it only allows you to check the quirks-mode flag. In the future it will be a good place to put additional information needed for things like relative URL resolution, etc. This narrows <div class=parser> on ACID2 to the correct width. :^)
2020-06-28 12:43:22 +02:00
auto vertical_border_width = parse_css_value(context, parts[0]);
auto horizontal_border_width = parse_css_value(context, parts[1]);
if (vertical_border_width && horizontal_border_width) {
style.set_property(CSS::PropertyID::BorderTopWidth, *vertical_border_width);
style.set_property(CSS::PropertyID::BorderRightWidth, *horizontal_border_width);
style.set_property(CSS::PropertyID::BorderBottomWidth, *vertical_border_width);
style.set_property(CSS::PropertyID::BorderLeftWidth, *horizontal_border_width);
}
LibWeb: Expand 2-part border-width shorthand CSS properties
2020-06-10 16:42:58 +02:00
} 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) {
LibWeb: Don't try to expand shorthands from non-string CSS values If something is already e.g a length or a color value, we don't need to try to expand it by stringifying and looking at the parts.
2020-06-10 19:34:49 +02:00
auto parts = split_on_whitespace(value.to_string());
if (value.is_string() && parts.size() == 4) {
LibWeb: Don't tolerate unit-less lengths (except 0) in standards mode "width: 500" is not a valid CSS property in standards mode and should be ignored. To plumb the quirks-mode flag into CSS parsing, this patch adds a new CSS::ParsingContext object that must be passed to the CSS parser. Currently it only allows you to check the quirks-mode flag. In the future it will be a good place to put additional information needed for things like relative URL resolution, etc. This narrows <div class=parser> on ACID2 to the correct width. :^)
2020-06-28 12:43:22 +02:00
auto top = parse_css_value(context, parts[0]);
auto right = parse_css_value(context, parts[1]);
auto bottom = parse_css_value(context, parts[2]);
auto left = parse_css_value(context, parts[3]);
LibWeb: Move the CSS parser into CSS/Parser/
2020-07-28 19:20:11 +02:00
if (top && right && bottom && left) {
LibWeb: Don't tolerate unit-less lengths (except 0) in standards mode "width: 500" is not a valid CSS property in standards mode and should be ignored. To plumb the quirks-mode flag into CSS parsing, this patch adds a new CSS::ParsingContext object that must be passed to the CSS parser. Currently it only allows you to check the quirks-mode flag. In the future it will be a good place to put additional information needed for things like relative URL resolution, etc. This narrows <div class=parser> on ACID2 to the correct width. :^)
2020-06-28 12:43:22 +02:00
style.set_property(CSS::PropertyID::BorderTopColor, *top);
style.set_property(CSS::PropertyID::BorderRightColor, *right);
style.set_property(CSS::PropertyID::BorderBottomColor, *bottom);
style.set_property(CSS::PropertyID::BorderLeftColor, *left);
}
LibWeb: Don't try to expand shorthands from non-string CSS values If something is already e.g a length or a color value, we don't need to try to expand it by stringifying and looking at the parts.
2020-06-10 19:34:49 +02:00
} else {
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);
}
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;
}
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) {
LibWeb: Make CSS "background: none" work again This broke since "none" is now always going to be an identifier value.
2020-12-15 12:03:17 +01:00
if (value.is_identifier() && static_cast<const IdentifierStyleValue&>(value).id() == CSS::ValueID::None) {
LibWeb: Expand background:none into background-color:transparent
2020-06-13 20:03:41 +02:00
style.set_property(CSS::PropertyID::BackgroundColor, ColorStyleValue::create(Color::Transparent));
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
auto parts = split_on_whitespace(value.to_string());
NonnullRefPtrVector<StyleValue> values;
for (auto& part : parts) {
LibWeb: Don't tolerate unit-less lengths (except 0) in standards mode "width: 500" is not a valid CSS property in standards mode and should be ignored. To plumb the quirks-mode flag into CSS parsing, this patch adds a new CSS::ParsingContext object that must be passed to the CSS parser. Currently it only allows you to check the quirks-mode flag. In the future it will be a good place to put additional information needed for things like relative URL resolution, etc. This narrows <div class=parser> on ACID2 to the correct width. :^)
2020-06-28 12:43:22 +02:00
auto value = parse_css_value(context, part);
if (!value)
return;
values.append(value.release_nonnull());
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
}
LibWeb: Don't allow more than one color sub-value in CSS 'background'
2020-06-25 16:55:43 +02:00
// HACK: Disallow more than one color value in a 'background' shorthand
size_t color_value_count = 0;
for (auto& value : values)
color_value_count += value.is_color();
if (values[0].is_color() && color_value_count == 1)
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
style.set_property(CSS::PropertyID::BackgroundColor, values[0]);
LibWeb: Don't allow more than one color sub-value in CSS 'background'
2020-06-25 16:55:43 +02:00
LibWeb: Expand "background: url()" into "background-image: url()" This gives us a yellow forehead on ACID2! :^)
2020-06-10 17:47:04 +02:00
for (auto& value : values) {
if (!value.is_string())
continue;
auto string = value.to_string();
LibWeb: Apply the CSS background-image property to elements Previously we'd only pick up background-image when it was part of the background shorthand. CSS property application remains hackish, lots of room for improvement in this area. :^)
2020-10-08 15:35:21 +02:00
set_property_expanding_shorthands(style, CSS::PropertyID::BackgroundImage, value, document);
LibWeb: Expand "background: url()" into "background-image: url()" This gives us a yellow forehead on ACID2! :^)
2020-06-10 17:47:04 +02:00
}
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
return;
}
LibWeb: Apply the CSS background-image property to elements Previously we'd only pick up background-image when it was part of the background shorthand. CSS property application remains hackish, lots of room for improvement in this area. :^)
2020-10-08 15:35:21 +02:00
if (property_id == CSS::PropertyID::BackgroundImage) {
if (!value.is_string())
return;
auto string = value.to_string();
LibWeb: Ignore non-URL values for background-image for now
2020-10-09 21:27:01 +02:00
if (!string.starts_with("url("))
return;
if (!string.ends_with(')'))
return;
LibWeb: Apply the CSS background-image property to elements Previously we'd only pick up background-image when it was part of the background shorthand. CSS property application remains hackish, lots of room for improvement in this area. :^)
2020-10-08 15:35:21 +02:00
auto url = string.substring_view(4, string.length() - 5);
if (url.length() >= 2 && url.starts_with('"') && url.ends_with('"'))
url = url.substring_view(1, url.length() - 2);
else if (url.length() >= 2 && url.starts_with('\'') && url.ends_with('\''))
url = url.substring_view(1, url.length() - 2);
auto background_image_value = ImageStyleValue::create(document.complete_url(url), document);
style.set_property(CSS::PropertyID::BackgroundImage, move(background_image_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
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());
LibWeb: Don't try to expand shorthands from non-string CSS values If something is already e.g a length or a color value, we don't need to try to expand it by stringifying and looking at the parts.
2020-06-10 19:34:49 +02:00
if (value.is_string() && parts.size() == 2) {
LibWeb: Don't tolerate unit-less lengths (except 0) in standards mode "width: 500" is not a valid CSS property in standards mode and should be ignored. To plumb the quirks-mode flag into CSS parsing, this patch adds a new CSS::ParsingContext object that must be passed to the CSS parser. Currently it only allows you to check the quirks-mode flag. In the future it will be a good place to put additional information needed for things like relative URL resolution, etc. This narrows <div class=parser> on ACID2 to the correct width. :^)
2020-06-28 12:43:22 +02:00
auto vertical = parse_css_value(context, parts[0]);
auto horizontal = parse_css_value(context, parts[1]);
if (vertical && horizontal) {
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);
}
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
return;
}
LibWeb: Don't try to expand shorthands from non-string CSS values If something is already e.g a length or a color value, we don't need to try to expand it by stringifying and looking at the parts.
2020-06-10 19:34:49 +02:00
if (value.is_string() && parts.size() == 3) {
LibWeb: Don't tolerate unit-less lengths (except 0) in standards mode "width: 500" is not a valid CSS property in standards mode and should be ignored. To plumb the quirks-mode flag into CSS parsing, this patch adds a new CSS::ParsingContext object that must be passed to the CSS parser. Currently it only allows you to check the quirks-mode flag. In the future it will be a good place to put additional information needed for things like relative URL resolution, etc. This narrows <div class=parser> on ACID2 to the correct width. :^)
2020-06-28 12:43:22 +02:00
auto top = parse_css_value(context, parts[0]);
auto horizontal = parse_css_value(context, parts[1]);
auto bottom = parse_css_value(context, parts[2]);
if (top && horizontal && bottom) {
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);
}
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
return;
}
LibWeb: Don't try to expand shorthands from non-string CSS values If something is already e.g a length or a color value, we don't need to try to expand it by stringifying and looking at the parts.
2020-06-10 19:34:49 +02:00
if (value.is_string() && parts.size() == 4) {
LibWeb: Don't tolerate unit-less lengths (except 0) in standards mode "width: 500" is not a valid CSS property in standards mode and should be ignored. To plumb the quirks-mode flag into CSS parsing, this patch adds a new CSS::ParsingContext object that must be passed to the CSS parser. Currently it only allows you to check the quirks-mode flag. In the future it will be a good place to put additional information needed for things like relative URL resolution, etc. This narrows <div class=parser> on ACID2 to the correct width. :^)
2020-06-28 12:43:22 +02:00
auto top = parse_css_value(context, parts[0]);
auto right = parse_css_value(context, parts[1]);
auto bottom = parse_css_value(context, parts[2]);
auto left = parse_css_value(context, parts[3]);
if (top && right && bottom && left) {
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);
}
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
return;
}
Everywhere: Replace a bundle of dbg with dbgln. These changes are arbitrarily divided into multiple commits to make it easier to find potentially introduced bugs with git bisect.
2021-01-12 14:11:44 +01:00
dbgln("Unsure what to do with CSS margin value '{}'", value.to_string());
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
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());
LibWeb: Don't try to expand shorthands from non-string CSS values If something is already e.g a length or a color value, we don't need to try to expand it by stringifying and looking at the parts.
2020-06-10 19:34:49 +02:00
if (value.is_string() && parts.size() == 2) {
LibWeb: Don't tolerate unit-less lengths (except 0) in standards mode "width: 500" is not a valid CSS property in standards mode and should be ignored. To plumb the quirks-mode flag into CSS parsing, this patch adds a new CSS::ParsingContext object that must be passed to the CSS parser. Currently it only allows you to check the quirks-mode flag. In the future it will be a good place to put additional information needed for things like relative URL resolution, etc. This narrows <div class=parser> on ACID2 to the correct width. :^)
2020-06-28 12:43:22 +02:00
auto vertical = parse_css_value(context, parts[0]);
auto horizontal = parse_css_value(context, parts[1]);
if (vertical && horizontal) {
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);
}
LibHTML: Expand the "padding" shorthand property This expands in the same way as "margin".
2019-11-18 12:25:22 +01:00
return;
}
LibWeb: Don't try to expand shorthands from non-string CSS values If something is already e.g a length or a color value, we don't need to try to expand it by stringifying and looking at the parts.
2020-06-10 19:34:49 +02:00
if (value.is_string() && parts.size() == 3) {
LibWeb: Don't tolerate unit-less lengths (except 0) in standards mode "width: 500" is not a valid CSS property in standards mode and should be ignored. To plumb the quirks-mode flag into CSS parsing, this patch adds a new CSS::ParsingContext object that must be passed to the CSS parser. Currently it only allows you to check the quirks-mode flag. In the future it will be a good place to put additional information needed for things like relative URL resolution, etc. This narrows <div class=parser> on ACID2 to the correct width. :^)
2020-06-28 12:43:22 +02:00
auto top = parse_css_value(context, parts[0]);
auto horizontal = parse_css_value(context, parts[1]);
auto bottom = parse_css_value(context, parts[2]);
if (top && bottom && horizontal) {
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);
}
LibHTML: Expand the "padding" shorthand property This expands in the same way as "margin".
2019-11-18 12:25:22 +01:00
return;
}
LibWeb: Don't try to expand shorthands from non-string CSS values If something is already e.g a length or a color value, we don't need to try to expand it by stringifying and looking at the parts.
2020-06-10 19:34:49 +02:00
if (value.is_string() && parts.size() == 4) {
LibWeb: Don't tolerate unit-less lengths (except 0) in standards mode "width: 500" is not a valid CSS property in standards mode and should be ignored. To plumb the quirks-mode flag into CSS parsing, this patch adds a new CSS::ParsingContext object that must be passed to the CSS parser. Currently it only allows you to check the quirks-mode flag. In the future it will be a good place to put additional information needed for things like relative URL resolution, etc. This narrows <div class=parser> on ACID2 to the correct width. :^)
2020-06-28 12:43:22 +02:00
auto top = parse_css_value(context, parts[0]);
auto right = parse_css_value(context, parts[1]);
auto bottom = parse_css_value(context, parts[2]);
auto left = parse_css_value(context, parts[3]);
if (top && bottom && left && right) {
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);
}
LibHTML: Expand the "padding" shorthand property This expands in the same way as "margin".
2019-11-18 12:25:22 +01:00
return;
}
Everywhere: Replace a bundle of dbg with dbgln. These changes are arbitrarily divided into multiple commits to make it easier to find potentially introduced bugs with git bisect.
2021-01-12 14:11:44 +01:00
dbgln("Unsure what to do with CSS padding value '{}'", value.to_string());
LibHTML: Expand the "padding" shorthand property This expands in the same way as "margin".
2019-11-18 12:25:22 +01:00
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()) {
LibWeb: Don't tolerate unit-less lengths (except 0) in standards mode "width: 500" is not a valid CSS property in standards mode and should be ignored. To plumb the quirks-mode flag into CSS parsing, this patch adds a new CSS::ParsingContext object that must be passed to the CSS parser. Currently it only allows you to check the quirks-mode flag. In the future it will be a good place to put additional information needed for things like relative URL resolution, etc. This narrows <div class=parser> on ACID2 to the correct width. :^)
2020-06-28 12:43:22 +02:00
auto value = parse_css_value(context, parts[0]);
if (!value)
return;
style.set_property(CSS::PropertyID::ListStyleType, value.release_nonnull());
LibWeb: Don't render list item markers for "list-style-type: none"
2020-05-30 12:04:15 +02:00
}
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);
}
LibWeb: Make DOM::Node::create_layout_node() not need parent's style The StyleResolver can find the specified CSS values for the parent element via the DOM. Forcing everyone to locate specified values for their parent was completely unnecessary.
2021-01-06 14:27:40 +01:00
NonnullRefPtr<StyleProperties> StyleResolver::resolve_style(const DOM::Element& element) 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
LibWeb: Make DOM::Node::create_layout_node() not need parent's style The StyleResolver can find the specified CSS values for the parent element via the DOM. Forcing everyone to locate specified values for their parent was completely unnecessary.
2021-01-06 14:27:40 +01:00
if (auto* parent_style = element.parent_element() ? element.parent_element()->specified_css_values() : nullptr) {
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))
LibWeb: Expand "background: url()" into "background-image: url()" This gives us a yellow forehead on ACID2! :^)
2020-06-10 17:47:04 +02:00
set_property_expanding_shorthands(style, property_id, value, m_document);
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: Add a simple StyleInvalidator class This patch adds a simple, naive & inefficient class for document-wide style invalidation, e.g. after element attribute updates. During construction it collects a HashMap of a document's elements and their matching rules, during destruction it does the same and then compares the results; dirtying all elements that have a different number or order of matching rules afterwards. Much room for improvement, but it solves the problem of stale element styling after attribute updates for now :^) Fixes #4404.
2020-12-14 21:31:10 +00:00
sort_matching_rules(matching_rules);
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
LibWeb: Sort matched style rules by specificity, document order If two rules have equal specificity, they should be applied in the order in which we encountered them.
2020-06-13 00:44:26 +02:00
for (auto& match : matching_rules) {
for (auto& property : match.rule->declaration().properties()) {
LibWeb: Expand "background: url()" into "background-image: url()" This gives us a yellow forehead on ACID2! :^)
2020-06-10 17:47:04 +02:00
set_property_expanding_shorthands(style, property.property_id, property.value, m_document);
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: Cache parsed inline style of DOM elements Instead of invoking the CSS parser every time we compute the style for an element that has a "style" attribute, we now cache the result of parsing the inline style whenever the "style" attribute is set. This is a nice boost to relayout performance since we no longer hit the CSS parser at all.
2020-12-07 19:56:53 +01:00
if (auto* inline_style = element.inline_style()) {
for (auto& property : inline_style->properties()) {
set_property_expanding_shorthands(style, property.property_id, property.value, m_document);
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