ResolvedCSSStyleDeclaration.cpp 26 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488
  1. /*
  2. * Copyright (c) 2021-2022, Andreas Kling <kling@serenityos.org>
  3. * Copyright (c) 2021, Tobias Christiansen <tobyase@serenityos.org>
  4. * Copyright (c) 2022, Sam Atkins <atkinssj@serenityos.org>
  5. *
  6. * SPDX-License-Identifier: BSD-2-Clause
  7. */
  8. #include <AK/Debug.h>
  9. #include <AK/NonnullRefPtr.h>
  10. #include <LibWeb/CSS/Enums.h>
  11. #include <LibWeb/CSS/ResolvedCSSStyleDeclaration.h>
  12. #include <LibWeb/CSS/StyleComputer.h>
  13. #include <LibWeb/DOM/Document.h>
  14. #include <LibWeb/DOM/Element.h>
  15. #include <LibWeb/Layout/InitialContainingBlock.h>
  16. #include <LibWeb/Painting/PaintableBox.h>
  17. #include <LibWeb/Painting/StackingContext.h>
  18. namespace Web::CSS {
  19. ResolvedCSSStyleDeclaration::ResolvedCSSStyleDeclaration(DOM::Element& element)
  20. : m_element(element)
  21. {
  22. }
  23. size_t ResolvedCSSStyleDeclaration::length() const
  24. {
  25. return 0;
  26. }
  27. String ResolvedCSSStyleDeclaration::item(size_t index) const
  28. {
  29. (void)index;
  30. return {};
  31. }
  32. static RefPtr<StyleValue> style_value_for_display(CSS::Display display)
  33. {
  34. if (display.is_none())
  35. return IdentifierStyleValue::create(CSS::ValueID::None);
  36. if (display.is_outside_and_inside()) {
  37. NonnullRefPtrVector<StyleValue> values;
  38. switch (display.outside()) {
  39. case CSS::Display::Outside::Inline:
  40. values.append(IdentifierStyleValue::create(CSS::ValueID::Inline));
  41. break;
  42. case CSS::Display::Outside::Block:
  43. values.append(IdentifierStyleValue::create(CSS::ValueID::Block));
  44. break;
  45. case CSS::Display::Outside::RunIn:
  46. values.append(IdentifierStyleValue::create(CSS::ValueID::RunIn));
  47. break;
  48. }
  49. switch (display.inside()) {
  50. case CSS::Display::Inside::Flow:
  51. values.append(IdentifierStyleValue::create(CSS::ValueID::Flow));
  52. break;
  53. case CSS::Display::Inside::FlowRoot:
  54. values.append(IdentifierStyleValue::create(CSS::ValueID::FlowRoot));
  55. break;
  56. case CSS::Display::Inside::Table:
  57. values.append(IdentifierStyleValue::create(CSS::ValueID::Table));
  58. break;
  59. case CSS::Display::Inside::Flex:
  60. values.append(IdentifierStyleValue::create(CSS::ValueID::Flex));
  61. break;
  62. case CSS::Display::Inside::Grid:
  63. values.append(IdentifierStyleValue::create(CSS::ValueID::Grid));
  64. break;
  65. case CSS::Display::Inside::Ruby:
  66. values.append(IdentifierStyleValue::create(CSS::ValueID::Ruby));
  67. break;
  68. }
  69. return StyleValueList::create(move(values), StyleValueList::Separator::Space);
  70. }
  71. if (display.is_internal()) {
  72. switch (display.internal()) {
  73. case CSS::Display::Internal::TableRowGroup:
  74. return IdentifierStyleValue::create(CSS::ValueID::TableRowGroup);
  75. case CSS::Display::Internal::TableHeaderGroup:
  76. return IdentifierStyleValue::create(CSS::ValueID::TableHeaderGroup);
  77. case CSS::Display::Internal::TableFooterGroup:
  78. return IdentifierStyleValue::create(CSS::ValueID::TableFooterGroup);
  79. case CSS::Display::Internal::TableRow:
  80. return IdentifierStyleValue::create(CSS::ValueID::TableRow);
  81. case CSS::Display::Internal::TableCell:
  82. return IdentifierStyleValue::create(CSS::ValueID::TableCell);
  83. case CSS::Display::Internal::TableColumnGroup:
  84. return IdentifierStyleValue::create(CSS::ValueID::TableColumnGroup);
  85. case CSS::Display::Internal::TableColumn:
  86. return IdentifierStyleValue::create(CSS::ValueID::TableColumn);
  87. case CSS::Display::Internal::TableCaption:
  88. return IdentifierStyleValue::create(CSS::ValueID::TableCaption);
  89. case CSS::Display::Internal::RubyBase:
  90. return IdentifierStyleValue::create(CSS::ValueID::RubyBase);
  91. case CSS::Display::Internal::RubyText:
  92. return IdentifierStyleValue::create(CSS::ValueID::RubyText);
  93. case CSS::Display::Internal::RubyBaseContainer:
  94. return IdentifierStyleValue::create(CSS::ValueID::RubyBaseContainer);
  95. case CSS::Display::Internal::RubyTextContainer:
  96. return IdentifierStyleValue::create(CSS::ValueID::RubyTextContainer);
  97. }
  98. }
  99. TODO();
  100. }
  101. static NonnullRefPtr<StyleValue> value_or_default(Optional<StyleProperty> property, NonnullRefPtr<StyleValue> default_style)
  102. {
  103. if (property.has_value())
  104. return property.value().value;
  105. return default_style;
  106. }
  107. static NonnullRefPtr<StyleValue> style_value_for_length_percentage(LengthPercentage const& length_percentage)
  108. {
  109. if (length_percentage.is_percentage())
  110. return PercentageStyleValue::create(length_percentage.percentage());
  111. if (length_percentage.is_length())
  112. return LengthStyleValue::create(length_percentage.length());
  113. return length_percentage.calculated();
  114. }
  115. RefPtr<StyleValue> ResolvedCSSStyleDeclaration::style_value_for_property(Layout::NodeWithStyle const& layout_node, PropertyID property_id) const
  116. {
  117. switch (property_id) {
  118. case CSS::PropertyID::Background: {
  119. auto maybe_background_color = property(CSS::PropertyID::BackgroundColor);
  120. auto maybe_background_image = property(CSS::PropertyID::BackgroundImage);
  121. auto maybe_background_position = property(CSS::PropertyID::BackgroundPosition);
  122. auto maybe_background_size = property(CSS::PropertyID::BackgroundSize);
  123. auto maybe_background_repeat = property(CSS::PropertyID::BackgroundRepeat);
  124. auto maybe_background_attachment = property(CSS::PropertyID::BackgroundAttachment);
  125. auto maybe_background_origin = property(CSS::PropertyID::BackgroundOrigin);
  126. auto maybe_background_clip = property(CSS::PropertyID::BackgroundClip);
  127. return BackgroundStyleValue::create(
  128. value_or_default(maybe_background_color, InitialStyleValue::the()),
  129. value_or_default(maybe_background_image, IdentifierStyleValue::create(CSS::ValueID::None)),
  130. value_or_default(maybe_background_position, PositionStyleValue::create(PositionEdge::Left, Length::make_px(0), PositionEdge::Top, Length::make_px(0))),
  131. value_or_default(maybe_background_size, IdentifierStyleValue::create(CSS::ValueID::Auto)),
  132. value_or_default(maybe_background_repeat, BackgroundRepeatStyleValue::create(CSS::Repeat::Repeat, CSS::Repeat::Repeat)),
  133. value_or_default(maybe_background_attachment, IdentifierStyleValue::create(CSS::ValueID::Scroll)),
  134. value_or_default(maybe_background_origin, IdentifierStyleValue::create(CSS::ValueID::PaddingBox)),
  135. value_or_default(maybe_background_clip, IdentifierStyleValue::create(CSS::ValueID::BorderBox)));
  136. }
  137. case PropertyID::BackgroundColor:
  138. return ColorStyleValue::create(layout_node.computed_values().background_color());
  139. case CSS::PropertyID::BorderBottom: {
  140. auto border = layout_node.computed_values().border_bottom();
  141. auto width = LengthStyleValue::create(Length::make_px(border.width));
  142. auto style = IdentifierStyleValue::create(to_value_id(border.line_style));
  143. auto color = ColorStyleValue::create(border.color);
  144. return BorderStyleValue::create(width, style, color);
  145. }
  146. case CSS::PropertyID::BorderBottomColor:
  147. return ColorStyleValue::create(layout_node.computed_values().border_bottom().color);
  148. case CSS::PropertyID::BorderBottomLeftRadius: {
  149. auto const& border_radius = layout_node.computed_values().border_bottom_left_radius();
  150. return BorderRadiusStyleValue::create(border_radius.horizontal_radius, border_radius.vertical_radius);
  151. }
  152. case CSS::PropertyID::BorderBottomRightRadius: {
  153. auto const& border_radius = layout_node.computed_values().border_bottom_right_radius();
  154. return BorderRadiusStyleValue::create(border_radius.horizontal_radius, border_radius.vertical_radius);
  155. }
  156. case CSS::PropertyID::BorderBottomStyle:
  157. return IdentifierStyleValue::create(to_value_id(layout_node.computed_values().border_bottom().line_style));
  158. case CSS::PropertyID::BorderBottomWidth:
  159. return LengthStyleValue::create(Length::make_px(layout_node.computed_values().border_bottom().width));
  160. case CSS::PropertyID::BorderLeft: {
  161. auto border = layout_node.computed_values().border_left();
  162. auto width = LengthStyleValue::create(Length::make_px(border.width));
  163. auto style = IdentifierStyleValue::create(to_value_id(border.line_style));
  164. auto color = ColorStyleValue::create(border.color);
  165. return BorderStyleValue::create(width, style, color);
  166. }
  167. case CSS::PropertyID::BorderLeftColor:
  168. return ColorStyleValue::create(layout_node.computed_values().border_left().color);
  169. case CSS::PropertyID::BorderLeftStyle:
  170. return IdentifierStyleValue::create(to_value_id(layout_node.computed_values().border_left().line_style));
  171. case CSS::PropertyID::BorderLeftWidth:
  172. return LengthStyleValue::create(Length::make_px(layout_node.computed_values().border_left().width));
  173. case CSS::PropertyID::BorderRadius: {
  174. auto maybe_top_left_radius = property(CSS::PropertyID::BorderTopLeftRadius);
  175. auto maybe_top_right_radius = property(CSS::PropertyID::BorderTopRightRadius);
  176. auto maybe_bottom_left_radius = property(CSS::PropertyID::BorderBottomLeftRadius);
  177. auto maybe_bottom_right_radius = property(CSS::PropertyID::BorderBottomRightRadius);
  178. RefPtr<BorderRadiusStyleValue> top_left_radius, top_right_radius, bottom_left_radius, bottom_right_radius;
  179. if (maybe_top_left_radius.has_value()) {
  180. VERIFY(maybe_top_left_radius.value().value->is_border_radius());
  181. top_left_radius = maybe_top_left_radius.value().value->as_border_radius();
  182. }
  183. if (maybe_top_right_radius.has_value()) {
  184. VERIFY(maybe_top_right_radius.value().value->is_border_radius());
  185. top_right_radius = maybe_top_right_radius.value().value->as_border_radius();
  186. }
  187. if (maybe_bottom_left_radius.has_value()) {
  188. VERIFY(maybe_bottom_left_radius.value().value->is_border_radius());
  189. bottom_left_radius = maybe_bottom_left_radius.value().value->as_border_radius();
  190. }
  191. if (maybe_bottom_right_radius.has_value()) {
  192. VERIFY(maybe_bottom_right_radius.value().value->is_border_radius());
  193. bottom_right_radius = maybe_bottom_right_radius.value().value->as_border_radius();
  194. }
  195. return BorderRadiusShorthandStyleValue::create(top_left_radius.release_nonnull(), top_right_radius.release_nonnull(), bottom_right_radius.release_nonnull(), bottom_left_radius.release_nonnull());
  196. }
  197. case CSS::PropertyID::BorderRight: {
  198. auto border = layout_node.computed_values().border_right();
  199. auto width = LengthStyleValue::create(Length::make_px(border.width));
  200. auto style = IdentifierStyleValue::create(to_value_id(border.line_style));
  201. auto color = ColorStyleValue::create(border.color);
  202. return BorderStyleValue::create(width, style, color);
  203. }
  204. case CSS::PropertyID::BorderRightColor:
  205. return ColorStyleValue::create(layout_node.computed_values().border_right().color);
  206. case CSS::PropertyID::BorderRightStyle:
  207. return IdentifierStyleValue::create(to_value_id(layout_node.computed_values().border_right().line_style));
  208. case CSS::PropertyID::BorderRightWidth:
  209. return LengthStyleValue::create(Length::make_px(layout_node.computed_values().border_right().width));
  210. case CSS::PropertyID::BorderTop: {
  211. auto border = layout_node.computed_values().border_top();
  212. auto width = LengthStyleValue::create(Length::make_px(border.width));
  213. auto style = IdentifierStyleValue::create(to_value_id(border.line_style));
  214. auto color = ColorStyleValue::create(border.color);
  215. return BorderStyleValue::create(width, style, color);
  216. }
  217. case CSS::PropertyID::BorderTopColor:
  218. return ColorStyleValue::create(layout_node.computed_values().border_top().color);
  219. case CSS::PropertyID::BorderTopLeftRadius: {
  220. auto const& border_radius = layout_node.computed_values().border_top_left_radius();
  221. return BorderRadiusStyleValue::create(border_radius.horizontal_radius, border_radius.vertical_radius);
  222. }
  223. case CSS::PropertyID::BorderTopRightRadius: {
  224. auto const& border_radius = layout_node.computed_values().border_top_right_radius();
  225. return BorderRadiusStyleValue::create(border_radius.horizontal_radius, border_radius.vertical_radius);
  226. }
  227. case CSS::PropertyID::BorderTopStyle:
  228. return IdentifierStyleValue::create(to_value_id(layout_node.computed_values().border_top().line_style));
  229. case CSS::PropertyID::BorderTopWidth:
  230. return LengthStyleValue::create(Length::make_px(layout_node.computed_values().border_top().width));
  231. case CSS::PropertyID::BoxShadow: {
  232. auto box_shadow_layers = layout_node.computed_values().box_shadow();
  233. if (box_shadow_layers.is_empty())
  234. return {};
  235. auto make_box_shadow_style_value = [](ShadowData const& data) {
  236. return ShadowStyleValue::create(data.color, data.offset_x, data.offset_y, data.blur_radius, data.spread_distance, data.placement);
  237. };
  238. if (box_shadow_layers.size() == 1)
  239. return make_box_shadow_style_value(box_shadow_layers.first());
  240. NonnullRefPtrVector<StyleValue> box_shadow;
  241. box_shadow.ensure_capacity(box_shadow_layers.size());
  242. for (auto const& layer : box_shadow_layers)
  243. box_shadow.append(make_box_shadow_style_value(layer));
  244. return StyleValueList::create(move(box_shadow), StyleValueList::Separator::Comma);
  245. }
  246. case CSS::PropertyID::BoxSizing:
  247. return IdentifierStyleValue::create(to_value_id(layout_node.computed_values().box_sizing()));
  248. case CSS::PropertyID::Clear:
  249. return IdentifierStyleValue::create(to_value_id(layout_node.computed_values().clear()));
  250. case CSS::PropertyID::Color:
  251. return ColorStyleValue::create(layout_node.computed_values().color());
  252. case CSS::PropertyID::Cursor:
  253. return IdentifierStyleValue::create(to_value_id(layout_node.computed_values().cursor()));
  254. case CSS::PropertyID::Display:
  255. return style_value_for_display(layout_node.computed_values().display());
  256. case CSS::PropertyID::FlexBasis: {
  257. switch (layout_node.computed_values().flex_basis().type) {
  258. case FlexBasis::Content:
  259. return IdentifierStyleValue::create(CSS::ValueID::Content);
  260. case FlexBasis::LengthPercentage:
  261. return style_value_for_length_percentage(*layout_node.computed_values().flex_basis().length_percentage);
  262. case FlexBasis::Auto:
  263. return IdentifierStyleValue::create(CSS::ValueID::Auto);
  264. default:
  265. VERIFY_NOT_REACHED();
  266. }
  267. break;
  268. case CSS::PropertyID::FlexDirection:
  269. return IdentifierStyleValue::create(to_value_id(layout_node.computed_values().flex_direction()));
  270. case CSS::PropertyID::FlexGrow:
  271. return NumericStyleValue::create_float(layout_node.computed_values().flex_grow());
  272. case CSS::PropertyID::FlexShrink:
  273. return NumericStyleValue::create_float(layout_node.computed_values().flex_shrink());
  274. case CSS::PropertyID::FlexWrap:
  275. return IdentifierStyleValue::create(to_value_id(layout_node.computed_values().flex_wrap()));
  276. case CSS::PropertyID::Float:
  277. return IdentifierStyleValue::create(to_value_id(layout_node.computed_values().float_()));
  278. case CSS::PropertyID::Height:
  279. return style_value_for_length_percentage(layout_node.computed_values().height());
  280. case CSS::PropertyID::ImageRendering:
  281. return IdentifierStyleValue::create(to_value_id(layout_node.computed_values().image_rendering()));
  282. case CSS::PropertyID::JustifyContent:
  283. return IdentifierStyleValue::create(to_value_id(layout_node.computed_values().justify_content()));
  284. case CSS::PropertyID::ListStyleType:
  285. return IdentifierStyleValue::create(to_value_id(layout_node.computed_values().list_style_type()));
  286. case CSS::PropertyID::Margin: {
  287. auto margin = layout_node.computed_values().margin();
  288. auto values = NonnullRefPtrVector<StyleValue> {};
  289. values.append(style_value_for_length_percentage(margin.top));
  290. values.append(style_value_for_length_percentage(margin.right));
  291. values.append(style_value_for_length_percentage(margin.bottom));
  292. values.append(style_value_for_length_percentage(margin.left));
  293. return StyleValueList::create(move(values), StyleValueList::Separator::Space);
  294. }
  295. case CSS::PropertyID::MarginBottom:
  296. return style_value_for_length_percentage(layout_node.computed_values().margin().bottom);
  297. case CSS::PropertyID::MarginLeft:
  298. return style_value_for_length_percentage(layout_node.computed_values().margin().left);
  299. case CSS::PropertyID::MarginRight:
  300. return style_value_for_length_percentage(layout_node.computed_values().margin().right);
  301. case CSS::PropertyID::MarginTop:
  302. return style_value_for_length_percentage(layout_node.computed_values().margin().top);
  303. case CSS::PropertyID::MaxHeight:
  304. return style_value_for_length_percentage(layout_node.computed_values().max_height());
  305. case CSS::PropertyID::MaxWidth:
  306. return style_value_for_length_percentage(layout_node.computed_values().max_width());
  307. case CSS::PropertyID::MinHeight:
  308. return style_value_for_length_percentage(layout_node.computed_values().min_height());
  309. case CSS::PropertyID::MinWidth:
  310. return style_value_for_length_percentage(layout_node.computed_values().min_width());
  311. case CSS::PropertyID::Opacity:
  312. return NumericStyleValue::create_float(layout_node.computed_values().opacity());
  313. case CSS::PropertyID::Order:
  314. return NumericStyleValue::create_integer(layout_node.computed_values().order());
  315. case CSS::PropertyID::OverflowX:
  316. return IdentifierStyleValue::create(to_value_id(layout_node.computed_values().overflow_x()));
  317. case CSS::PropertyID::OverflowY:
  318. return IdentifierStyleValue::create(to_value_id(layout_node.computed_values().overflow_y()));
  319. case CSS::PropertyID::Padding: {
  320. auto padding = layout_node.computed_values().padding();
  321. auto values = NonnullRefPtrVector<StyleValue> {};
  322. values.append(style_value_for_length_percentage(padding.top));
  323. values.append(style_value_for_length_percentage(padding.right));
  324. values.append(style_value_for_length_percentage(padding.bottom));
  325. values.append(style_value_for_length_percentage(padding.left));
  326. return StyleValueList::create(move(values), StyleValueList::Separator::Space);
  327. }
  328. case CSS::PropertyID::PaddingBottom:
  329. case CSS::PropertyID::PaddingLeft:
  330. return style_value_for_length_percentage(layout_node.computed_values().padding().left);
  331. return style_value_for_length_percentage(layout_node.computed_values().padding().bottom);
  332. case CSS::PropertyID::PaddingRight:
  333. return style_value_for_length_percentage(layout_node.computed_values().padding().right);
  334. case CSS::PropertyID::PaddingTop:
  335. return style_value_for_length_percentage(layout_node.computed_values().padding().top);
  336. case CSS::PropertyID::Position:
  337. return IdentifierStyleValue::create(to_value_id(layout_node.computed_values().position()));
  338. case CSS::PropertyID::TextAlign:
  339. return IdentifierStyleValue::create(to_value_id(layout_node.computed_values().text_align()));
  340. case CSS::PropertyID::TextDecorationLine: {
  341. auto text_decoration_lines = layout_node.computed_values().text_decoration_line();
  342. if (text_decoration_lines.is_empty())
  343. return IdentifierStyleValue::create(ValueID::None);
  344. NonnullRefPtrVector<StyleValue> style_values;
  345. for (auto const& line : text_decoration_lines) {
  346. style_values.append(IdentifierStyleValue::create(to_value_id(line)));
  347. }
  348. return StyleValueList::create(move(style_values), StyleValueList::Separator::Space);
  349. }
  350. case CSS::PropertyID::TextDecorationStyle:
  351. return IdentifierStyleValue::create(to_value_id(layout_node.computed_values().text_decoration_style()));
  352. case CSS::PropertyID::TextTransform:
  353. return IdentifierStyleValue::create(to_value_id(layout_node.computed_values().text_transform()));
  354. case CSS::PropertyID::Transform: {
  355. // NOTE: The computed value for `transform` serializes as a single `matrix(...)` value, instead of
  356. // the original list of transform functions. So, we produce a StyleValue for that.
  357. // https://www.w3.org/TR/css-transforms-1/#serialization-of-the-computed-value
  358. auto transformations = layout_node.computed_values().transformations();
  359. if (transformations.is_empty())
  360. return IdentifierStyleValue::create(ValueID::None);
  361. // The transform matrix is held by the StackingContext, so we need to make sure we have one first.
  362. auto* initial_containing_block = layout_node.document().layout_node();
  363. VERIFY(initial_containing_block);
  364. const_cast<Layout::InitialContainingBlock&>(*initial_containing_block).build_stacking_context_tree_if_needed();
  365. VERIFY(layout_node.paintable());
  366. auto const& paintable_box = verify_cast<Painting::PaintableBox const>(layout_node.paintable());
  367. VERIFY(paintable_box->stacking_context());
  368. auto affine_matrix = paintable_box->stacking_context()->affine_transform_matrix();
  369. NonnullRefPtrVector<StyleValue> parameters;
  370. parameters.ensure_capacity(6);
  371. parameters.append(NumericStyleValue::create_float(affine_matrix.a()));
  372. parameters.append(NumericStyleValue::create_float(affine_matrix.b()));
  373. parameters.append(NumericStyleValue::create_float(affine_matrix.c()));
  374. parameters.append(NumericStyleValue::create_float(affine_matrix.d()));
  375. parameters.append(NumericStyleValue::create_float(affine_matrix.e()));
  376. parameters.append(NumericStyleValue::create_float(affine_matrix.f()));
  377. NonnullRefPtr<StyleValue> matrix_function = TransformationStyleValue::create(TransformFunction::Matrix, move(parameters));
  378. // Elsewhere we always store the transform property's value as a StyleValueList of TransformationStyleValues,
  379. // so this is just for consistency.
  380. NonnullRefPtrVector<StyleValue> matrix_functions;
  381. matrix_functions.append(matrix_function);
  382. return StyleValueList::create(move(matrix_functions), StyleValueList::Separator::Space);
  383. }
  384. case CSS::PropertyID::VerticalAlign:
  385. if (auto const* length_percentage = layout_node.computed_values().vertical_align().get_pointer<CSS::LengthPercentage>()) {
  386. if (length_percentage->is_length())
  387. return LengthStyleValue::create(length_percentage->length());
  388. if (length_percentage->is_percentage())
  389. return PercentageStyleValue::create(length_percentage->percentage());
  390. VERIFY_NOT_REACHED();
  391. }
  392. return IdentifierStyleValue::create(to_value_id(layout_node.computed_values().vertical_align().get<CSS::VerticalAlign>()));
  393. case CSS::PropertyID::WhiteSpace:
  394. return IdentifierStyleValue::create(to_value_id(layout_node.computed_values().white_space()));
  395. case CSS::PropertyID::Width:
  396. return style_value_for_length_percentage(layout_node.computed_values().width());
  397. case CSS::PropertyID::ZIndex: {
  398. auto maybe_z_index = layout_node.computed_values().z_index();
  399. if (!maybe_z_index.has_value())
  400. return {};
  401. return NumericStyleValue::create_integer(maybe_z_index.release_value());
  402. }
  403. case CSS::PropertyID::Invalid:
  404. return IdentifierStyleValue::create(CSS::ValueID::Invalid);
  405. case CSS::PropertyID::Custom:
  406. dbgln_if(LIBWEB_CSS_DEBUG, "Computed style for custom properties was requested (?)");
  407. return {};
  408. default:
  409. dbgln_if(LIBWEB_CSS_DEBUG, "FIXME: Computed style for the '{}' property was requested", string_from_property_id(property_id));
  410. return {};
  411. }
  412. }
  413. }
  414. Optional<StyleProperty> ResolvedCSSStyleDeclaration::property(PropertyID property_id) const
  415. {
  416. if (CSS::property_affects_layout(property_id)) {
  417. const_cast<DOM::Document&>(m_element->document()).update_layout();
  418. } else {
  419. // FIXME: If we had a way to update style for a single element, this would be a good place to use it.
  420. const_cast<DOM::Document&>(m_element->document()).update_style();
  421. }
  422. if (!m_element->layout_node()) {
  423. auto style = m_element->document().style_computer().compute_style(const_cast<DOM::Element&>(*m_element));
  424. return StyleProperty {
  425. .property_id = property_id,
  426. .value = style->property(property_id),
  427. };
  428. }
  429. auto& layout_node = *m_element->layout_node();
  430. auto value = style_value_for_property(layout_node, property_id);
  431. if (!value)
  432. return {};
  433. return StyleProperty {
  434. .property_id = property_id,
  435. .value = value.release_nonnull(),
  436. };
  437. }
  438. // https://drafts.csswg.org/cssom/#dom-cssstyledeclaration-setproperty
  439. DOM::ExceptionOr<void> ResolvedCSSStyleDeclaration::set_property(PropertyID, StringView, StringView)
  440. {
  441. // 1. If the computed flag is set, then throw a NoModificationAllowedError exception.
  442. return DOM::NoModificationAllowedError::create("Cannot modify properties in result of getComputedStyle()");
  443. }
  444. // https://drafts.csswg.org/cssom/#dom-cssstyledeclaration-removeproperty
  445. DOM::ExceptionOr<String> ResolvedCSSStyleDeclaration::remove_property(PropertyID)
  446. {
  447. // 1. If the computed flag is set, then throw a NoModificationAllowedError exception.
  448. return DOM::NoModificationAllowedError::create("Cannot remove properties from result of getComputedStyle()");
  449. }
  450. String ResolvedCSSStyleDeclaration::serialized() const
  451. {
  452. // https://www.w3.org/TR/cssom/#dom-cssstyledeclaration-csstext
  453. // If the computed flag is set, then return the empty string.
  454. // NOTE: ResolvedCSSStyleDeclaration is something you would only get from window.getComputedStyle(),
  455. // which returns what the spec calls "resolved style". The "computed flag" is always set here.
  456. return String::empty();
  457. }
  458. }