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