CSSStyleDeclaration.cpp 17 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415
  1. /*
  2. * Copyright (c) 2018-2023, Andreas Kling <kling@serenityos.org>
  3. *
  4. * SPDX-License-Identifier: BSD-2-Clause
  5. */
  6. #include <LibWeb/Bindings/CSSStyleDeclarationPrototype.h>
  7. #include <LibWeb/Bindings/ExceptionOrUtils.h>
  8. #include <LibWeb/Bindings/Intrinsics.h>
  9. #include <LibWeb/CSS/CSSStyleDeclaration.h>
  10. #include <LibWeb/CSS/Parser/Parser.h>
  11. #include <LibWeb/DOM/Document.h>
  12. #include <LibWeb/DOM/Element.h>
  13. #include <LibWeb/Infra/Strings.h>
  14. namespace Web::CSS {
  15. CSSStyleDeclaration::CSSStyleDeclaration(JS::Realm& realm)
  16. : PlatformObject(realm)
  17. {
  18. }
  19. JS::ThrowCompletionOr<void> CSSStyleDeclaration::initialize(JS::Realm& realm)
  20. {
  21. MUST_OR_THROW_OOM(Base::initialize(realm));
  22. set_prototype(&Bindings::ensure_web_prototype<Bindings::CSSStyleDeclarationPrototype>(realm, "CSSStyleDeclaration"));
  23. return {};
  24. }
  25. WebIDL::ExceptionOr<JS::NonnullGCPtr<PropertyOwningCSSStyleDeclaration>> PropertyOwningCSSStyleDeclaration::create(JS::Realm& realm, Vector<StyleProperty> properties, HashMap<DeprecatedString, StyleProperty> custom_properties)
  26. {
  27. return MUST_OR_THROW_OOM(realm.heap().allocate<PropertyOwningCSSStyleDeclaration>(realm, realm, move(properties), move(custom_properties)));
  28. }
  29. PropertyOwningCSSStyleDeclaration::PropertyOwningCSSStyleDeclaration(JS::Realm& realm, Vector<StyleProperty> properties, HashMap<DeprecatedString, StyleProperty> custom_properties)
  30. : CSSStyleDeclaration(realm)
  31. , m_properties(move(properties))
  32. , m_custom_properties(move(custom_properties))
  33. {
  34. }
  35. DeprecatedString PropertyOwningCSSStyleDeclaration::item(size_t index) const
  36. {
  37. if (index >= m_properties.size())
  38. return {};
  39. return CSS::string_from_property_id(m_properties[index].property_id);
  40. }
  41. WebIDL::ExceptionOr<JS::NonnullGCPtr<ElementInlineCSSStyleDeclaration>> ElementInlineCSSStyleDeclaration::create(DOM::Element& element, Vector<StyleProperty> properties, HashMap<DeprecatedString, StyleProperty> custom_properties)
  42. {
  43. auto& realm = element.realm();
  44. return MUST_OR_THROW_OOM(realm.heap().allocate<ElementInlineCSSStyleDeclaration>(realm, element, move(properties), move(custom_properties)));
  45. }
  46. ElementInlineCSSStyleDeclaration::ElementInlineCSSStyleDeclaration(DOM::Element& element, Vector<StyleProperty> properties, HashMap<DeprecatedString, StyleProperty> custom_properties)
  47. : PropertyOwningCSSStyleDeclaration(element.realm(), move(properties), move(custom_properties))
  48. , m_element(element.make_weak_ptr<DOM::Element>())
  49. {
  50. }
  51. void ElementInlineCSSStyleDeclaration::visit_edges(Cell::Visitor& visitor)
  52. {
  53. Base::visit_edges(visitor);
  54. visitor.visit(m_element.ptr());
  55. }
  56. size_t PropertyOwningCSSStyleDeclaration::length() const
  57. {
  58. return m_properties.size();
  59. }
  60. Optional<StyleProperty> PropertyOwningCSSStyleDeclaration::property(PropertyID property_id) const
  61. {
  62. for (auto& property : m_properties) {
  63. if (property.property_id == property_id)
  64. return property;
  65. }
  66. return {};
  67. }
  68. // https://drafts.csswg.org/cssom/#dom-cssstyledeclaration-setproperty
  69. WebIDL::ExceptionOr<void> PropertyOwningCSSStyleDeclaration::set_property(PropertyID property_id, StringView value, StringView priority)
  70. {
  71. // 1. If the computed flag is set, then throw a NoModificationAllowedError exception.
  72. // NOTE: This is handled by the virtual override in ResolvedCSSStyleDeclaration.
  73. // FIXME: 2. If property is not a custom property, follow these substeps:
  74. // FIXME: 1. Let property be property converted to ASCII lowercase.
  75. // FIXME: 2. If property is not a case-sensitive match for a supported CSS property, then return.
  76. // NOTE: This must be handled before we've turned the property string into a PropertyID.
  77. // 3. If value is the empty string, invoke removeProperty() with property as argument and return.
  78. if (value.is_empty()) {
  79. MUST(remove_property(property_id));
  80. return {};
  81. }
  82. // 4. If priority is not the empty string and is not an ASCII case-insensitive match for the string "important", then return.
  83. if (!priority.is_empty() && !Infra::is_ascii_case_insensitive_match(priority, "important"sv))
  84. return {};
  85. // 5. Let component value list be the result of parsing value for property property.
  86. auto component_value_list = is<ElementInlineCSSStyleDeclaration>(this)
  87. ? MUST(parse_css_value(CSS::Parser::ParsingContext { static_cast<ElementInlineCSSStyleDeclaration&>(*this).element()->document() }, value, property_id))
  88. : MUST(parse_css_value(CSS::Parser::ParsingContext { realm() }, value, property_id));
  89. // 6. If component value list is null, then return.
  90. if (!component_value_list)
  91. return {};
  92. // 7. Let updated be false.
  93. bool updated = false;
  94. // FIXME: 8. If property is a shorthand property, then for each longhand property longhand that property maps to, in canonical order, follow these substeps:
  95. // FIXME: 1. Let longhand result be the result of set the CSS declaration longhand with the appropriate value(s) from component value list,
  96. // with the important flag set if priority is not the empty string, and unset otherwise, and with the list of declarations being the declarations.
  97. // FIXME: 2. If longhand result is true, let updated be true.
  98. // 9. Otherwise, let updated be the result of set the CSS declaration property with value component value list,
  99. // with the important flag set if priority is not the empty string, and unset otherwise,
  100. // and with the list of declarations being the declarations.
  101. updated = set_a_css_declaration(property_id, component_value_list.release_nonnull(), !priority.is_empty() ? Important::Yes : Important::No);
  102. // 10. If updated is true, update style attribute for the CSS declaration block.
  103. if (updated)
  104. update_style_attribute();
  105. return {};
  106. }
  107. // https://drafts.csswg.org/cssom/#dom-cssstyledeclaration-removeproperty
  108. WebIDL::ExceptionOr<DeprecatedString> PropertyOwningCSSStyleDeclaration::remove_property(PropertyID property_id)
  109. {
  110. // 1. If the computed flag is set, then throw a NoModificationAllowedError exception.
  111. // NOTE: This is handled by the virtual override in ResolvedCSSStyleDeclaration.
  112. // 2. If property is not a custom property, let property be property converted to ASCII lowercase.
  113. // NOTE: We've already converted it to a PropertyID enum value.
  114. // 3. Let value be the return value of invoking getPropertyValue() with property as argument.
  115. // FIXME: The trip through string_from_property_id() here is silly.
  116. auto value = get_property_value(string_from_property_id(property_id));
  117. // 4. Let removed be false.
  118. bool removed = false;
  119. // FIXME: 5. If property is a shorthand property, for each longhand property longhand that property maps to:
  120. // 1. If longhand is not a property name of a CSS declaration in the declarations, continue.
  121. // 2. Remove that CSS declaration and let removed be true.
  122. // 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.
  123. removed = m_properties.remove_first_matching([&](auto& entry) { return entry.property_id == property_id; });
  124. // 7. If removed is true, Update style attribute for the CSS declaration block.
  125. if (removed)
  126. update_style_attribute();
  127. // 8. Return value.
  128. return value;
  129. }
  130. // https://drafts.csswg.org/cssom/#update-style-attribute-for
  131. void ElementInlineCSSStyleDeclaration::update_style_attribute()
  132. {
  133. // 1. Assert: declaration block’s computed flag is unset.
  134. // NOTE: Unnecessary, only relevant for ResolvedCSSStyleDeclaration.
  135. // 2. Let owner node be declaration block’s owner node.
  136. // 3. If owner node is null, then return.
  137. if (!m_element)
  138. return;
  139. // 4. Set declaration block’s updating flag.
  140. m_updating = true;
  141. // 5. Set an attribute value for owner node using "style" and the result of serializing declaration block.
  142. MUST(m_element->set_attribute(HTML::AttributeNames::style, serialized()));
  143. // 6. Unset declaration block’s updating flag.
  144. m_updating = false;
  145. }
  146. // https://drafts.csswg.org/cssom/#set-a-css-declaration
  147. bool PropertyOwningCSSStyleDeclaration::set_a_css_declaration(PropertyID property_id, NonnullRefPtr<StyleValue const> value, Important important)
  148. {
  149. // FIXME: Handle logical property groups.
  150. for (auto& property : m_properties) {
  151. if (property.property_id == property_id) {
  152. if (property.important == important && *property.value == *value)
  153. return false;
  154. property.value = move(value);
  155. property.important = important;
  156. return true;
  157. }
  158. }
  159. m_properties.append(CSS::StyleProperty {
  160. .important = important,
  161. .property_id = property_id,
  162. .value = move(value),
  163. });
  164. return true;
  165. }
  166. DeprecatedString CSSStyleDeclaration::get_property_value(StringView property_name) const
  167. {
  168. auto property_id = property_id_from_string(property_name);
  169. if (!property_id.has_value())
  170. return {};
  171. auto maybe_property = property(property_id.value());
  172. if (!maybe_property.has_value())
  173. return {};
  174. return maybe_property->value->to_string().release_value_but_fixme_should_propagate_errors().to_deprecated_string();
  175. }
  176. // https://drafts.csswg.org/cssom/#dom-cssstyledeclaration-getpropertypriority
  177. DeprecatedString CSSStyleDeclaration::get_property_priority(StringView property_name) const
  178. {
  179. auto property_id = property_id_from_string(property_name);
  180. if (!property_id.has_value())
  181. return {};
  182. auto maybe_property = property(property_id.value());
  183. if (!maybe_property.has_value())
  184. return {};
  185. return maybe_property->important == Important::Yes ? "important" : "";
  186. }
  187. WebIDL::ExceptionOr<void> CSSStyleDeclaration::set_property(StringView property_name, StringView css_text, StringView priority)
  188. {
  189. auto property_id = property_id_from_string(property_name);
  190. if (!property_id.has_value())
  191. return {};
  192. return set_property(property_id.value(), css_text, priority);
  193. }
  194. WebIDL::ExceptionOr<DeprecatedString> CSSStyleDeclaration::remove_property(StringView property_name)
  195. {
  196. auto property_id = property_id_from_string(property_name);
  197. if (!property_id.has_value())
  198. return DeprecatedString::empty();
  199. return remove_property(property_id.value());
  200. }
  201. // https://drafts.csswg.org/cssom/#dom-cssstyledeclaration-csstext
  202. DeprecatedString CSSStyleDeclaration::css_text() const
  203. {
  204. // 1. If the computed flag is set, then return the empty string.
  205. // NOTE: See ResolvedCSSStyleDeclaration::serialized()
  206. // 2. Return the result of serializing the declarations.
  207. return serialized();
  208. }
  209. // https://www.w3.org/TR/cssom/#serialize-a-css-declaration
  210. static DeprecatedString serialize_a_css_declaration(CSS::PropertyID property, DeprecatedString value, Important important)
  211. {
  212. StringBuilder builder;
  213. // 1. Let s be the empty string.
  214. // 2. Append property to s.
  215. builder.append(string_from_property_id(property));
  216. // 3. Append ": " (U+003A U+0020) to s.
  217. builder.append(": "sv);
  218. // 4. Append value to s.
  219. builder.append(value);
  220. // 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.
  221. if (important == Important::Yes)
  222. builder.append(" !important"sv);
  223. // 6. Append ";" (U+003B) to s.
  224. builder.append(';');
  225. // 7. Return s.
  226. return builder.to_deprecated_string();
  227. }
  228. // https://www.w3.org/TR/cssom/#serialize-a-css-declaration-block
  229. DeprecatedString PropertyOwningCSSStyleDeclaration::serialized() const
  230. {
  231. // 1. Let list be an empty array.
  232. Vector<DeprecatedString> list;
  233. // 2. Let already serialized be an empty array.
  234. HashTable<PropertyID> already_serialized;
  235. // 3. Declaration loop: For each CSS declaration declaration in declaration block’s declarations, follow these substeps:
  236. for (auto& declaration : m_properties) {
  237. // 1. Let property be declaration’s property name.
  238. auto property = declaration.property_id;
  239. // 2. If property is in already serialized, continue with the steps labeled declaration loop.
  240. if (already_serialized.contains(property))
  241. continue;
  242. // FIXME: 3. If property maps to one or more shorthand properties, let shorthands be an array of those shorthand properties, in preferred order.
  243. // FIXME: 4. Shorthand loop: For each shorthand in shorthands, follow these substeps: ...
  244. // 5. Let value be the result of invoking serialize a CSS value of declaration.
  245. auto value = declaration.value->to_string().release_value_but_fixme_should_propagate_errors().to_deprecated_string();
  246. // 6. Let serialized declaration be the result of invoking serialize a CSS declaration with property name property, value value,
  247. // and the important flag set if declaration has its important flag set.
  248. auto serialized_declaration = serialize_a_css_declaration(property, move(value), declaration.important);
  249. // 7. Append serialized declaration to list.
  250. list.append(move(serialized_declaration));
  251. // 8. Append property to already serialized.
  252. already_serialized.set(property);
  253. }
  254. // 4. Return list joined with " " (U+0020).
  255. StringBuilder builder;
  256. builder.join(' ', list);
  257. return builder.to_deprecated_string();
  258. }
  259. static CSS::PropertyID property_id_from_name(StringView name)
  260. {
  261. // FIXME: Perhaps this should go in the code generator.
  262. if (name == "cssFloat"sv)
  263. return CSS::PropertyID::Float;
  264. if (auto property_id = CSS::property_id_from_camel_case_string(name); property_id.has_value())
  265. return property_id.value();
  266. if (auto property_id = CSS::property_id_from_string(name); property_id.has_value())
  267. return property_id.value();
  268. return CSS::PropertyID::Invalid;
  269. }
  270. JS::ThrowCompletionOr<bool> CSSStyleDeclaration::internal_has_property(JS::PropertyKey const& name) const
  271. {
  272. if (!name.is_string())
  273. return Base::internal_has_property(name);
  274. return property_id_from_name(name.to_string()) != CSS::PropertyID::Invalid;
  275. }
  276. JS::ThrowCompletionOr<JS::Value> CSSStyleDeclaration::internal_get(JS::PropertyKey const& name, JS::Value receiver) const
  277. {
  278. if (!name.is_string())
  279. return Base::internal_get(name, receiver);
  280. auto property_id = property_id_from_name(name.to_string());
  281. if (property_id == CSS::PropertyID::Invalid)
  282. return Base::internal_get(name, receiver);
  283. if (auto maybe_property = property(property_id); maybe_property.has_value())
  284. return { JS::PrimitiveString::create(vm(), maybe_property->value->to_string().release_value_but_fixme_should_propagate_errors().to_deprecated_string()) };
  285. return { JS::PrimitiveString::create(vm(), String {}) };
  286. }
  287. JS::ThrowCompletionOr<bool> CSSStyleDeclaration::internal_set(JS::PropertyKey const& name, JS::Value value, JS::Value receiver)
  288. {
  289. auto& vm = this->vm();
  290. if (!name.is_string())
  291. return Base::internal_set(name, value, receiver);
  292. auto property_id = property_id_from_name(name.to_string());
  293. if (property_id == CSS::PropertyID::Invalid)
  294. return Base::internal_set(name, value, receiver);
  295. auto css_text = TRY(value.to_deprecated_string(vm));
  296. TRY(Bindings::throw_dom_exception_if_needed(vm, [&] { return set_property(property_id, css_text); }));
  297. return true;
  298. }
  299. WebIDL::ExceptionOr<void> PropertyOwningCSSStyleDeclaration::set_css_text(StringView css_text)
  300. {
  301. dbgln("(STUBBED) PropertyOwningCSSStyleDeclaration::set_css_text(css_text='{}')", css_text);
  302. return {};
  303. }
  304. void PropertyOwningCSSStyleDeclaration::empty_the_declarations()
  305. {
  306. m_properties.clear();
  307. m_custom_properties.clear();
  308. }
  309. void PropertyOwningCSSStyleDeclaration::set_the_declarations(Vector<StyleProperty> properties, HashMap<DeprecatedString, StyleProperty> custom_properties)
  310. {
  311. m_properties = move(properties);
  312. m_custom_properties = move(custom_properties);
  313. }
  314. // https://drafts.csswg.org/cssom/#dom-cssstyledeclaration-csstext
  315. WebIDL::ExceptionOr<void> ElementInlineCSSStyleDeclaration::set_css_text(StringView css_text)
  316. {
  317. // FIXME: What do we do if the element is null?
  318. if (!m_element) {
  319. dbgln("FIXME: Returning from ElementInlineCSSStyleDeclaration::set_css_text as m_element is null.");
  320. return {};
  321. }
  322. // 1. If the computed flag is set, then throw a NoModificationAllowedError exception.
  323. // NOTE: See ResolvedCSSStyleDeclaration.
  324. // 2. Empty the declarations.
  325. empty_the_declarations();
  326. // 3. Parse the given value and, if the return value is not the empty list, insert the items in the list into the declarations, in specified order.
  327. auto style = parse_css_style_attribute(CSS::Parser::ParsingContext(m_element->document()), css_text, *m_element.ptr());
  328. set_the_declarations(style->properties(), style->custom_properties());
  329. // 4. Update style attribute for the CSS declaration block.
  330. update_style_attribute();
  331. return {};
  332. }
  333. }