Serenity Operating System
at master 406 lines 17 kB view raw
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}