StyleResolver.cpp 26 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623
  1. /*
  2. * Copyright (c) 2018-2020, Andreas Kling <kling@serenityos.org>
  3. * Copyright (c) 2021, the SerenityOS developers.
  4. * Copyright (c) 2021, Sam Atkins <atkinssj@gmail.com>
  5. *
  6. * SPDX-License-Identifier: BSD-2-Clause
  7. */
  8. #include <AK/QuickSort.h>
  9. #include <LibWeb/CSS/CSSStyleRule.h>
  10. #include <LibWeb/CSS/Parser/Parser.h>
  11. #include <LibWeb/CSS/SelectorEngine.h>
  12. #include <LibWeb/CSS/StyleResolver.h>
  13. #include <LibWeb/CSS/StyleSheet.h>
  14. #include <LibWeb/DOM/Document.h>
  15. #include <LibWeb/DOM/Element.h>
  16. #include <LibWeb/Dump.h>
  17. #include <ctype.h>
  18. #include <stdio.h>
  19. namespace Web::CSS {
  20. StyleResolver::StyleResolver(DOM::Document& document)
  21. : m_document(document)
  22. {
  23. }
  24. StyleResolver::~StyleResolver()
  25. {
  26. }
  27. static StyleSheet& default_stylesheet()
  28. {
  29. static StyleSheet* sheet;
  30. if (!sheet) {
  31. extern char const default_stylesheet_source[];
  32. String css = default_stylesheet_source;
  33. sheet = parse_css(CSS::ParsingContext(), css).leak_ref();
  34. }
  35. return *sheet;
  36. }
  37. static StyleSheet& quirks_mode_stylesheet()
  38. {
  39. static StyleSheet* sheet;
  40. if (!sheet) {
  41. extern char const quirks_mode_stylesheet_source[];
  42. String css = quirks_mode_stylesheet_source;
  43. sheet = parse_css(CSS::ParsingContext(), css).leak_ref();
  44. }
  45. return *sheet;
  46. }
  47. template<typename Callback>
  48. void StyleResolver::for_each_stylesheet(Callback callback) const
  49. {
  50. callback(default_stylesheet());
  51. if (document().in_quirks_mode())
  52. callback(quirks_mode_stylesheet());
  53. for (auto& sheet : document().style_sheets().sheets()) {
  54. callback(sheet);
  55. }
  56. }
  57. Vector<MatchingRule> StyleResolver::collect_matching_rules(DOM::Element const& element) const
  58. {
  59. Vector<MatchingRule> matching_rules;
  60. size_t style_sheet_index = 0;
  61. for_each_stylesheet([&](auto& sheet) {
  62. size_t rule_index = 0;
  63. static_cast<CSSStyleSheet const&>(sheet).for_each_effective_style_rule([&](auto& rule) {
  64. size_t selector_index = 0;
  65. for (auto& selector : rule.selectors()) {
  66. if (SelectorEngine::matches(selector, element)) {
  67. matching_rules.append({ rule, style_sheet_index, rule_index, selector_index, selector.specificity() });
  68. break;
  69. }
  70. ++selector_index;
  71. }
  72. ++rule_index;
  73. });
  74. ++style_sheet_index;
  75. });
  76. return matching_rules;
  77. }
  78. void StyleResolver::sort_matching_rules(Vector<MatchingRule>& matching_rules) const
  79. {
  80. quick_sort(matching_rules, [&](MatchingRule& a, MatchingRule& b) {
  81. auto& a_selector = a.rule->selectors()[a.selector_index];
  82. auto& b_selector = b.rule->selectors()[b.selector_index];
  83. auto a_specificity = a_selector.specificity();
  84. auto b_specificity = b_selector.specificity();
  85. if (a_selector.specificity() == b_selector.specificity()) {
  86. if (a.style_sheet_index == b.style_sheet_index)
  87. return a.rule_index < b.rule_index;
  88. return a.style_sheet_index < b.style_sheet_index;
  89. }
  90. return a_specificity < b_specificity;
  91. });
  92. }
  93. bool StyleResolver::is_inherited_property(CSS::PropertyID property_id)
  94. {
  95. static HashTable<CSS::PropertyID> inherited_properties;
  96. if (inherited_properties.is_empty()) {
  97. inherited_properties.set(CSS::PropertyID::BorderCollapse);
  98. inherited_properties.set(CSS::PropertyID::BorderSpacing);
  99. inherited_properties.set(CSS::PropertyID::Color);
  100. inherited_properties.set(CSS::PropertyID::FontFamily);
  101. inherited_properties.set(CSS::PropertyID::FontSize);
  102. inherited_properties.set(CSS::PropertyID::FontStyle);
  103. inherited_properties.set(CSS::PropertyID::FontVariant);
  104. inherited_properties.set(CSS::PropertyID::FontWeight);
  105. inherited_properties.set(CSS::PropertyID::LetterSpacing);
  106. inherited_properties.set(CSS::PropertyID::LineHeight);
  107. inherited_properties.set(CSS::PropertyID::ListStyle);
  108. inherited_properties.set(CSS::PropertyID::ListStyleImage);
  109. inherited_properties.set(CSS::PropertyID::ListStylePosition);
  110. inherited_properties.set(CSS::PropertyID::ListStyleType);
  111. inherited_properties.set(CSS::PropertyID::TextAlign);
  112. inherited_properties.set(CSS::PropertyID::TextIndent);
  113. inherited_properties.set(CSS::PropertyID::TextTransform);
  114. inherited_properties.set(CSS::PropertyID::Visibility);
  115. inherited_properties.set(CSS::PropertyID::WhiteSpace);
  116. inherited_properties.set(CSS::PropertyID::WordSpacing);
  117. // FIXME: This property is not supposed to be inherited, but we currently
  118. // rely on inheritance to propagate decorations into line boxes.
  119. inherited_properties.set(CSS::PropertyID::TextDecorationLine);
  120. }
  121. return inherited_properties.contains(property_id);
  122. }
  123. enum class Edge {
  124. Top,
  125. Right,
  126. Bottom,
  127. Left,
  128. All,
  129. };
  130. static bool contains(Edge a, Edge b)
  131. {
  132. return a == b || b == Edge::All;
  133. }
  134. static void set_property_expanding_shorthands(StyleProperties& style, CSS::PropertyID property_id, StyleValue const& value, DOM::Document& document, bool is_internally_generated_pseudo_property = false)
  135. {
  136. if (is_pseudo_property(property_id) && !is_internally_generated_pseudo_property) {
  137. dbgln("Ignoring non-internally-generated pseudo property: {}", string_from_property_id(property_id));
  138. return;
  139. }
  140. auto assign_edge_values = [&style](PropertyID top_property, PropertyID right_property, PropertyID bottom_property, PropertyID left_property, auto const& values) {
  141. if (values.size() == 4) {
  142. style.set_property(top_property, values[0]);
  143. style.set_property(right_property, values[1]);
  144. style.set_property(bottom_property, values[2]);
  145. style.set_property(left_property, values[3]);
  146. } else if (values.size() == 3) {
  147. style.set_property(top_property, values[0]);
  148. style.set_property(right_property, values[1]);
  149. style.set_property(bottom_property, values[2]);
  150. style.set_property(left_property, values[1]);
  151. } else if (values.size() == 2) {
  152. style.set_property(top_property, values[0]);
  153. style.set_property(right_property, values[1]);
  154. style.set_property(bottom_property, values[0]);
  155. style.set_property(left_property, values[1]);
  156. } else if (values.size() == 1) {
  157. style.set_property(top_property, values[0]);
  158. style.set_property(right_property, values[0]);
  159. style.set_property(bottom_property, values[0]);
  160. style.set_property(left_property, values[0]);
  161. }
  162. };
  163. if (property_id == CSS::PropertyID::TextDecoration) {
  164. if (value.is_text_decoration()) {
  165. auto& text_decoration = static_cast<TextDecorationStyleValue const&>(value);
  166. style.set_property(CSS::PropertyID::TextDecorationLine, text_decoration.line());
  167. style.set_property(CSS::PropertyID::TextDecorationStyle, text_decoration.style());
  168. style.set_property(CSS::PropertyID::TextDecorationColor, text_decoration.color());
  169. return;
  170. }
  171. if (value.is_builtin()) {
  172. style.set_property(CSS::PropertyID::TextDecorationLine, value);
  173. style.set_property(CSS::PropertyID::TextDecorationStyle, value);
  174. style.set_property(CSS::PropertyID::TextDecorationColor, value);
  175. return;
  176. }
  177. return;
  178. }
  179. if (property_id == CSS::PropertyID::Overflow) {
  180. if (value.is_overflow()) {
  181. auto& overflow = static_cast<OverflowStyleValue const&>(value);
  182. style.set_property(CSS::PropertyID::OverflowX, overflow.overflow_x());
  183. style.set_property(CSS::PropertyID::OverflowY, overflow.overflow_y());
  184. return;
  185. }
  186. if (value.is_builtin()) {
  187. style.set_property(CSS::PropertyID::OverflowX, value);
  188. style.set_property(CSS::PropertyID::OverflowY, value);
  189. return;
  190. }
  191. return;
  192. }
  193. if (property_id == CSS::PropertyID::Border) {
  194. set_property_expanding_shorthands(style, CSS::PropertyID::BorderTop, value, document);
  195. set_property_expanding_shorthands(style, CSS::PropertyID::BorderRight, value, document);
  196. set_property_expanding_shorthands(style, CSS::PropertyID::BorderBottom, value, document);
  197. set_property_expanding_shorthands(style, CSS::PropertyID::BorderLeft, value, document);
  198. // FIXME: Also reset border-image, in line with the spec: https://www.w3.org/TR/css-backgrounds-3/#border-shorthands
  199. return;
  200. }
  201. if (property_id == CSS::PropertyID::BorderRadius) {
  202. if (value.is_value_list()) {
  203. auto& values_list = static_cast<StyleValueList const&>(value);
  204. assign_edge_values(PropertyID::BorderTopLeftRadius, PropertyID::BorderTopRightRadius, PropertyID::BorderBottomRightRadius, PropertyID::BorderBottomLeftRadius, values_list.values());
  205. return;
  206. }
  207. if (value.is_builtin()) {
  208. style.set_property(CSS::PropertyID::BorderTopLeftRadius, value);
  209. style.set_property(CSS::PropertyID::BorderTopRightRadius, value);
  210. style.set_property(CSS::PropertyID::BorderBottomRightRadius, value);
  211. style.set_property(CSS::PropertyID::BorderBottomLeftRadius, value);
  212. return;
  213. }
  214. return;
  215. }
  216. if (property_id == CSS::PropertyID::BorderTop
  217. || property_id == CSS::PropertyID::BorderRight
  218. || property_id == CSS::PropertyID::BorderBottom
  219. || property_id == CSS::PropertyID::BorderLeft) {
  220. Edge edge = Edge::All;
  221. switch (property_id) {
  222. case CSS::PropertyID::BorderTop:
  223. edge = Edge::Top;
  224. break;
  225. case CSS::PropertyID::BorderRight:
  226. edge = Edge::Right;
  227. break;
  228. case CSS::PropertyID::BorderBottom:
  229. edge = Edge::Bottom;
  230. break;
  231. case CSS::PropertyID::BorderLeft:
  232. edge = Edge::Left;
  233. break;
  234. default:
  235. break;
  236. }
  237. if (value.is_border()) {
  238. auto& border = static_cast<BorderStyleValue const&>(value);
  239. if (contains(Edge::Top, edge)) {
  240. style.set_property(PropertyID::BorderTopWidth, border.border_width());
  241. style.set_property(PropertyID::BorderTopStyle, border.border_style());
  242. style.set_property(PropertyID::BorderTopColor, border.border_color());
  243. }
  244. if (contains(Edge::Right, edge)) {
  245. style.set_property(PropertyID::BorderRightWidth, border.border_width());
  246. style.set_property(PropertyID::BorderRightStyle, border.border_style());
  247. style.set_property(PropertyID::BorderRightColor, border.border_color());
  248. }
  249. if (contains(Edge::Bottom, edge)) {
  250. style.set_property(PropertyID::BorderBottomWidth, border.border_width());
  251. style.set_property(PropertyID::BorderBottomStyle, border.border_style());
  252. style.set_property(PropertyID::BorderBottomColor, border.border_color());
  253. }
  254. if (contains(Edge::Left, edge)) {
  255. style.set_property(PropertyID::BorderLeftWidth, border.border_width());
  256. style.set_property(PropertyID::BorderLeftStyle, border.border_style());
  257. style.set_property(PropertyID::BorderLeftColor, border.border_color());
  258. }
  259. return;
  260. }
  261. return;
  262. }
  263. if (property_id == CSS::PropertyID::BorderStyle) {
  264. if (value.is_value_list()) {
  265. auto& values_list = static_cast<StyleValueList const&>(value);
  266. assign_edge_values(PropertyID::BorderTopStyle, PropertyID::BorderRightStyle, PropertyID::BorderBottomStyle, PropertyID::BorderLeftStyle, values_list.values());
  267. return;
  268. }
  269. if (value.is_builtin()) {
  270. style.set_property(CSS::PropertyID::BorderTopStyle, value);
  271. style.set_property(CSS::PropertyID::BorderRightStyle, value);
  272. style.set_property(CSS::PropertyID::BorderBottomStyle, value);
  273. style.set_property(CSS::PropertyID::BorderLeftStyle, value);
  274. return;
  275. }
  276. return;
  277. }
  278. if (property_id == CSS::PropertyID::BorderWidth) {
  279. if (value.is_value_list()) {
  280. auto& values_list = static_cast<StyleValueList const&>(value);
  281. assign_edge_values(PropertyID::BorderTopWidth, PropertyID::BorderRightWidth, PropertyID::BorderBottomWidth, PropertyID::BorderLeftWidth, values_list.values());
  282. return;
  283. }
  284. if (value.is_builtin()) {
  285. style.set_property(CSS::PropertyID::BorderTopWidth, value);
  286. style.set_property(CSS::PropertyID::BorderRightWidth, value);
  287. style.set_property(CSS::PropertyID::BorderBottomWidth, value);
  288. style.set_property(CSS::PropertyID::BorderLeftWidth, value);
  289. return;
  290. }
  291. return;
  292. }
  293. if (property_id == CSS::PropertyID::BorderColor) {
  294. if (value.is_value_list()) {
  295. auto& values_list = static_cast<StyleValueList const&>(value);
  296. assign_edge_values(PropertyID::BorderTopColor, PropertyID::BorderRightColor, PropertyID::BorderBottomColor, PropertyID::BorderLeftColor, values_list.values());
  297. return;
  298. }
  299. if (value.is_builtin()) {
  300. style.set_property(CSS::PropertyID::BorderTopColor, value);
  301. style.set_property(CSS::PropertyID::BorderRightColor, value);
  302. style.set_property(CSS::PropertyID::BorderBottomColor, value);
  303. style.set_property(CSS::PropertyID::BorderLeftColor, value);
  304. return;
  305. }
  306. return;
  307. }
  308. if (property_id == CSS::PropertyID::Background) {
  309. auto set_single_background = [&](CSS::BackgroundStyleValue const& background) {
  310. set_property_expanding_shorthands(style, CSS::PropertyID::BackgroundColor, background.color(), document);
  311. set_property_expanding_shorthands(style, CSS::PropertyID::BackgroundImage, background.image(), document);
  312. set_property_expanding_shorthands(style, CSS::PropertyID::BackgroundRepeatX, background.repeat_x(), document, true);
  313. set_property_expanding_shorthands(style, CSS::PropertyID::BackgroundRepeatY, background.repeat_y(), document, true);
  314. };
  315. if (value.is_background()) {
  316. auto& background = static_cast<CSS::BackgroundStyleValue const&>(value);
  317. set_single_background(background);
  318. return;
  319. }
  320. if (value.is_value_list()) {
  321. auto& background_list = static_cast<CSS::StyleValueList const&>(value).values();
  322. // FIXME: Handle multiple backgrounds.
  323. if (!background_list.is_empty()) {
  324. auto& background = background_list.first();
  325. if (background.is_background())
  326. set_single_background(static_cast<CSS::BackgroundStyleValue const&>(background));
  327. }
  328. return;
  329. }
  330. if (value.is_builtin()) {
  331. set_property_expanding_shorthands(style, CSS::PropertyID::BackgroundColor, value, document);
  332. set_property_expanding_shorthands(style, CSS::PropertyID::BackgroundImage, value, document);
  333. set_property_expanding_shorthands(style, CSS::PropertyID::BackgroundRepeatX, value, document, true);
  334. set_property_expanding_shorthands(style, CSS::PropertyID::BackgroundRepeatY, value, document, true);
  335. return;
  336. }
  337. return;
  338. }
  339. if (property_id == CSS::PropertyID::BackgroundImage) {
  340. if (value.is_value_list()) {
  341. auto& background_image_list = static_cast<CSS::StyleValueList const&>(value).values();
  342. // FIXME: Handle multiple backgrounds.
  343. if (!background_image_list.is_empty()) {
  344. auto& background_image = background_image_list.first();
  345. style.set_property(CSS::PropertyID::BackgroundImage, background_image);
  346. }
  347. return;
  348. }
  349. if (value.is_builtin() || value.is_image() || value.to_identifier() == ValueID::None) {
  350. style.set_property(CSS::PropertyID::BackgroundImage, value);
  351. return;
  352. }
  353. return;
  354. }
  355. if (property_id == CSS::PropertyID::BackgroundRepeat) {
  356. if (value.is_value_list()) {
  357. auto& background_repeat_list = static_cast<CSS::StyleValueList const&>(value).values();
  358. // FIXME: Handle multiple backgrounds.
  359. if (!background_repeat_list.is_empty()) {
  360. auto& maybe_background_repeat = background_repeat_list.first();
  361. if (maybe_background_repeat.is_background_repeat()) {
  362. auto& background_repeat = static_cast<BackgroundRepeatStyleValue const&>(maybe_background_repeat);
  363. set_property_expanding_shorthands(style, PropertyID::BackgroundRepeatX, background_repeat.repeat_x(), document, true);
  364. set_property_expanding_shorthands(style, PropertyID::BackgroundRepeatY, background_repeat.repeat_y(), document, true);
  365. }
  366. }
  367. return;
  368. }
  369. if (value.is_background_repeat()) {
  370. auto& background_repeat = static_cast<BackgroundRepeatStyleValue const&>(value);
  371. set_property_expanding_shorthands(style, PropertyID::BackgroundRepeatX, background_repeat.repeat_x(), document, true);
  372. set_property_expanding_shorthands(style, PropertyID::BackgroundRepeatY, background_repeat.repeat_y(), document, true);
  373. return;
  374. }
  375. if (value.is_builtin()) {
  376. set_property_expanding_shorthands(style, PropertyID::BackgroundRepeatX, value, document, true);
  377. set_property_expanding_shorthands(style, PropertyID::BackgroundRepeatY, value, document, true);
  378. return;
  379. }
  380. return;
  381. }
  382. if (property_id == CSS::PropertyID::BackgroundRepeatX || property_id == CSS::PropertyID::BackgroundRepeatY) {
  383. auto value_id = value.to_identifier();
  384. if (value_id == CSS::ValueID::RepeatX || value_id == CSS::ValueID::RepeatY)
  385. return;
  386. style.set_property(property_id, value);
  387. return;
  388. }
  389. if (property_id == CSS::PropertyID::Margin) {
  390. if (value.is_value_list()) {
  391. auto& values_list = static_cast<StyleValueList const&>(value);
  392. assign_edge_values(PropertyID::MarginTop, PropertyID::MarginRight, PropertyID::MarginBottom, PropertyID::MarginLeft, values_list.values());
  393. return;
  394. }
  395. if (value.is_length() || value.is_builtin()) {
  396. style.set_property(CSS::PropertyID::MarginTop, value);
  397. style.set_property(CSS::PropertyID::MarginRight, value);
  398. style.set_property(CSS::PropertyID::MarginBottom, value);
  399. style.set_property(CSS::PropertyID::MarginLeft, value);
  400. return;
  401. }
  402. return;
  403. }
  404. if (property_id == CSS::PropertyID::Padding) {
  405. if (value.is_value_list()) {
  406. auto& values_list = static_cast<StyleValueList const&>(value);
  407. assign_edge_values(PropertyID::PaddingTop, PropertyID::PaddingRight, PropertyID::PaddingBottom, PropertyID::PaddingLeft, values_list.values());
  408. return;
  409. }
  410. if (value.is_length() || value.is_builtin()) {
  411. style.set_property(CSS::PropertyID::PaddingTop, value);
  412. style.set_property(CSS::PropertyID::PaddingRight, value);
  413. style.set_property(CSS::PropertyID::PaddingBottom, value);
  414. style.set_property(CSS::PropertyID::PaddingLeft, value);
  415. return;
  416. }
  417. return;
  418. }
  419. if (property_id == CSS::PropertyID::ListStyle) {
  420. if (value.is_list_style()) {
  421. auto& list_style = static_cast<CSS::ListStyleStyleValue const&>(value);
  422. style.set_property(CSS::PropertyID::ListStylePosition, list_style.position());
  423. style.set_property(CSS::PropertyID::ListStyleImage, list_style.image());
  424. style.set_property(CSS::PropertyID::ListStyleType, list_style.style_type());
  425. return;
  426. }
  427. if (value.is_builtin()) {
  428. style.set_property(CSS::PropertyID::ListStylePosition, value);
  429. style.set_property(CSS::PropertyID::ListStyleImage, value);
  430. style.set_property(CSS::PropertyID::ListStyleType, value);
  431. return;
  432. }
  433. return;
  434. }
  435. if (property_id == CSS::PropertyID::Font) {
  436. if (value.is_font()) {
  437. auto& font_shorthand = static_cast<CSS::FontStyleValue const&>(value);
  438. style.set_property(CSS::PropertyID::FontSize, font_shorthand.font_size());
  439. set_property_expanding_shorthands(style, CSS::PropertyID::FontFamily, *font_shorthand.font_families(), document);
  440. style.set_property(CSS::PropertyID::FontStyle, font_shorthand.font_style());
  441. style.set_property(CSS::PropertyID::FontWeight, font_shorthand.font_weight());
  442. style.set_property(CSS::PropertyID::LineHeight, font_shorthand.line_height());
  443. // FIXME: Implement font-stretch and font-variant
  444. return;
  445. }
  446. if (value.is_builtin()) {
  447. style.set_property(CSS::PropertyID::FontSize, value);
  448. // FIXME: Support multiple font-families
  449. style.set_property(CSS::PropertyID::FontFamily, value);
  450. style.set_property(CSS::PropertyID::FontStyle, value);
  451. style.set_property(CSS::PropertyID::FontWeight, value);
  452. style.set_property(CSS::PropertyID::LineHeight, value);
  453. // FIXME: Implement font-stretch and font-variant
  454. return;
  455. }
  456. return;
  457. }
  458. if (property_id == CSS::PropertyID::FontFamily) {
  459. if (value.is_value_list()) {
  460. auto& values_list = static_cast<StyleValueList const&>(value).values();
  461. // FIXME: Support multiple font-families
  462. if (!values_list.is_empty()) {
  463. style.set_property(CSS::PropertyID::FontFamily, values_list.first());
  464. }
  465. return;
  466. }
  467. if (value.is_builtin() || value.is_string() || value.is_identifier()) {
  468. style.set_property(CSS::PropertyID::FontFamily, value);
  469. return;
  470. }
  471. return;
  472. }
  473. if (property_id == CSS::PropertyID::Flex) {
  474. if (value.is_flex()) {
  475. auto& flex = static_cast<CSS::FlexStyleValue const&>(value);
  476. style.set_property(CSS::PropertyID::FlexGrow, flex.grow());
  477. style.set_property(CSS::PropertyID::FlexShrink, flex.shrink());
  478. style.set_property(CSS::PropertyID::FlexBasis, flex.basis());
  479. return;
  480. }
  481. if (value.is_builtin()) {
  482. style.set_property(CSS::PropertyID::FlexGrow, value);
  483. style.set_property(CSS::PropertyID::FlexShrink, value);
  484. style.set_property(CSS::PropertyID::FlexBasis, value);
  485. return;
  486. }
  487. return;
  488. }
  489. if (property_id == CSS::PropertyID::FlexFlow) {
  490. if (value.is_flex_flow()) {
  491. auto& flex_flow = static_cast<FlexFlowStyleValue const&>(value);
  492. style.set_property(CSS::PropertyID::FlexDirection, flex_flow.flex_direction());
  493. style.set_property(CSS::PropertyID::FlexWrap, flex_flow.flex_wrap());
  494. return;
  495. }
  496. if (value.is_builtin()) {
  497. style.set_property(CSS::PropertyID::FlexDirection, value);
  498. style.set_property(CSS::PropertyID::FlexWrap, value);
  499. return;
  500. }
  501. return;
  502. }
  503. style.set_property(property_id, value);
  504. }
  505. StyleResolver::CustomPropertyResolutionTuple StyleResolver::resolve_custom_property_with_specificity(DOM::Element& element, String const& custom_property_name) const
  506. {
  507. if (auto maybe_property = element.resolve_custom_property(custom_property_name); maybe_property.has_value())
  508. return maybe_property.value();
  509. auto parent_element = element.parent_element();
  510. CustomPropertyResolutionTuple parent_resolved {};
  511. if (parent_element)
  512. parent_resolved = resolve_custom_property_with_specificity(*parent_element, custom_property_name);
  513. auto matching_rules = collect_matching_rules(element);
  514. sort_matching_rules(matching_rules);
  515. for (int i = matching_rules.size() - 1; i >= 0; --i) {
  516. auto& match = matching_rules[i];
  517. if (match.specificity < parent_resolved.specificity)
  518. continue;
  519. auto custom_property_style = match.rule->declaration().custom_property(custom_property_name);
  520. if (custom_property_style.has_value()) {
  521. element.add_custom_property(custom_property_name, { custom_property_style.value(), match.specificity });
  522. return { custom_property_style.value(), match.specificity };
  523. }
  524. }
  525. return parent_resolved;
  526. }
  527. Optional<StyleProperty> StyleResolver::resolve_custom_property(DOM::Element& element, String const& custom_property_name) const
  528. {
  529. auto resolved_with_specificity = resolve_custom_property_with_specificity(element, custom_property_name);
  530. return resolved_with_specificity.style;
  531. }
  532. NonnullRefPtr<StyleProperties> StyleResolver::resolve_style(DOM::Element& element) const
  533. {
  534. auto style = StyleProperties::create();
  535. if (auto* parent_style = element.parent_element() ? element.parent_element()->specified_css_values() : nullptr) {
  536. parent_style->for_each_property([&](auto property_id, auto& value) {
  537. if (is_inherited_property(property_id))
  538. set_property_expanding_shorthands(style, property_id, value, m_document);
  539. });
  540. }
  541. element.apply_presentational_hints(*style);
  542. auto matching_rules = collect_matching_rules(element);
  543. sort_matching_rules(matching_rules);
  544. for (auto& match : matching_rules) {
  545. for (auto& property : match.rule->declaration().properties()) {
  546. auto property_value = property.value;
  547. if (property.value->is_custom_property()) {
  548. auto prop = reinterpret_cast<CSS::CustomStyleValue const*>(property.value.ptr());
  549. auto custom_prop_name = prop->custom_property_name();
  550. auto resolved = resolve_custom_property(element, custom_prop_name);
  551. if (resolved.has_value()) {
  552. property_value = resolved.value().value;
  553. }
  554. }
  555. set_property_expanding_shorthands(style, property.property_id, property_value, m_document);
  556. }
  557. }
  558. if (auto* inline_style = element.inline_style()) {
  559. for (auto& property : inline_style->properties()) {
  560. set_property_expanding_shorthands(style, property.property_id, property.value, m_document);
  561. }
  562. }
  563. return style;
  564. }
  565. }