CSSStyleDeclaration.cpp 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287
  1. /*
  2. * Copyright (c) 2018-2021, Andreas Kling <kling@serenityos.org>
  3. *
  4. * SPDX-License-Identifier: BSD-2-Clause
  5. */
  6. #include <LibWeb/CSS/CSSStyleDeclaration.h>
  7. #include <LibWeb/CSS/Parser/Parser.h>
  8. #include <LibWeb/DOM/Element.h>
  9. namespace Web::CSS {
  10. PropertyOwningCSSStyleDeclaration::PropertyOwningCSSStyleDeclaration(Vector<StyleProperty> properties, HashMap<String, StyleProperty> custom_properties)
  11. : m_properties(move(properties))
  12. , m_custom_properties(move(custom_properties))
  13. {
  14. }
  15. String PropertyOwningCSSStyleDeclaration::item(size_t index) const
  16. {
  17. if (index >= m_properties.size())
  18. return {};
  19. return CSS::string_from_property_id(m_properties[index].property_id);
  20. }
  21. ElementInlineCSSStyleDeclaration::ElementInlineCSSStyleDeclaration(DOM::Element& element, Vector<StyleProperty> properties, HashMap<String, StyleProperty> custom_properties)
  22. : PropertyOwningCSSStyleDeclaration(move(properties), move(custom_properties))
  23. , m_element(element.make_weak_ptr<DOM::Element>())
  24. {
  25. }
  26. size_t PropertyOwningCSSStyleDeclaration::length() const
  27. {
  28. return m_properties.size();
  29. }
  30. Optional<StyleProperty> PropertyOwningCSSStyleDeclaration::property(PropertyID property_id) const
  31. {
  32. for (auto& property : m_properties) {
  33. if (property.property_id == property_id)
  34. return property;
  35. }
  36. return {};
  37. }
  38. // https://drafts.csswg.org/cssom/#dom-cssstyledeclaration-setproperty
  39. DOM::ExceptionOr<void> PropertyOwningCSSStyleDeclaration::set_property(PropertyID property_id, StringView value, StringView priority)
  40. {
  41. // 1. If the computed flag is set, then throw a NoModificationAllowedError exception.
  42. // NOTE: This is handled by the virtual override in ResolvedCSSStyleDeclaration.
  43. // FIXME: 2. If property is not a custom property, follow these substeps:
  44. // FIXME: 1. Let property be property converted to ASCII lowercase.
  45. // FIXME: 2. If property is not a case-sensitive match for a supported CSS property, then return.
  46. // NOTE: This must be handled before we've turned the property string into a PropertyID.
  47. // 3. If value is the empty string, invoke removeProperty() with property as argument and return.
  48. if (value.is_empty()) {
  49. MUST(remove_property(property_id));
  50. return {};
  51. }
  52. // 4. If priority is not the empty string and is not an ASCII case-insensitive match for the string "important", then return.
  53. if (!priority.is_empty() && !priority.equals_ignoring_case("important"sv))
  54. return {};
  55. // 5. Let component value list be the result of parsing value for property property.
  56. auto component_value_list = parse_css_value(CSS::Parser::ParsingContext {}, value, property_id);
  57. // 6. If component value list is null, then return.
  58. if (!component_value_list)
  59. return {};
  60. // 7. Let updated be false.
  61. bool updated = false;
  62. // FIXME: 8. If property is a shorthand property, then for each longhand property longhand that property maps to, in canonical order, follow these substeps:
  63. // FIXME: 1. Let longhand result be the result of set the CSS declaration longhand with the appropriate value(s) from component value list,
  64. // with the important flag set if priority is not the empty string, and unset otherwise, and with the list of declarations being the declarations.
  65. // FIXME: 2. If longhand result is true, let updated be true.
  66. // 9. Otherwise, let updated be the result of set the CSS declaration property with value component value list,
  67. // with the important flag set if priority is not the empty string, and unset otherwise,
  68. // and with the list of declarations being the declarations.
  69. updated = set_a_css_declaration(property_id, component_value_list.release_nonnull(), !priority.is_empty() ? Important::Yes : Important::No);
  70. // 10. If updated is true, update style attribute for the CSS declaration block.
  71. if (updated)
  72. update_style_attribute();
  73. return {};
  74. }
  75. // https://drafts.csswg.org/cssom/#dom-cssstyledeclaration-removeproperty
  76. DOM::ExceptionOr<String> PropertyOwningCSSStyleDeclaration::remove_property(PropertyID property_id)
  77. {
  78. // 1. If the computed flag is set, then throw a NoModificationAllowedError exception.
  79. // NOTE: This is handled by the virtual override in ResolvedCSSStyleDeclaration.
  80. // 2. If property is not a custom property, let property be property converted to ASCII lowercase.
  81. // NOTE: We've already converted it to a PropertyID enum value.
  82. // 3. Let value be the return value of invoking getPropertyValue() with property as argument.
  83. // FIXME: The trip through string_from_property_id() here is silly.
  84. auto value = get_property_value(string_from_property_id(property_id));
  85. // 4. Let removed be false.
  86. bool removed = false;
  87. // FIXME: 5. If property is a shorthand property, for each longhand property longhand that property maps to:
  88. // 1. If longhand is not a property name of a CSS declaration in the declarations, continue.
  89. // 2. Remove that CSS declaration and let removed be true.
  90. // 6. Otherwise, if property is a case-sensitive match for a property name of a CSS declaration in the declarations, remove that CSS declaration and let removed be true.
  91. removed = m_properties.remove_first_matching([&](auto& entry) { return entry.property_id == property_id; });
  92. // 7. If removed is true, Update style attribute for the CSS declaration block.
  93. if (removed)
  94. update_style_attribute();
  95. // 8. Return value.
  96. return value;
  97. }
  98. // https://drafts.csswg.org/cssom/#update-style-attribute-for
  99. void ElementInlineCSSStyleDeclaration::update_style_attribute()
  100. {
  101. // 1. Assert: declaration block’s computed flag is unset.
  102. // NOTE: Unnecessary, only relevant for ResolvedCSSStyleDeclaration.
  103. // 2. Let owner node be declaration block’s owner node.
  104. // 3. If owner node is null, then return.
  105. if (!m_element)
  106. return;
  107. // 4. Set declaration block’s updating flag.
  108. m_updating = true;
  109. // 5. Set an attribute value for owner node using "style" and the result of serializing declaration block.
  110. m_element->set_attribute(HTML::AttributeNames::style, serialized());
  111. // 6. Unset declaration block’s updating flag.
  112. m_updating = false;
  113. }
  114. // https://drafts.csswg.org/cssom/#set-a-css-declaration
  115. bool PropertyOwningCSSStyleDeclaration::set_a_css_declaration(PropertyID property_id, NonnullRefPtr<StyleValue> value, Important important)
  116. {
  117. // FIXME: Handle logical property groups.
  118. for (auto& property : m_properties) {
  119. if (property.property_id == property_id) {
  120. if (property.important == important && *property.value == *value)
  121. return false;
  122. property.value = move(value);
  123. property.important = important;
  124. return true;
  125. }
  126. }
  127. m_properties.append(CSS::StyleProperty {
  128. .important = important,
  129. .property_id = property_id,
  130. .value = move(value),
  131. });
  132. return true;
  133. }
  134. String CSSStyleDeclaration::get_property_value(StringView property_name) const
  135. {
  136. auto property_id = property_id_from_string(property_name);
  137. if (property_id == CSS::PropertyID::Invalid)
  138. return {};
  139. auto maybe_property = property(property_id);
  140. if (!maybe_property.has_value())
  141. return {};
  142. return maybe_property->value->to_string();
  143. }
  144. // https://drafts.csswg.org/cssom/#dom-cssstyledeclaration-getpropertypriority
  145. String CSSStyleDeclaration::get_property_priority(StringView property_name) const
  146. {
  147. auto property_id = property_id_from_string(property_name);
  148. if (property_id == CSS::PropertyID::Invalid)
  149. return {};
  150. auto maybe_property = property(property_id);
  151. if (!maybe_property.has_value())
  152. return {};
  153. return maybe_property->important == Important::Yes ? "important" : "";
  154. }
  155. DOM::ExceptionOr<void> CSSStyleDeclaration::set_property(StringView property_name, StringView css_text, StringView priority)
  156. {
  157. auto property_id = property_id_from_string(property_name);
  158. if (property_id == CSS::PropertyID::Invalid)
  159. return {};
  160. return set_property(property_id, css_text, priority);
  161. }
  162. DOM::ExceptionOr<String> CSSStyleDeclaration::remove_property(StringView property_name)
  163. {
  164. auto property_id = property_id_from_string(property_name);
  165. if (property_id == CSS::PropertyID::Invalid)
  166. return String::empty();
  167. return remove_property(property_id);
  168. }
  169. String CSSStyleDeclaration::css_text() const
  170. {
  171. TODO();
  172. return "";
  173. }
  174. void CSSStyleDeclaration::set_css_text(StringView)
  175. {
  176. TODO();
  177. }
  178. // https://www.w3.org/TR/cssom/#serialize-a-css-declaration
  179. static String serialize_a_css_declaration(CSS::PropertyID property, String value, Important important)
  180. {
  181. StringBuilder builder;
  182. // 1. Let s be the empty string.
  183. // 2. Append property to s.
  184. builder.append(string_from_property_id(property));
  185. // 3. Append ": " (U+003A U+0020) to s.
  186. builder.append(": "sv);
  187. // 4. Append value to s.
  188. builder.append(value);
  189. // 5. If the important flag is set, append " !important" (U+0020 U+0021 U+0069 U+006D U+0070 U+006F U+0072 U+0074 U+0061 U+006E U+0074) to s.
  190. if (important == Important::Yes)
  191. builder.append(" !important"sv);
  192. // 6. Append ";" (U+003B) to s.
  193. builder.append(';');
  194. // 7. Return s.
  195. return builder.to_string();
  196. }
  197. // https://www.w3.org/TR/cssom/#serialize-a-css-declaration-block
  198. String PropertyOwningCSSStyleDeclaration::serialized() const
  199. {
  200. // 1. Let list be an empty array.
  201. Vector<String> list;
  202. // 2. Let already serialized be an empty array.
  203. HashTable<PropertyID> already_serialized;
  204. // 3. Declaration loop: For each CSS declaration declaration in declaration block’s declarations, follow these substeps:
  205. for (auto& declaration : m_properties) {
  206. // 1. Let property be declaration’s property name.
  207. auto property = declaration.property_id;
  208. // 2. If property is in already serialized, continue with the steps labeled declaration loop.
  209. if (already_serialized.contains(property))
  210. continue;
  211. // FIXME: 3. If property maps to one or more shorthand properties, let shorthands be an array of those shorthand properties, in preferred order.
  212. // FIXME: 4. Shorthand loop: For each shorthand in shorthands, follow these substeps: ...
  213. // 5. Let value be the result of invoking serialize a CSS value of declaration.
  214. auto value = declaration.value->to_string();
  215. // 6. Let serialized declaration be the result of invoking serialize a CSS declaration with property name property, value value,
  216. // and the important flag set if declaration has its important flag set.
  217. auto serialized_declaration = serialize_a_css_declaration(property, move(value), declaration.important);
  218. // 7. Append serialized declaration to list.
  219. list.append(move(serialized_declaration));
  220. // 8. Append property to already serialized.
  221. already_serialized.set(property);
  222. }
  223. // 4. Return list joined with " " (U+0020).
  224. StringBuilder builder;
  225. builder.join(' ', list);
  226. return builder.to_string();
  227. }
  228. }