ResolvedCSSStyleDeclaration.cpp 44 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808
  1. /*
  2. * Copyright (c) 2021-2023, Andreas Kling <kling@serenityos.org>
  3. * Copyright (c) 2021, Tobias Christiansen <tobyase@serenityos.org>
  4. * Copyright (c) 2022-2023, Sam Atkins <atkinssj@serenityos.org>
  5. *
  6. * SPDX-License-Identifier: BSD-2-Clause
  7. */
  8. #include <AK/Debug.h>
  9. #include <AK/Format.h>
  10. #include <AK/NonnullRefPtr.h>
  11. #include <LibWeb/CSS/Enums.h>
  12. #include <LibWeb/CSS/ResolvedCSSStyleDeclaration.h>
  13. #include <LibWeb/CSS/StyleComputer.h>
  14. #include <LibWeb/CSS/StyleValues/BackgroundRepeatStyleValue.h>
  15. #include <LibWeb/CSS/StyleValues/BackgroundStyleValue.h>
  16. #include <LibWeb/CSS/StyleValues/BorderRadiusShorthandStyleValue.h>
  17. #include <LibWeb/CSS/StyleValues/BorderRadiusStyleValue.h>
  18. #include <LibWeb/CSS/StyleValues/BorderStyleValue.h>
  19. #include <LibWeb/CSS/StyleValues/CalculatedStyleValue.h>
  20. #include <LibWeb/CSS/StyleValues/ColorStyleValue.h>
  21. #include <LibWeb/CSS/StyleValues/EdgeStyleValue.h>
  22. #include <LibWeb/CSS/StyleValues/GridAreaShorthandStyleValue.h>
  23. #include <LibWeb/CSS/StyleValues/GridTrackPlacementShorthandStyleValue.h>
  24. #include <LibWeb/CSS/StyleValues/GridTrackPlacementStyleValue.h>
  25. #include <LibWeb/CSS/StyleValues/GridTrackSizeListShorthandStyleValue.h>
  26. #include <LibWeb/CSS/StyleValues/GridTrackSizeListStyleValue.h>
  27. #include <LibWeb/CSS/StyleValues/IdentifierStyleValue.h>
  28. #include <LibWeb/CSS/StyleValues/InitialStyleValue.h>
  29. #include <LibWeb/CSS/StyleValues/LengthStyleValue.h>
  30. #include <LibWeb/CSS/StyleValues/NumericStyleValue.h>
  31. #include <LibWeb/CSS/StyleValues/PercentageStyleValue.h>
  32. #include <LibWeb/CSS/StyleValues/PositionStyleValue.h>
  33. #include <LibWeb/CSS/StyleValues/RectStyleValue.h>
  34. #include <LibWeb/CSS/StyleValues/ShadowStyleValue.h>
  35. #include <LibWeb/CSS/StyleValues/StyleValueList.h>
  36. #include <LibWeb/CSS/StyleValues/TransformationStyleValue.h>
  37. #include <LibWeb/DOM/Document.h>
  38. #include <LibWeb/DOM/Element.h>
  39. #include <LibWeb/Layout/Viewport.h>
  40. #include <LibWeb/Painting/PaintableBox.h>
  41. #include <LibWeb/Painting/StackingContext.h>
  42. namespace Web::CSS {
  43. WebIDL::ExceptionOr<JS::NonnullGCPtr<ResolvedCSSStyleDeclaration>> ResolvedCSSStyleDeclaration::create(DOM::Element& element)
  44. {
  45. return MUST_OR_THROW_OOM(element.realm().heap().allocate<ResolvedCSSStyleDeclaration>(element.realm(), element));
  46. }
  47. ResolvedCSSStyleDeclaration::ResolvedCSSStyleDeclaration(DOM::Element& element)
  48. : CSSStyleDeclaration(element.realm())
  49. , m_element(element)
  50. {
  51. }
  52. void ResolvedCSSStyleDeclaration::visit_edges(Cell::Visitor& visitor)
  53. {
  54. Base::visit_edges(visitor);
  55. visitor.visit(m_element.ptr());
  56. }
  57. size_t ResolvedCSSStyleDeclaration::length() const
  58. {
  59. return 0;
  60. }
  61. DeprecatedString ResolvedCSSStyleDeclaration::item(size_t index) const
  62. {
  63. (void)index;
  64. return {};
  65. }
  66. static ErrorOr<NonnullRefPtr<StyleValue const>> style_value_for_background_property(Layout::NodeWithStyle const& layout_node, Function<ErrorOr<NonnullRefPtr<StyleValue const>>(BackgroundLayerData const&)> callback, Function<ErrorOr<NonnullRefPtr<StyleValue const>>()> default_value)
  67. {
  68. auto const& background_layers = layout_node.background_layers();
  69. if (background_layers.is_empty())
  70. return default_value();
  71. if (background_layers.size() == 1)
  72. return callback(background_layers.first());
  73. StyleValueVector values;
  74. TRY(values.try_ensure_capacity(background_layers.size()));
  75. for (auto const& layer : background_layers)
  76. values.unchecked_append(TRY(callback(layer)));
  77. return StyleValueList::create(move(values), StyleValueList::Separator::Comma);
  78. }
  79. static ErrorOr<RefPtr<StyleValue>> style_value_for_display(Display display)
  80. {
  81. if (display.is_none())
  82. return IdentifierStyleValue::create(ValueID::None);
  83. if (display.is_outside_and_inside()) {
  84. // NOTE: Following the precedence rules of “most backwards-compatible, then shortest”,
  85. // serialization of equivalent display values uses the “Short display” column.
  86. if (display == Display::from_short(Display::Short::Block))
  87. return IdentifierStyleValue::create(ValueID::Block);
  88. if (display == Display::from_short(Display::Short::FlowRoot))
  89. return IdentifierStyleValue::create(ValueID::FlowRoot);
  90. if (display == Display::from_short(Display::Short::Inline))
  91. return IdentifierStyleValue::create(ValueID::Inline);
  92. if (display == Display::from_short(Display::Short::InlineBlock))
  93. return IdentifierStyleValue::create(ValueID::InlineBlock);
  94. if (display == Display::from_short(Display::Short::RunIn))
  95. return IdentifierStyleValue::create(ValueID::RunIn);
  96. if (display == Display::from_short(Display::Short::ListItem))
  97. return IdentifierStyleValue::create(ValueID::ListItem);
  98. if (display == Display::from_short(Display::Short::Flex))
  99. return IdentifierStyleValue::create(ValueID::Flex);
  100. if (display == Display::from_short(Display::Short::InlineFlex))
  101. return IdentifierStyleValue::create(ValueID::InlineFlex);
  102. if (display == Display::from_short(Display::Short::Grid))
  103. return IdentifierStyleValue::create(ValueID::Grid);
  104. if (display == Display::from_short(Display::Short::InlineGrid))
  105. return IdentifierStyleValue::create(ValueID::InlineGrid);
  106. if (display == Display::from_short(Display::Short::Ruby))
  107. return IdentifierStyleValue::create(ValueID::Ruby);
  108. if (display == Display::from_short(Display::Short::Table))
  109. return IdentifierStyleValue::create(ValueID::Table);
  110. if (display == Display::from_short(Display::Short::InlineTable))
  111. return IdentifierStyleValue::create(ValueID::InlineTable);
  112. StyleValueVector values;
  113. switch (display.outside()) {
  114. case Display::Outside::Inline:
  115. TRY(values.try_append(TRY(IdentifierStyleValue::create(ValueID::Inline))));
  116. break;
  117. case Display::Outside::Block:
  118. TRY(values.try_append(TRY(IdentifierStyleValue::create(ValueID::Block))));
  119. break;
  120. case Display::Outside::RunIn:
  121. TRY(values.try_append(TRY(IdentifierStyleValue::create(ValueID::RunIn))));
  122. break;
  123. }
  124. switch (display.inside()) {
  125. case Display::Inside::Flow:
  126. TRY(values.try_append(TRY(IdentifierStyleValue::create(ValueID::Flow))));
  127. break;
  128. case Display::Inside::FlowRoot:
  129. TRY(values.try_append(TRY(IdentifierStyleValue::create(ValueID::FlowRoot))));
  130. break;
  131. case Display::Inside::Table:
  132. TRY(values.try_append(TRY(IdentifierStyleValue::create(ValueID::Table))));
  133. break;
  134. case Display::Inside::Flex:
  135. TRY(values.try_append(TRY(IdentifierStyleValue::create(ValueID::Flex))));
  136. break;
  137. case Display::Inside::Grid:
  138. TRY(values.try_append(TRY(IdentifierStyleValue::create(ValueID::Grid))));
  139. break;
  140. case Display::Inside::Ruby:
  141. TRY(values.try_append(TRY(IdentifierStyleValue::create(ValueID::Ruby))));
  142. break;
  143. }
  144. return StyleValueList::create(move(values), StyleValueList::Separator::Space);
  145. }
  146. if (display.is_internal()) {
  147. switch (display.internal()) {
  148. case Display::Internal::TableRowGroup:
  149. return IdentifierStyleValue::create(ValueID::TableRowGroup);
  150. case Display::Internal::TableHeaderGroup:
  151. return IdentifierStyleValue::create(ValueID::TableHeaderGroup);
  152. case Display::Internal::TableFooterGroup:
  153. return IdentifierStyleValue::create(ValueID::TableFooterGroup);
  154. case Display::Internal::TableRow:
  155. return IdentifierStyleValue::create(ValueID::TableRow);
  156. case Display::Internal::TableCell:
  157. return IdentifierStyleValue::create(ValueID::TableCell);
  158. case Display::Internal::TableColumnGroup:
  159. return IdentifierStyleValue::create(ValueID::TableColumnGroup);
  160. case Display::Internal::TableColumn:
  161. return IdentifierStyleValue::create(ValueID::TableColumn);
  162. case Display::Internal::TableCaption:
  163. return IdentifierStyleValue::create(ValueID::TableCaption);
  164. case Display::Internal::RubyBase:
  165. return IdentifierStyleValue::create(ValueID::RubyBase);
  166. case Display::Internal::RubyText:
  167. return IdentifierStyleValue::create(ValueID::RubyText);
  168. case Display::Internal::RubyBaseContainer:
  169. return IdentifierStyleValue::create(ValueID::RubyBaseContainer);
  170. case Display::Internal::RubyTextContainer:
  171. return IdentifierStyleValue::create(ValueID::RubyTextContainer);
  172. }
  173. }
  174. TODO();
  175. }
  176. static NonnullRefPtr<StyleValue const> value_or_default(Optional<StyleProperty> property, NonnullRefPtr<StyleValue> default_style)
  177. {
  178. if (property.has_value())
  179. return property.value().value;
  180. return default_style;
  181. }
  182. static ErrorOr<NonnullRefPtr<StyleValue const>> style_value_for_length_percentage(LengthPercentage const& length_percentage)
  183. {
  184. if (length_percentage.is_auto())
  185. return IdentifierStyleValue::create(ValueID::Auto);
  186. if (length_percentage.is_percentage())
  187. return PercentageStyleValue::create(length_percentage.percentage());
  188. if (length_percentage.is_length())
  189. return LengthStyleValue::create(length_percentage.length());
  190. return length_percentage.calculated();
  191. }
  192. static ErrorOr<NonnullRefPtr<StyleValue const>> style_value_for_size(Size const& size)
  193. {
  194. if (size.is_none())
  195. return IdentifierStyleValue::create(ValueID::None);
  196. if (size.is_percentage())
  197. return PercentageStyleValue::create(size.percentage());
  198. if (size.is_length())
  199. return LengthStyleValue::create(size.length());
  200. if (size.is_auto())
  201. return IdentifierStyleValue::create(ValueID::Auto);
  202. if (size.is_calculated())
  203. return size.calculated();
  204. if (size.is_min_content())
  205. return IdentifierStyleValue::create(ValueID::MinContent);
  206. if (size.is_max_content())
  207. return IdentifierStyleValue::create(ValueID::MaxContent);
  208. // FIXME: Support fit-content(<length>)
  209. TODO();
  210. }
  211. ErrorOr<RefPtr<StyleValue const>> ResolvedCSSStyleDeclaration::style_value_for_property(Layout::NodeWithStyle const& layout_node, PropertyID property_id) const
  212. {
  213. switch (property_id) {
  214. case PropertyID::AccentColor: {
  215. auto accent_color = layout_node.computed_values().accent_color();
  216. if (accent_color.has_value())
  217. return TRY(ColorStyleValue::create(accent_color.value()));
  218. return TRY(IdentifierStyleValue::create(ValueID::Auto));
  219. }
  220. case PropertyID::AlignContent:
  221. return TRY(IdentifierStyleValue::create(to_value_id(layout_node.computed_values().align_content())));
  222. case PropertyID::AlignItems:
  223. return TRY(IdentifierStyleValue::create(to_value_id(layout_node.computed_values().align_items())));
  224. case PropertyID::AlignSelf:
  225. return TRY(IdentifierStyleValue::create(to_value_id(layout_node.computed_values().align_self())));
  226. case PropertyID::Appearance:
  227. return TRY(IdentifierStyleValue::create(to_value_id(layout_node.computed_values().appearance())));
  228. case PropertyID::Background: {
  229. auto maybe_background_color = property(PropertyID::BackgroundColor);
  230. auto maybe_background_image = property(PropertyID::BackgroundImage);
  231. auto maybe_background_position = property(PropertyID::BackgroundPosition);
  232. auto maybe_background_size = property(PropertyID::BackgroundSize);
  233. auto maybe_background_repeat = property(PropertyID::BackgroundRepeat);
  234. auto maybe_background_attachment = property(PropertyID::BackgroundAttachment);
  235. auto maybe_background_origin = property(PropertyID::BackgroundOrigin);
  236. auto maybe_background_clip = property(PropertyID::BackgroundClip);
  237. return BackgroundStyleValue::create(
  238. value_or_default(maybe_background_color, TRY(InitialStyleValue::the())),
  239. value_or_default(maybe_background_image, TRY(IdentifierStyleValue::create(ValueID::None))),
  240. value_or_default(maybe_background_position, TRY(PositionStyleValue::create(TRY(EdgeStyleValue::create(PositionEdge::Left, Length::make_px(0))), TRY(EdgeStyleValue::create(PositionEdge::Top, Length::make_px(0)))))),
  241. value_or_default(maybe_background_size, TRY(IdentifierStyleValue::create(ValueID::Auto))),
  242. value_or_default(maybe_background_repeat, TRY(BackgroundRepeatStyleValue::create(Repeat::Repeat, Repeat::Repeat))),
  243. value_or_default(maybe_background_attachment, TRY(IdentifierStyleValue::create(ValueID::Scroll))),
  244. value_or_default(maybe_background_origin, TRY(IdentifierStyleValue::create(ValueID::PaddingBox))),
  245. value_or_default(maybe_background_clip, TRY(IdentifierStyleValue::create(ValueID::BorderBox))));
  246. }
  247. case PropertyID::BackgroundAttachment:
  248. return style_value_for_background_property(
  249. layout_node,
  250. [](auto& layer) { return IdentifierStyleValue::create(to_value_id(layer.attachment)); },
  251. [] { return IdentifierStyleValue::create(ValueID::Scroll); });
  252. case PropertyID::BackgroundClip:
  253. return style_value_for_background_property(
  254. layout_node,
  255. [](auto& layer) { return IdentifierStyleValue::create(to_value_id(layer.clip)); },
  256. [] { return IdentifierStyleValue::create(ValueID::BorderBox); });
  257. case PropertyID::BackgroundColor:
  258. return ColorStyleValue::create(layout_node.computed_values().background_color());
  259. case PropertyID::BackgroundImage:
  260. return style_value_for_background_property(
  261. layout_node,
  262. [](auto& layer) -> ErrorOr<NonnullRefPtr<StyleValue const>> {
  263. if (layer.background_image)
  264. return *layer.background_image;
  265. return IdentifierStyleValue::create(ValueID::None);
  266. },
  267. [] { return IdentifierStyleValue::create(ValueID::None); });
  268. case PropertyID::BackgroundOrigin:
  269. return style_value_for_background_property(
  270. layout_node,
  271. [](auto& layer) { return IdentifierStyleValue::create(to_value_id(layer.origin)); },
  272. [] { return IdentifierStyleValue::create(ValueID::PaddingBox); });
  273. case PropertyID::BackgroundPosition:
  274. return style_value_for_background_property(
  275. layout_node,
  276. [](auto& layer) -> ErrorOr<NonnullRefPtr<StyleValue>> {
  277. return PositionStyleValue::create(
  278. TRY(EdgeStyleValue::create(layer.position_edge_x, layer.position_offset_x)),
  279. TRY(EdgeStyleValue::create(layer.position_edge_y, layer.position_offset_y)));
  280. },
  281. []() -> ErrorOr<NonnullRefPtr<StyleValue>> {
  282. return PositionStyleValue::create(
  283. TRY(EdgeStyleValue::create(PositionEdge::Left, Percentage(0))),
  284. TRY(EdgeStyleValue::create(PositionEdge::Top, Percentage(0))));
  285. });
  286. case PropertyID::BackgroundPositionX:
  287. return style_value_for_background_property(
  288. layout_node,
  289. [](auto& layer) { return EdgeStyleValue::create(layer.position_edge_x, layer.position_offset_x); },
  290. [] { return EdgeStyleValue::create(PositionEdge::Left, Percentage(0)); });
  291. case PropertyID::BackgroundPositionY:
  292. return style_value_for_background_property(
  293. layout_node,
  294. [](auto& layer) { return EdgeStyleValue::create(layer.position_edge_y, layer.position_offset_y); },
  295. [] { return EdgeStyleValue::create(PositionEdge::Top, Percentage(0)); });
  296. case PropertyID::BackgroundRepeat:
  297. return style_value_for_background_property(
  298. layout_node,
  299. [](auto& layer) -> ErrorOr<NonnullRefPtr<StyleValue const>> {
  300. StyleValueVector repeat {
  301. TRY(IdentifierStyleValue::create(to_value_id(layer.repeat_x))),
  302. TRY(IdentifierStyleValue::create(to_value_id(layer.repeat_y))),
  303. };
  304. return StyleValueList::create(move(repeat), StyleValueList::Separator::Space);
  305. },
  306. [] { return BackgroundRepeatStyleValue::create(Repeat::Repeat, Repeat::Repeat); });
  307. case PropertyID::BorderBottom: {
  308. auto border = layout_node.computed_values().border_bottom();
  309. auto width = TRY(LengthStyleValue::create(Length::make_px(border.width)));
  310. auto style = TRY(IdentifierStyleValue::create(to_value_id(border.line_style)));
  311. auto color = TRY(ColorStyleValue::create(border.color));
  312. return BorderStyleValue::create(width, style, color);
  313. }
  314. case PropertyID::BorderBottomColor:
  315. return ColorStyleValue::create(layout_node.computed_values().border_bottom().color);
  316. case PropertyID::BorderBottomLeftRadius: {
  317. auto const& border_radius = layout_node.computed_values().border_bottom_left_radius();
  318. return BorderRadiusStyleValue::create(border_radius.horizontal_radius, border_radius.vertical_radius);
  319. }
  320. case PropertyID::BorderBottomRightRadius: {
  321. auto const& border_radius = layout_node.computed_values().border_bottom_right_radius();
  322. return BorderRadiusStyleValue::create(border_radius.horizontal_radius, border_radius.vertical_radius);
  323. }
  324. case PropertyID::BorderBottomStyle:
  325. return IdentifierStyleValue::create(to_value_id(layout_node.computed_values().border_bottom().line_style));
  326. case PropertyID::BorderBottomWidth:
  327. return LengthStyleValue::create(Length::make_px(layout_node.computed_values().border_bottom().width));
  328. case PropertyID::BorderCollapse:
  329. return IdentifierStyleValue::create(to_value_id(layout_node.computed_values().border_collapse()));
  330. case PropertyID::BorderLeft: {
  331. auto border = layout_node.computed_values().border_left();
  332. auto width = TRY(LengthStyleValue::create(Length::make_px(border.width)));
  333. auto style = TRY(IdentifierStyleValue::create(to_value_id(border.line_style)));
  334. auto color = TRY(ColorStyleValue::create(border.color));
  335. return BorderStyleValue::create(width, style, color);
  336. }
  337. case PropertyID::BorderLeftColor:
  338. return ColorStyleValue::create(layout_node.computed_values().border_left().color);
  339. case PropertyID::BorderLeftStyle:
  340. return IdentifierStyleValue::create(to_value_id(layout_node.computed_values().border_left().line_style));
  341. case PropertyID::BorderLeftWidth:
  342. return LengthStyleValue::create(Length::make_px(layout_node.computed_values().border_left().width));
  343. case PropertyID::BorderRadius: {
  344. auto maybe_top_left_radius = property(PropertyID::BorderTopLeftRadius);
  345. auto maybe_top_right_radius = property(PropertyID::BorderTopRightRadius);
  346. auto maybe_bottom_left_radius = property(PropertyID::BorderBottomLeftRadius);
  347. auto maybe_bottom_right_radius = property(PropertyID::BorderBottomRightRadius);
  348. RefPtr<BorderRadiusStyleValue const> top_left_radius, top_right_radius, bottom_left_radius, bottom_right_radius;
  349. if (maybe_top_left_radius.has_value()) {
  350. VERIFY(maybe_top_left_radius.value().value->is_border_radius());
  351. top_left_radius = maybe_top_left_radius.value().value->as_border_radius();
  352. }
  353. if (maybe_top_right_radius.has_value()) {
  354. VERIFY(maybe_top_right_radius.value().value->is_border_radius());
  355. top_right_radius = maybe_top_right_radius.value().value->as_border_radius();
  356. }
  357. if (maybe_bottom_left_radius.has_value()) {
  358. VERIFY(maybe_bottom_left_radius.value().value->is_border_radius());
  359. bottom_left_radius = maybe_bottom_left_radius.value().value->as_border_radius();
  360. }
  361. if (maybe_bottom_right_radius.has_value()) {
  362. VERIFY(maybe_bottom_right_radius.value().value->is_border_radius());
  363. bottom_right_radius = maybe_bottom_right_radius.value().value->as_border_radius();
  364. }
  365. return BorderRadiusShorthandStyleValue::create(top_left_radius.release_nonnull(), top_right_radius.release_nonnull(), bottom_right_radius.release_nonnull(), bottom_left_radius.release_nonnull());
  366. }
  367. case PropertyID::BorderRight: {
  368. auto border = layout_node.computed_values().border_right();
  369. auto width = TRY(LengthStyleValue::create(Length::make_px(border.width)));
  370. auto style = TRY(IdentifierStyleValue::create(to_value_id(border.line_style)));
  371. auto color = TRY(ColorStyleValue::create(border.color));
  372. return BorderStyleValue::create(width, style, color);
  373. }
  374. case PropertyID::BorderRightColor:
  375. return ColorStyleValue::create(layout_node.computed_values().border_right().color);
  376. case PropertyID::BorderRightStyle:
  377. return IdentifierStyleValue::create(to_value_id(layout_node.computed_values().border_right().line_style));
  378. case PropertyID::BorderRightWidth:
  379. return LengthStyleValue::create(Length::make_px(layout_node.computed_values().border_right().width));
  380. case PropertyID::BorderTop: {
  381. auto border = layout_node.computed_values().border_top();
  382. auto width = TRY(LengthStyleValue::create(Length::make_px(border.width)));
  383. auto style = TRY(IdentifierStyleValue::create(to_value_id(border.line_style)));
  384. auto color = TRY(ColorStyleValue::create(border.color));
  385. return BorderStyleValue::create(width, style, color);
  386. }
  387. case PropertyID::BorderTopColor:
  388. return ColorStyleValue::create(layout_node.computed_values().border_top().color);
  389. case PropertyID::BorderTopLeftRadius: {
  390. auto const& border_radius = layout_node.computed_values().border_top_left_radius();
  391. return BorderRadiusStyleValue::create(border_radius.horizontal_radius, border_radius.vertical_radius);
  392. }
  393. case PropertyID::BorderTopRightRadius: {
  394. auto const& border_radius = layout_node.computed_values().border_top_right_radius();
  395. return BorderRadiusStyleValue::create(border_radius.horizontal_radius, border_radius.vertical_radius);
  396. }
  397. case PropertyID::BorderTopStyle:
  398. return IdentifierStyleValue::create(to_value_id(layout_node.computed_values().border_top().line_style));
  399. case PropertyID::BorderTopWidth:
  400. return LengthStyleValue::create(Length::make_px(layout_node.computed_values().border_top().width));
  401. case PropertyID::BoxShadow: {
  402. auto box_shadow_layers = layout_node.computed_values().box_shadow();
  403. if (box_shadow_layers.is_empty())
  404. return nullptr;
  405. auto make_box_shadow_style_value = [](ShadowData const& data) {
  406. return ShadowStyleValue::create(data.color, data.offset_x, data.offset_y, data.blur_radius, data.spread_distance, data.placement);
  407. };
  408. if (box_shadow_layers.size() == 1)
  409. return make_box_shadow_style_value(box_shadow_layers.first());
  410. StyleValueVector box_shadow;
  411. TRY(box_shadow.try_ensure_capacity(box_shadow_layers.size()));
  412. for (auto const& layer : box_shadow_layers)
  413. box_shadow.unchecked_append(TRY(make_box_shadow_style_value(layer)));
  414. return StyleValueList::create(move(box_shadow), StyleValueList::Separator::Comma);
  415. }
  416. case PropertyID::BoxSizing:
  417. return IdentifierStyleValue::create(to_value_id(layout_node.computed_values().box_sizing()));
  418. case PropertyID::Bottom:
  419. return style_value_for_length_percentage(layout_node.computed_values().inset().bottom());
  420. case PropertyID::Clear:
  421. return IdentifierStyleValue::create(to_value_id(layout_node.computed_values().clear()));
  422. case PropertyID::Clip:
  423. return RectStyleValue::create(layout_node.computed_values().clip().to_rect());
  424. case PropertyID::Color:
  425. return ColorStyleValue::create(layout_node.computed_values().color());
  426. case PropertyID::ColumnGap:
  427. return style_value_for_size(layout_node.computed_values().column_gap());
  428. case PropertyID::Cursor:
  429. return IdentifierStyleValue::create(to_value_id(layout_node.computed_values().cursor()));
  430. case PropertyID::Display:
  431. return style_value_for_display(layout_node.display());
  432. case PropertyID::FlexBasis: {
  433. switch (layout_node.computed_values().flex_basis().type) {
  434. case FlexBasis::Content:
  435. return IdentifierStyleValue::create(ValueID::Content);
  436. case FlexBasis::LengthPercentage:
  437. return style_value_for_length_percentage(*layout_node.computed_values().flex_basis().length_percentage);
  438. case FlexBasis::Auto:
  439. return IdentifierStyleValue::create(ValueID::Auto);
  440. default:
  441. VERIFY_NOT_REACHED();
  442. }
  443. break;
  444. case PropertyID::FlexDirection:
  445. return IdentifierStyleValue::create(to_value_id(layout_node.computed_values().flex_direction()));
  446. case PropertyID::FlexGrow:
  447. return NumericStyleValue::create_float(layout_node.computed_values().flex_grow());
  448. case PropertyID::FlexShrink:
  449. return NumericStyleValue::create_float(layout_node.computed_values().flex_shrink());
  450. case PropertyID::FlexWrap:
  451. return IdentifierStyleValue::create(to_value_id(layout_node.computed_values().flex_wrap()));
  452. case PropertyID::Float:
  453. return IdentifierStyleValue::create(to_value_id(layout_node.computed_values().float_()));
  454. case PropertyID::FontSize:
  455. return LengthStyleValue::create(Length::make_px(layout_node.computed_values().font_size()));
  456. case PropertyID::FontVariant: {
  457. auto font_variant = layout_node.computed_values().font_variant();
  458. switch (font_variant) {
  459. case FontVariant::Normal:
  460. return IdentifierStyleValue::create(ValueID::Normal);
  461. case FontVariant::SmallCaps:
  462. return IdentifierStyleValue::create(ValueID::SmallCaps);
  463. }
  464. VERIFY_NOT_REACHED();
  465. }
  466. case PropertyID::FontWeight:
  467. return NumericStyleValue::create_integer(layout_node.computed_values().font_weight());
  468. case PropertyID::GridArea: {
  469. auto maybe_grid_row_start = property(PropertyID::GridRowStart);
  470. auto maybe_grid_column_start = property(PropertyID::GridColumnStart);
  471. auto maybe_grid_row_end = property(PropertyID::GridRowEnd);
  472. auto maybe_grid_column_end = property(PropertyID::GridColumnEnd);
  473. RefPtr<GridTrackPlacementStyleValue const> grid_row_start, grid_column_start, grid_row_end, grid_column_end;
  474. if (maybe_grid_row_start.has_value()) {
  475. VERIFY(maybe_grid_row_start.value().value->is_grid_track_placement());
  476. grid_row_start = maybe_grid_row_start.value().value->as_grid_track_placement();
  477. }
  478. if (maybe_grid_column_start.has_value()) {
  479. VERIFY(maybe_grid_column_start.value().value->is_grid_track_placement());
  480. grid_column_start = maybe_grid_column_start.value().value->as_grid_track_placement();
  481. }
  482. if (maybe_grid_row_end.has_value()) {
  483. VERIFY(maybe_grid_row_end.value().value->is_grid_track_placement());
  484. grid_row_end = maybe_grid_row_end.value().value->as_grid_track_placement();
  485. }
  486. if (maybe_grid_column_end.has_value()) {
  487. VERIFY(maybe_grid_column_end.value().value->is_grid_track_placement());
  488. grid_column_end = maybe_grid_column_end.value().value->as_grid_track_placement();
  489. }
  490. return GridAreaShorthandStyleValue::create(
  491. grid_row_start.release_nonnull(),
  492. grid_column_start.release_nonnull(),
  493. grid_row_end.release_nonnull(),
  494. grid_column_end.release_nonnull());
  495. }
  496. case PropertyID::GridColumn: {
  497. auto maybe_grid_column_end = property(PropertyID::GridColumnEnd);
  498. auto maybe_grid_column_start = property(PropertyID::GridColumnStart);
  499. RefPtr<GridTrackPlacementStyleValue const> grid_column_start, grid_column_end;
  500. if (maybe_grid_column_end.has_value()) {
  501. VERIFY(maybe_grid_column_end.value().value->is_grid_track_placement());
  502. grid_column_end = maybe_grid_column_end.value().value->as_grid_track_placement();
  503. }
  504. if (maybe_grid_column_start.has_value()) {
  505. VERIFY(maybe_grid_column_start.value().value->is_grid_track_placement());
  506. grid_column_start = maybe_grid_column_start.value().value->as_grid_track_placement();
  507. }
  508. return GridTrackPlacementShorthandStyleValue::create(grid_column_end.release_nonnull(), grid_column_start.release_nonnull());
  509. }
  510. case PropertyID::GridColumnEnd:
  511. return GridTrackPlacementStyleValue::create(layout_node.computed_values().grid_column_end());
  512. case PropertyID::GridColumnStart:
  513. return GridTrackPlacementStyleValue::create(layout_node.computed_values().grid_column_start());
  514. case PropertyID::GridRow: {
  515. auto maybe_grid_row_end = property(PropertyID::GridRowEnd);
  516. auto maybe_grid_row_start = property(PropertyID::GridRowStart);
  517. RefPtr<GridTrackPlacementStyleValue const> grid_row_start, grid_row_end;
  518. if (maybe_grid_row_end.has_value()) {
  519. VERIFY(maybe_grid_row_end.value().value->is_grid_track_placement());
  520. grid_row_end = maybe_grid_row_end.value().value->as_grid_track_placement();
  521. }
  522. if (maybe_grid_row_start.has_value()) {
  523. VERIFY(maybe_grid_row_start.value().value->is_grid_track_placement());
  524. grid_row_start = maybe_grid_row_start.value().value->as_grid_track_placement();
  525. }
  526. return GridTrackPlacementShorthandStyleValue::create(grid_row_end.release_nonnull(), grid_row_start.release_nonnull());
  527. }
  528. case PropertyID::GridRowEnd:
  529. return GridTrackPlacementStyleValue::create(layout_node.computed_values().grid_row_end());
  530. case PropertyID::GridRowStart:
  531. return GridTrackPlacementStyleValue::create(layout_node.computed_values().grid_row_start());
  532. case PropertyID::GridTemplate: {
  533. auto maybe_grid_template_areas = property(PropertyID::GridTemplateAreas);
  534. auto maybe_grid_template_rows = property(PropertyID::GridTemplateRows);
  535. auto maybe_grid_template_columns = property(PropertyID::GridTemplateColumns);
  536. RefPtr<GridTemplateAreaStyleValue const> grid_template_areas;
  537. RefPtr<GridTrackSizeListStyleValue const> grid_template_rows, grid_template_columns;
  538. if (maybe_grid_template_areas.has_value()) {
  539. VERIFY(maybe_grid_template_areas.value().value->is_grid_template_area());
  540. grid_template_areas = maybe_grid_template_areas.value().value->as_grid_template_area();
  541. }
  542. if (maybe_grid_template_rows.has_value()) {
  543. VERIFY(maybe_grid_template_rows.value().value->is_grid_track_size_list());
  544. grid_template_rows = maybe_grid_template_rows.value().value->as_grid_track_size_list();
  545. }
  546. if (maybe_grid_template_columns.has_value()) {
  547. VERIFY(maybe_grid_template_columns.value().value->is_grid_track_size_list());
  548. grid_template_columns = maybe_grid_template_columns.value().value->as_grid_track_size_list();
  549. }
  550. return GridTrackSizeListShorthandStyleValue::create(grid_template_areas.release_nonnull(), grid_template_rows.release_nonnull(), grid_template_columns.release_nonnull());
  551. }
  552. case PropertyID::GridTemplateColumns:
  553. return GridTrackSizeListStyleValue::create(layout_node.computed_values().grid_template_columns());
  554. case PropertyID::GridTemplateRows:
  555. return GridTrackSizeListStyleValue::create(layout_node.computed_values().grid_template_rows());
  556. case PropertyID::GridTemplateAreas:
  557. return GridTemplateAreaStyleValue::create(layout_node.computed_values().grid_template_areas());
  558. case PropertyID::Height:
  559. return style_value_for_size(layout_node.computed_values().height());
  560. case PropertyID::ImageRendering:
  561. return IdentifierStyleValue::create(to_value_id(layout_node.computed_values().image_rendering()));
  562. case PropertyID::JustifyContent:
  563. return IdentifierStyleValue::create(to_value_id(layout_node.computed_values().justify_content()));
  564. case PropertyID::Left:
  565. return style_value_for_length_percentage(layout_node.computed_values().inset().left());
  566. case PropertyID::LineHeight:
  567. return LengthStyleValue::create(Length::make_px(layout_node.line_height()));
  568. case PropertyID::ListStyleType:
  569. return IdentifierStyleValue::create(to_value_id(layout_node.computed_values().list_style_type()));
  570. case PropertyID::Margin: {
  571. auto margin = layout_node.computed_values().margin();
  572. auto values = StyleValueVector {};
  573. TRY(values.try_ensure_capacity(4));
  574. values.unchecked_append(TRY(style_value_for_length_percentage(margin.top())));
  575. values.unchecked_append(TRY(style_value_for_length_percentage(margin.right())));
  576. values.unchecked_append(TRY(style_value_for_length_percentage(margin.bottom())));
  577. values.unchecked_append(TRY(style_value_for_length_percentage(margin.left())));
  578. return StyleValueList::create(move(values), StyleValueList::Separator::Space);
  579. }
  580. case PropertyID::MarginBottom:
  581. return style_value_for_length_percentage(layout_node.computed_values().margin().bottom());
  582. case PropertyID::MarginLeft:
  583. return style_value_for_length_percentage(layout_node.computed_values().margin().left());
  584. case PropertyID::MarginRight:
  585. return style_value_for_length_percentage(layout_node.computed_values().margin().right());
  586. case PropertyID::MarginTop:
  587. return style_value_for_length_percentage(layout_node.computed_values().margin().top());
  588. case PropertyID::MaxHeight:
  589. return style_value_for_size(layout_node.computed_values().max_height());
  590. case PropertyID::MaxWidth:
  591. return style_value_for_size(layout_node.computed_values().max_width());
  592. case PropertyID::MinHeight:
  593. return style_value_for_size(layout_node.computed_values().min_height());
  594. case PropertyID::MinWidth:
  595. return style_value_for_size(layout_node.computed_values().min_width());
  596. case PropertyID::Opacity:
  597. return NumericStyleValue::create_float(layout_node.computed_values().opacity());
  598. case PropertyID::Order:
  599. return NumericStyleValue::create_integer(layout_node.computed_values().order());
  600. case PropertyID::OverflowX:
  601. return IdentifierStyleValue::create(to_value_id(layout_node.computed_values().overflow_x()));
  602. case PropertyID::OverflowY:
  603. return IdentifierStyleValue::create(to_value_id(layout_node.computed_values().overflow_y()));
  604. case PropertyID::Padding: {
  605. auto padding = layout_node.computed_values().padding();
  606. auto values = StyleValueVector {};
  607. TRY(values.try_ensure_capacity(4));
  608. values.unchecked_append(TRY(style_value_for_length_percentage(padding.top())));
  609. values.unchecked_append(TRY(style_value_for_length_percentage(padding.right())));
  610. values.unchecked_append(TRY(style_value_for_length_percentage(padding.bottom())));
  611. values.unchecked_append(TRY(style_value_for_length_percentage(padding.left())));
  612. return StyleValueList::create(move(values), StyleValueList::Separator::Space);
  613. }
  614. case PropertyID::PaddingBottom:
  615. return style_value_for_length_percentage(layout_node.computed_values().padding().bottom());
  616. case PropertyID::PaddingLeft:
  617. return style_value_for_length_percentage(layout_node.computed_values().padding().left());
  618. case PropertyID::PaddingRight:
  619. return style_value_for_length_percentage(layout_node.computed_values().padding().right());
  620. case PropertyID::PaddingTop:
  621. return style_value_for_length_percentage(layout_node.computed_values().padding().top());
  622. case PropertyID::Position:
  623. return IdentifierStyleValue::create(to_value_id(layout_node.computed_values().position()));
  624. case PropertyID::Right:
  625. return style_value_for_length_percentage(layout_node.computed_values().inset().right());
  626. case PropertyID::RowGap:
  627. return style_value_for_size(layout_node.computed_values().row_gap());
  628. case PropertyID::TextAlign:
  629. return IdentifierStyleValue::create(to_value_id(layout_node.computed_values().text_align()));
  630. case PropertyID::TextDecorationLine: {
  631. auto text_decoration_lines = layout_node.computed_values().text_decoration_line();
  632. if (text_decoration_lines.is_empty())
  633. return IdentifierStyleValue::create(ValueID::None);
  634. StyleValueVector style_values;
  635. TRY(style_values.try_ensure_capacity(text_decoration_lines.size()));
  636. for (auto const& line : text_decoration_lines) {
  637. style_values.unchecked_append(TRY(IdentifierStyleValue::create(to_value_id(line))));
  638. }
  639. return StyleValueList::create(move(style_values), StyleValueList::Separator::Space);
  640. }
  641. case PropertyID::TextDecorationStyle:
  642. return IdentifierStyleValue::create(to_value_id(layout_node.computed_values().text_decoration_style()));
  643. case PropertyID::TextTransform:
  644. return IdentifierStyleValue::create(to_value_id(layout_node.computed_values().text_transform()));
  645. case PropertyID::Top:
  646. return style_value_for_length_percentage(layout_node.computed_values().inset().top());
  647. case PropertyID::Transform: {
  648. // NOTE: The computed value for `transform` serializes as a single `matrix(...)` value, instead of
  649. // the original list of transform functions. So, we produce a StyleValue for that.
  650. // https://www.w3.org/TR/css-transforms-1/#serialization-of-the-computed-value
  651. auto transformations = layout_node.computed_values().transformations();
  652. if (transformations.is_empty())
  653. return IdentifierStyleValue::create(ValueID::None);
  654. // The transform matrix is held by the StackingContext, so we need to make sure we have one first.
  655. auto const* viewport = layout_node.document().layout_node();
  656. VERIFY(viewport);
  657. const_cast<Layout::Viewport&>(*viewport).build_stacking_context_tree_if_needed();
  658. VERIFY(layout_node.paintable());
  659. auto const& paintable_box = verify_cast<Painting::PaintableBox const>(layout_node.paintable());
  660. VERIFY(paintable_box->stacking_context());
  661. // FIXME: This needs to serialize to matrix3d if the transformation matrix is a 3D matrix.
  662. // https://w3c.github.io/csswg-drafts/css-transforms-2/#serialization-of-the-computed-value
  663. auto affine_matrix = paintable_box->stacking_context()->affine_transform_matrix();
  664. StyleValueVector parameters;
  665. TRY(parameters.try_ensure_capacity(6));
  666. parameters.unchecked_append(TRY(NumericStyleValue::create_float(affine_matrix.a())));
  667. parameters.unchecked_append(TRY(NumericStyleValue::create_float(affine_matrix.b())));
  668. parameters.unchecked_append(TRY(NumericStyleValue::create_float(affine_matrix.c())));
  669. parameters.unchecked_append(TRY(NumericStyleValue::create_float(affine_matrix.d())));
  670. parameters.unchecked_append(TRY(NumericStyleValue::create_float(affine_matrix.e())));
  671. parameters.unchecked_append(TRY(NumericStyleValue::create_float(affine_matrix.f())));
  672. NonnullRefPtr<StyleValue> matrix_function = TRY(TransformationStyleValue::create(TransformFunction::Matrix, move(parameters)));
  673. // Elsewhere we always store the transform property's value as a StyleValueList of TransformationStyleValues,
  674. // so this is just for consistency.
  675. StyleValueVector matrix_functions { matrix_function };
  676. return StyleValueList::create(move(matrix_functions), StyleValueList::Separator::Space);
  677. }
  678. case PropertyID::VerticalAlign:
  679. if (auto const* length_percentage = layout_node.computed_values().vertical_align().get_pointer<LengthPercentage>()) {
  680. return style_value_for_length_percentage(*length_percentage);
  681. }
  682. return IdentifierStyleValue::create(to_value_id(layout_node.computed_values().vertical_align().get<VerticalAlign>()));
  683. case PropertyID::WhiteSpace:
  684. return IdentifierStyleValue::create(to_value_id(layout_node.computed_values().white_space()));
  685. case PropertyID::Width:
  686. return style_value_for_size(layout_node.computed_values().width());
  687. case PropertyID::ZIndex: {
  688. auto maybe_z_index = layout_node.computed_values().z_index();
  689. if (!maybe_z_index.has_value())
  690. return nullptr;
  691. return NumericStyleValue::create_integer(maybe_z_index.release_value());
  692. }
  693. case PropertyID::Invalid:
  694. return IdentifierStyleValue::create(ValueID::Invalid);
  695. case PropertyID::Custom:
  696. dbgln_if(LIBWEB_CSS_DEBUG, "Computed style for custom properties was requested (?)");
  697. return nullptr;
  698. default:
  699. dbgln_if(LIBWEB_CSS_DEBUG, "FIXME: Computed style for the '{}' property was requested", string_from_property_id(property_id));
  700. return nullptr;
  701. }
  702. }
  703. }
  704. Optional<StyleProperty> ResolvedCSSStyleDeclaration::property(PropertyID property_id) const
  705. {
  706. // https://www.w3.org/TR/cssom-1/#dom-window-getcomputedstyle
  707. // NOTE: This is a partial enforcement of step 5 ("If elt is connected, ...")
  708. if (!m_element->is_connected())
  709. return {};
  710. if (property_affects_layout(property_id)) {
  711. const_cast<DOM::Document&>(m_element->document()).update_layout();
  712. } else {
  713. // FIXME: If we had a way to update style for a single element, this would be a good place to use it.
  714. const_cast<DOM::Document&>(m_element->document()).update_style();
  715. }
  716. if (!m_element->layout_node()) {
  717. auto style_or_error = m_element->document().style_computer().compute_style(const_cast<DOM::Element&>(*m_element));
  718. if (style_or_error.is_error()) {
  719. dbgln("ResolvedCSSStyleDeclaration::property style computer failed");
  720. return {};
  721. }
  722. auto style = style_or_error.release_value();
  723. // FIXME: This is a stopgap until we implement shorthand -> longhand conversion.
  724. auto value = style->maybe_null_property(property_id);
  725. if (!value) {
  726. dbgln("FIXME: ResolvedCSSStyleDeclaration::property(property_id=0x{:x}) No value for property ID in newly computed style case.", to_underlying(property_id));
  727. return {};
  728. }
  729. return StyleProperty {
  730. .property_id = property_id,
  731. .value = value.release_nonnull(),
  732. };
  733. }
  734. auto& layout_node = *m_element->layout_node();
  735. auto value = style_value_for_property(layout_node, property_id).release_value_but_fixme_should_propagate_errors();
  736. if (!value)
  737. return {};
  738. return StyleProperty {
  739. .property_id = property_id,
  740. .value = value.release_nonnull(),
  741. };
  742. }
  743. // https://drafts.csswg.org/cssom/#dom-cssstyledeclaration-setproperty
  744. WebIDL::ExceptionOr<void> ResolvedCSSStyleDeclaration::set_property(PropertyID, StringView, StringView)
  745. {
  746. // 1. If the computed flag is set, then throw a NoModificationAllowedError exception.
  747. return WebIDL::NoModificationAllowedError::create(realm(), "Cannot modify properties in result of getComputedStyle()");
  748. }
  749. // https://drafts.csswg.org/cssom/#dom-cssstyledeclaration-removeproperty
  750. WebIDL::ExceptionOr<DeprecatedString> ResolvedCSSStyleDeclaration::remove_property(PropertyID)
  751. {
  752. // 1. If the computed flag is set, then throw a NoModificationAllowedError exception.
  753. return WebIDL::NoModificationAllowedError::create(realm(), "Cannot remove properties from result of getComputedStyle()");
  754. }
  755. DeprecatedString ResolvedCSSStyleDeclaration::serialized() const
  756. {
  757. // https://www.w3.org/TR/cssom/#dom-cssstyledeclaration-csstext
  758. // If the computed flag is set, then return the empty string.
  759. // NOTE: ResolvedCSSStyleDeclaration is something you would only get from window.getComputedStyle(),
  760. // which returns what the spec calls "resolved style". The "computed flag" is always set here.
  761. return DeprecatedString::empty();
  762. }
  763. // https://drafts.csswg.org/cssom/#dom-cssstyledeclaration-csstext
  764. WebIDL::ExceptionOr<void> ResolvedCSSStyleDeclaration::set_css_text(StringView)
  765. {
  766. // 1. If the computed flag is set, then throw a NoModificationAllowedError exception.
  767. return WebIDL::NoModificationAllowedError::create(realm(), "Cannot modify properties in result of getComputedStyle()");
  768. }
  769. }