StyleResolver.cpp 35 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799
  1. /*
  2. * Copyright (c) 2018-2020, Andreas Kling <kling@serenityos.org>
  3. * Copyright (c) 2021, the SerenityOS developers.
  4. *
  5. * SPDX-License-Identifier: BSD-2-Clause
  6. */
  7. #include <AK/QuickSort.h>
  8. #include <LibWeb/CSS/CSSStyleRule.h>
  9. #include <LibWeb/CSS/Parser/DeprecatedCSSParser.h>
  10. #include <LibWeb/CSS/SelectorEngine.h>
  11. #include <LibWeb/CSS/StyleResolver.h>
  12. #include <LibWeb/CSS/StyleSheet.h>
  13. #include <LibWeb/DOM/Document.h>
  14. #include <LibWeb/DOM/Element.h>
  15. #include <LibWeb/Dump.h>
  16. #include <ctype.h>
  17. #include <stdio.h>
  18. namespace Web::CSS {
  19. StyleResolver::StyleResolver(DOM::Document& document)
  20. : m_document(document)
  21. {
  22. }
  23. StyleResolver::~StyleResolver()
  24. {
  25. }
  26. static StyleSheet& default_stylesheet()
  27. {
  28. static StyleSheet* sheet;
  29. if (!sheet) {
  30. extern const char default_stylesheet_source[];
  31. String css = default_stylesheet_source;
  32. sheet = parse_css(CSS::ParsingContext(), css).leak_ref();
  33. }
  34. return *sheet;
  35. }
  36. static StyleSheet& quirks_mode_stylesheet()
  37. {
  38. static StyleSheet* sheet;
  39. if (!sheet) {
  40. extern const char quirks_mode_stylesheet_source[];
  41. String css = quirks_mode_stylesheet_source;
  42. sheet = parse_css(CSS::ParsingContext(), css).leak_ref();
  43. }
  44. return *sheet;
  45. }
  46. template<typename Callback>
  47. void StyleResolver::for_each_stylesheet(Callback callback) const
  48. {
  49. callback(default_stylesheet());
  50. if (document().in_quirks_mode())
  51. callback(quirks_mode_stylesheet());
  52. for (auto& sheet : document().style_sheets().sheets()) {
  53. callback(sheet);
  54. }
  55. }
  56. Vector<MatchingRule> StyleResolver::collect_matching_rules(const DOM::Element& element) const
  57. {
  58. Vector<MatchingRule> matching_rules;
  59. size_t style_sheet_index = 0;
  60. for_each_stylesheet([&](auto& sheet) {
  61. if (!is<CSSStyleSheet>(sheet))
  62. return;
  63. size_t rule_index = 0;
  64. static_cast<const CSSStyleSheet&>(sheet).for_each_effective_style_rule([&](auto& rule) {
  65. size_t selector_index = 0;
  66. for (auto& selector : rule.selectors()) {
  67. if (SelectorEngine::matches(selector, element)) {
  68. matching_rules.append({ rule, style_sheet_index, rule_index, selector_index, selector.specificity() });
  69. break;
  70. }
  71. ++selector_index;
  72. }
  73. ++rule_index;
  74. });
  75. ++style_sheet_index;
  76. });
  77. return matching_rules;
  78. }
  79. void StyleResolver::sort_matching_rules(Vector<MatchingRule>& matching_rules) const
  80. {
  81. quick_sort(matching_rules, [&](MatchingRule& a, MatchingRule& b) {
  82. auto& a_selector = a.rule->selectors()[a.selector_index];
  83. auto& b_selector = b.rule->selectors()[b.selector_index];
  84. auto a_specificity = a_selector.specificity();
  85. auto b_specificity = b_selector.specificity();
  86. if (a_selector.specificity() == b_selector.specificity()) {
  87. if (a.style_sheet_index == b.style_sheet_index)
  88. return a.rule_index < b.rule_index;
  89. return a.style_sheet_index < b.style_sheet_index;
  90. }
  91. return a_specificity < b_specificity;
  92. });
  93. }
  94. bool StyleResolver::is_inherited_property(CSS::PropertyID property_id)
  95. {
  96. static HashTable<CSS::PropertyID> inherited_properties;
  97. if (inherited_properties.is_empty()) {
  98. inherited_properties.set(CSS::PropertyID::BorderCollapse);
  99. inherited_properties.set(CSS::PropertyID::BorderSpacing);
  100. inherited_properties.set(CSS::PropertyID::Color);
  101. inherited_properties.set(CSS::PropertyID::FontFamily);
  102. inherited_properties.set(CSS::PropertyID::FontSize);
  103. inherited_properties.set(CSS::PropertyID::FontStyle);
  104. inherited_properties.set(CSS::PropertyID::FontVariant);
  105. inherited_properties.set(CSS::PropertyID::FontWeight);
  106. inherited_properties.set(CSS::PropertyID::LetterSpacing);
  107. inherited_properties.set(CSS::PropertyID::LineHeight);
  108. inherited_properties.set(CSS::PropertyID::ListStyle);
  109. inherited_properties.set(CSS::PropertyID::ListStyleImage);
  110. inherited_properties.set(CSS::PropertyID::ListStylePosition);
  111. inherited_properties.set(CSS::PropertyID::ListStyleType);
  112. inherited_properties.set(CSS::PropertyID::TextAlign);
  113. inherited_properties.set(CSS::PropertyID::TextIndent);
  114. inherited_properties.set(CSS::PropertyID::TextTransform);
  115. inherited_properties.set(CSS::PropertyID::Visibility);
  116. inherited_properties.set(CSS::PropertyID::WhiteSpace);
  117. inherited_properties.set(CSS::PropertyID::WordSpacing);
  118. // FIXME: This property is not supposed to be inherited, but we currently
  119. // rely on inheritance to propagate decorations into line boxes.
  120. inherited_properties.set(CSS::PropertyID::TextDecorationLine);
  121. }
  122. return inherited_properties.contains(property_id);
  123. }
  124. static Vector<String> split_on_whitespace(const StringView& string)
  125. {
  126. if (string.is_empty())
  127. return {};
  128. Vector<String> v;
  129. size_t substart = 0;
  130. for (size_t i = 0; i < string.length(); ++i) {
  131. char ch = string.characters_without_null_termination()[i];
  132. if (isspace(ch)) {
  133. size_t sublen = i - substart;
  134. if (sublen != 0)
  135. v.append(string.substring_view(substart, sublen));
  136. substart = i + 1;
  137. }
  138. }
  139. size_t taillen = string.length() - substart;
  140. if (taillen != 0)
  141. v.append(string.substring_view(substart, taillen));
  142. return v;
  143. }
  144. enum class Edge {
  145. Top,
  146. Right,
  147. Bottom,
  148. Left,
  149. All,
  150. };
  151. static bool contains(Edge a, Edge b)
  152. {
  153. return a == b || b == Edge::All;
  154. }
  155. static inline void set_property_border_width(StyleProperties& style, const StyleValue& value, Edge edge)
  156. {
  157. VERIFY(value.is_length());
  158. if (contains(Edge::Top, edge))
  159. style.set_property(CSS::PropertyID::BorderTopWidth, value);
  160. if (contains(Edge::Right, edge))
  161. style.set_property(CSS::PropertyID::BorderRightWidth, value);
  162. if (contains(Edge::Bottom, edge))
  163. style.set_property(CSS::PropertyID::BorderBottomWidth, value);
  164. if (contains(Edge::Left, edge))
  165. style.set_property(CSS::PropertyID::BorderLeftWidth, value);
  166. }
  167. static inline void set_property_border_color(StyleProperties& style, const StyleValue& value, Edge edge)
  168. {
  169. VERIFY(value.is_color());
  170. if (contains(Edge::Top, edge))
  171. style.set_property(CSS::PropertyID::BorderTopColor, value);
  172. if (contains(Edge::Right, edge))
  173. style.set_property(CSS::PropertyID::BorderRightColor, value);
  174. if (contains(Edge::Bottom, edge))
  175. style.set_property(CSS::PropertyID::BorderBottomColor, value);
  176. if (contains(Edge::Left, edge))
  177. style.set_property(CSS::PropertyID::BorderLeftColor, value);
  178. }
  179. static inline void set_property_border_style(StyleProperties& style, const StyleValue& value, Edge edge)
  180. {
  181. VERIFY(value.type() == CSS::StyleValue::Type::Identifier);
  182. if (contains(Edge::Top, edge))
  183. style.set_property(CSS::PropertyID::BorderTopStyle, value);
  184. if (contains(Edge::Right, edge))
  185. style.set_property(CSS::PropertyID::BorderRightStyle, value);
  186. if (contains(Edge::Bottom, edge))
  187. style.set_property(CSS::PropertyID::BorderBottomStyle, value);
  188. if (contains(Edge::Left, edge))
  189. style.set_property(CSS::PropertyID::BorderLeftStyle, value);
  190. }
  191. static inline bool is_background_repeat_property(const StyleValue& value)
  192. {
  193. if (!value.is_identifier())
  194. return false;
  195. switch (value.to_identifier()) {
  196. case CSS::ValueID::NoRepeat:
  197. case CSS::ValueID::Repeat:
  198. case CSS::ValueID::RepeatX:
  199. case CSS::ValueID::RepeatY:
  200. case CSS::ValueID::Round:
  201. case CSS::ValueID::Space:
  202. return true;
  203. default:
  204. return false;
  205. }
  206. }
  207. static void set_property_expanding_shorthands(StyleProperties& style, CSS::PropertyID property_id, const StyleValue& value, DOM::Document& document, bool is_internally_generated_pseudo_property = false)
  208. {
  209. CSS::ParsingContext context(document);
  210. if (is_pseudo_property(property_id) && !is_internally_generated_pseudo_property) {
  211. dbgln("Ignoring non-internally-generated pseudo property: {}", string_from_property_id(property_id));
  212. return;
  213. }
  214. if (property_id == CSS::PropertyID::TextDecoration) {
  215. switch (value.to_identifier()) {
  216. case CSS::ValueID::None:
  217. case CSS::ValueID::Underline:
  218. case CSS::ValueID::Overline:
  219. case CSS::ValueID::LineThrough:
  220. case CSS::ValueID::Blink:
  221. set_property_expanding_shorthands(style, CSS::PropertyID::TextDecorationLine, value, document);
  222. default:
  223. break;
  224. }
  225. return;
  226. }
  227. if (property_id == CSS::PropertyID::Overflow) {
  228. style.set_property(CSS::PropertyID::OverflowX, value);
  229. style.set_property(CSS::PropertyID::OverflowY, value);
  230. return;
  231. }
  232. if (property_id == CSS::PropertyID::Border) {
  233. set_property_expanding_shorthands(style, CSS::PropertyID::BorderTop, value, document);
  234. set_property_expanding_shorthands(style, CSS::PropertyID::BorderRight, value, document);
  235. set_property_expanding_shorthands(style, CSS::PropertyID::BorderBottom, value, document);
  236. set_property_expanding_shorthands(style, CSS::PropertyID::BorderLeft, value, document);
  237. return;
  238. }
  239. if (property_id == CSS::PropertyID::BorderRadius) {
  240. // FIXME: Allow for two values per corner to support elliptical radii.
  241. // FIXME: Add support the '/' to specify elliptical radii.
  242. if (value.is_length()) {
  243. style.set_property(CSS::PropertyID::BorderTopLeftRadius, value);
  244. style.set_property(CSS::PropertyID::BorderTopRightRadius, value);
  245. style.set_property(CSS::PropertyID::BorderBottomRightRadius, value);
  246. style.set_property(CSS::PropertyID::BorderBottomLeftRadius, value);
  247. return;
  248. }
  249. if (value.is_string()) {
  250. auto parts = split_on_whitespace(value.to_string());
  251. if (value.is_string() && parts.size() == 2) {
  252. auto diagonal1 = parse_css_value(context, parts[0]);
  253. auto diagonal2 = parse_css_value(context, parts[1]);
  254. if (diagonal1 && diagonal2) {
  255. style.set_property(CSS::PropertyID::BorderTopLeftRadius, *diagonal1);
  256. style.set_property(CSS::PropertyID::BorderBottomRightRadius, *diagonal1);
  257. style.set_property(CSS::PropertyID::BorderTopRightRadius, *diagonal2);
  258. style.set_property(CSS::PropertyID::BorderBottomLeftRadius, *diagonal2);
  259. }
  260. return;
  261. }
  262. if (value.is_string() && parts.size() == 3) {
  263. auto top_left = parse_css_value(context, parts[0]);
  264. auto diagonal = parse_css_value(context, parts[1]);
  265. auto bottom_right = parse_css_value(context, parts[2]);
  266. if (top_left && diagonal && bottom_right) {
  267. style.set_property(CSS::PropertyID::BorderTopLeftRadius, *top_left);
  268. style.set_property(CSS::PropertyID::BorderBottomRightRadius, *bottom_right);
  269. style.set_property(CSS::PropertyID::BorderTopRightRadius, *diagonal);
  270. style.set_property(CSS::PropertyID::BorderBottomLeftRadius, *diagonal);
  271. }
  272. return;
  273. }
  274. if (value.is_string() && parts.size() == 4) {
  275. auto top_left = parse_css_value(context, parts[0]);
  276. auto top_right = parse_css_value(context, parts[1]);
  277. auto bottom_right = parse_css_value(context, parts[2]);
  278. auto bottom_left = parse_css_value(context, parts[3]);
  279. if (top_left && top_right && bottom_right && bottom_left) {
  280. style.set_property(CSS::PropertyID::BorderTopLeftRadius, *top_left);
  281. style.set_property(CSS::PropertyID::BorderBottomRightRadius, *bottom_right);
  282. style.set_property(CSS::PropertyID::BorderTopRightRadius, *top_right);
  283. style.set_property(CSS::PropertyID::BorderBottomLeftRadius, *bottom_left);
  284. }
  285. return;
  286. }
  287. dbgln("Unsure what to do with CSS border-radius value '{}'", value.to_string());
  288. return;
  289. }
  290. return;
  291. }
  292. if (property_id == CSS::PropertyID::BorderTop
  293. || property_id == CSS::PropertyID::BorderRight
  294. || property_id == CSS::PropertyID::BorderBottom
  295. || property_id == CSS::PropertyID::BorderLeft) {
  296. Edge edge = Edge::All;
  297. switch (property_id) {
  298. case CSS::PropertyID::BorderTop:
  299. edge = Edge::Top;
  300. break;
  301. case CSS::PropertyID::BorderRight:
  302. edge = Edge::Right;
  303. break;
  304. case CSS::PropertyID::BorderBottom:
  305. edge = Edge::Bottom;
  306. break;
  307. case CSS::PropertyID::BorderLeft:
  308. edge = Edge::Left;
  309. break;
  310. default:
  311. break;
  312. }
  313. auto parts = split_on_whitespace(value.to_string());
  314. if (value.is_length()) {
  315. set_property_border_width(style, value, edge);
  316. return;
  317. }
  318. if (value.is_color()) {
  319. set_property_border_color(style, value, edge);
  320. return;
  321. }
  322. if (value.is_string()) {
  323. auto parts = split_on_whitespace(value.to_string());
  324. if (parts.size() == 1) {
  325. if (auto value = parse_line_style(context, parts[0])) {
  326. set_property_border_style(style, value.release_nonnull(), edge);
  327. set_property_border_color(style, ColorStyleValue::create(Gfx::Color::Black), edge);
  328. set_property_border_width(style, LengthStyleValue::create(Length(3, Length::Type::Px)), edge);
  329. return;
  330. }
  331. }
  332. RefPtr<LengthStyleValue> line_width_value;
  333. RefPtr<ColorStyleValue> color_value;
  334. RefPtr<IdentifierStyleValue> line_style_value;
  335. for (auto& part : parts) {
  336. if (auto value = parse_line_width(context, part)) {
  337. if (line_width_value)
  338. return;
  339. line_width_value = move(value);
  340. continue;
  341. }
  342. if (auto value = parse_color(context, part)) {
  343. if (color_value)
  344. return;
  345. color_value = move(value);
  346. continue;
  347. }
  348. if (auto value = parse_line_style(context, part)) {
  349. if (line_style_value)
  350. return;
  351. line_style_value = move(value);
  352. continue;
  353. }
  354. }
  355. if (line_width_value)
  356. set_property_border_width(style, line_width_value.release_nonnull(), edge);
  357. if (color_value)
  358. set_property_border_color(style, color_value.release_nonnull(), edge);
  359. if (line_style_value)
  360. set_property_border_style(style, line_style_value.release_nonnull(), edge);
  361. return;
  362. }
  363. return;
  364. }
  365. if (property_id == CSS::PropertyID::BorderStyle) {
  366. auto parts = split_on_whitespace(value.to_string());
  367. if (value.is_string() && parts.size() == 4) {
  368. auto top = parse_css_value(context, parts[0]);
  369. auto right = parse_css_value(context, parts[1]);
  370. auto bottom = parse_css_value(context, parts[2]);
  371. auto left = parse_css_value(context, parts[3]);
  372. if (top && right && bottom && left) {
  373. style.set_property(CSS::PropertyID::BorderTopStyle, *top);
  374. style.set_property(CSS::PropertyID::BorderRightStyle, *right);
  375. style.set_property(CSS::PropertyID::BorderBottomStyle, *bottom);
  376. style.set_property(CSS::PropertyID::BorderLeftStyle, *left);
  377. }
  378. } else if (value.is_string() && parts.size() == 3) {
  379. auto top = parse_css_value(context, parts[0]);
  380. auto right = parse_css_value(context, parts[1]);
  381. auto bottom = parse_css_value(context, parts[2]);
  382. auto left = parse_css_value(context, parts[1]);
  383. if (top && right && bottom && left) {
  384. style.set_property(CSS::PropertyID::BorderTopStyle, *top);
  385. style.set_property(CSS::PropertyID::BorderRightStyle, *right);
  386. style.set_property(CSS::PropertyID::BorderBottomStyle, *bottom);
  387. style.set_property(CSS::PropertyID::BorderLeftStyle, *left);
  388. }
  389. } else if (value.is_string() && parts.size() == 2) {
  390. auto vertical = parse_css_value(context, parts[0]);
  391. auto horizontal = parse_css_value(context, parts[1]);
  392. if (vertical && horizontal) {
  393. style.set_property(CSS::PropertyID::BorderTopStyle, *vertical);
  394. style.set_property(CSS::PropertyID::BorderRightStyle, *horizontal);
  395. style.set_property(CSS::PropertyID::BorderBottomStyle, *vertical);
  396. style.set_property(CSS::PropertyID::BorderLeftStyle, *horizontal);
  397. }
  398. } else {
  399. style.set_property(CSS::PropertyID::BorderTopStyle, value);
  400. style.set_property(CSS::PropertyID::BorderRightStyle, value);
  401. style.set_property(CSS::PropertyID::BorderBottomStyle, value);
  402. style.set_property(CSS::PropertyID::BorderLeftStyle, value);
  403. }
  404. return;
  405. }
  406. if (property_id == CSS::PropertyID::BorderWidth) {
  407. auto parts = split_on_whitespace(value.to_string());
  408. if (value.is_string() && parts.size() == 4) {
  409. auto top_border_width = parse_css_value(context, parts[0]);
  410. auto right_border_width = parse_css_value(context, parts[1]);
  411. auto bottom_border_width = parse_css_value(context, parts[2]);
  412. auto left_border_width = parse_css_value(context, parts[3]);
  413. if (top_border_width && right_border_width && bottom_border_width && left_border_width) {
  414. style.set_property(CSS::PropertyID::BorderTopWidth, *top_border_width);
  415. style.set_property(CSS::PropertyID::BorderRightWidth, *right_border_width);
  416. style.set_property(CSS::PropertyID::BorderBottomWidth, *bottom_border_width);
  417. style.set_property(CSS::PropertyID::BorderLeftWidth, *left_border_width);
  418. }
  419. } else if (value.is_string() && parts.size() == 3) {
  420. auto top_border_width = parse_css_value(context, parts[0]);
  421. auto horizontal_border_width = parse_css_value(context, parts[1]);
  422. auto bottom_border_width = parse_css_value(context, parts[2]);
  423. if (top_border_width && horizontal_border_width && bottom_border_width) {
  424. style.set_property(CSS::PropertyID::BorderTopWidth, *top_border_width);
  425. style.set_property(CSS::PropertyID::BorderRightWidth, *horizontal_border_width);
  426. style.set_property(CSS::PropertyID::BorderBottomWidth, *bottom_border_width);
  427. style.set_property(CSS::PropertyID::BorderLeftWidth, *horizontal_border_width);
  428. }
  429. } else if (value.is_string() && parts.size() == 2) {
  430. auto vertical_border_width = parse_css_value(context, parts[0]);
  431. auto horizontal_border_width = parse_css_value(context, parts[1]);
  432. if (vertical_border_width && horizontal_border_width) {
  433. style.set_property(CSS::PropertyID::BorderTopWidth, *vertical_border_width);
  434. style.set_property(CSS::PropertyID::BorderRightWidth, *horizontal_border_width);
  435. style.set_property(CSS::PropertyID::BorderBottomWidth, *vertical_border_width);
  436. style.set_property(CSS::PropertyID::BorderLeftWidth, *horizontal_border_width);
  437. }
  438. } else {
  439. style.set_property(CSS::PropertyID::BorderTopWidth, value);
  440. style.set_property(CSS::PropertyID::BorderRightWidth, value);
  441. style.set_property(CSS::PropertyID::BorderBottomWidth, value);
  442. style.set_property(CSS::PropertyID::BorderLeftWidth, value);
  443. }
  444. return;
  445. }
  446. if (property_id == CSS::PropertyID::BorderColor) {
  447. auto parts = split_on_whitespace(value.to_string());
  448. if (value.is_string() && parts.size() == 4) {
  449. auto top = parse_css_value(context, parts[0]);
  450. auto right = parse_css_value(context, parts[1]);
  451. auto bottom = parse_css_value(context, parts[2]);
  452. auto left = parse_css_value(context, parts[3]);
  453. if (top && right && bottom && left) {
  454. style.set_property(CSS::PropertyID::BorderTopColor, *top);
  455. style.set_property(CSS::PropertyID::BorderRightColor, *right);
  456. style.set_property(CSS::PropertyID::BorderBottomColor, *bottom);
  457. style.set_property(CSS::PropertyID::BorderLeftColor, *left);
  458. }
  459. } else if (value.is_string() && parts.size() == 3) {
  460. auto top = parse_css_value(context, parts[0]);
  461. auto horizontal = parse_css_value(context, parts[1]);
  462. auto bottom = parse_css_value(context, parts[2]);
  463. if (top && horizontal && bottom) {
  464. style.set_property(CSS::PropertyID::BorderTopColor, *top);
  465. style.set_property(CSS::PropertyID::BorderRightColor, *horizontal);
  466. style.set_property(CSS::PropertyID::BorderBottomColor, *bottom);
  467. style.set_property(CSS::PropertyID::BorderLeftColor, *horizontal);
  468. }
  469. } else if (value.is_string() && parts.size() == 2) {
  470. auto vertical = parse_css_value(context, parts[0]);
  471. auto horizontal = parse_css_value(context, parts[1]);
  472. if (vertical && horizontal) {
  473. style.set_property(CSS::PropertyID::BorderTopColor, *vertical);
  474. style.set_property(CSS::PropertyID::BorderRightColor, *horizontal);
  475. style.set_property(CSS::PropertyID::BorderBottomColor, *vertical);
  476. style.set_property(CSS::PropertyID::BorderLeftColor, *horizontal);
  477. }
  478. } else {
  479. style.set_property(CSS::PropertyID::BorderTopColor, value);
  480. style.set_property(CSS::PropertyID::BorderRightColor, value);
  481. style.set_property(CSS::PropertyID::BorderBottomColor, value);
  482. style.set_property(CSS::PropertyID::BorderLeftColor, value);
  483. }
  484. return;
  485. }
  486. if (property_id == CSS::PropertyID::Background) {
  487. if (value.is_identifier() && static_cast<const IdentifierStyleValue&>(value).id() == CSS::ValueID::None) {
  488. style.set_property(CSS::PropertyID::BackgroundColor, ColorStyleValue::create(Color::Transparent));
  489. return;
  490. }
  491. auto parts = split_on_whitespace(value.to_string());
  492. NonnullRefPtrVector<StyleValue> values;
  493. for (auto& part : parts) {
  494. auto value = parse_css_value(context, part);
  495. if (!value)
  496. return;
  497. values.append(value.release_nonnull());
  498. }
  499. // HACK: Disallow more than one color value in a 'background' shorthand
  500. size_t color_value_count = 0;
  501. for (auto& value : values)
  502. color_value_count += value.is_color();
  503. if (values[0].is_color() && color_value_count == 1)
  504. style.set_property(CSS::PropertyID::BackgroundColor, values[0]);
  505. for (auto it = values.begin(); it != values.end(); ++it) {
  506. auto& value = *it;
  507. if (is_background_repeat_property(value)) {
  508. if ((it + 1 != values.end()) && is_background_repeat_property(*(it + 1))) {
  509. ++it;
  510. set_property_expanding_shorthands(style, CSS::PropertyID::BackgroundRepeatX, value, document, true);
  511. set_property_expanding_shorthands(style, CSS::PropertyID::BackgroundRepeatY, *it, document, true);
  512. } else {
  513. set_property_expanding_shorthands(style, CSS::PropertyID::BackgroundRepeat, value, document);
  514. }
  515. }
  516. if (!value.is_string())
  517. continue;
  518. set_property_expanding_shorthands(style, CSS::PropertyID::BackgroundImage, value, document);
  519. }
  520. return;
  521. }
  522. if (property_id == CSS::PropertyID::BackgroundImage) {
  523. if (!value.is_string())
  524. return;
  525. auto string = value.to_string();
  526. if (!string.starts_with("url("))
  527. return;
  528. if (!string.ends_with(')'))
  529. return;
  530. auto url = string.substring_view(4, string.length() - 5);
  531. if (url.length() >= 2 && url.starts_with('"') && url.ends_with('"'))
  532. url = url.substring_view(1, url.length() - 2);
  533. else if (url.length() >= 2 && url.starts_with('\'') && url.ends_with('\''))
  534. url = url.substring_view(1, url.length() - 2);
  535. auto background_image_value = ImageStyleValue::create(document.complete_url(url), document);
  536. style.set_property(CSS::PropertyID::BackgroundImage, move(background_image_value));
  537. return;
  538. }
  539. if (property_id == CSS::PropertyID::BackgroundRepeat) {
  540. auto parts = split_on_whitespace(value.to_string());
  541. NonnullRefPtrVector<StyleValue> values;
  542. for (auto& part : parts) {
  543. auto value = parse_css_value(context, part);
  544. if (!value || !is_background_repeat_property(*value))
  545. return;
  546. values.append(value.release_nonnull());
  547. }
  548. if (values.size() == 1) {
  549. auto value_id = values[0].to_identifier();
  550. if (value_id == CSS::ValueID::RepeatX || value_id == CSS::ValueID::RepeatY) {
  551. auto repeat_x = IdentifierStyleValue::create(value_id == CSS::ValueID::RepeatX ? CSS::ValueID::Repeat : CSS::ValueID::NoRepeat);
  552. auto repeat_y = IdentifierStyleValue::create(value_id == CSS::ValueID::RepeatX ? CSS::ValueID::NoRepeat : CSS::ValueID::Repeat);
  553. set_property_expanding_shorthands(style, CSS::PropertyID::BackgroundRepeatX, repeat_x, document, true);
  554. set_property_expanding_shorthands(style, CSS::PropertyID::BackgroundRepeatY, repeat_y, document, true);
  555. } else {
  556. set_property_expanding_shorthands(style, CSS::PropertyID::BackgroundRepeatX, values[0], document, true);
  557. set_property_expanding_shorthands(style, CSS::PropertyID::BackgroundRepeatY, values[0], document, true);
  558. }
  559. } else if (values.size() == 2) {
  560. set_property_expanding_shorthands(style, CSS::PropertyID::BackgroundRepeatX, values[0], document, true);
  561. set_property_expanding_shorthands(style, CSS::PropertyID::BackgroundRepeatY, values[1], document, true);
  562. }
  563. return;
  564. }
  565. if (property_id == CSS::PropertyID::BackgroundRepeatX || property_id == CSS::PropertyID::BackgroundRepeatY) {
  566. auto value_id = value.to_identifier();
  567. if (value_id == CSS::ValueID::RepeatX || value_id == CSS::ValueID::RepeatY)
  568. return;
  569. style.set_property(property_id, value);
  570. return;
  571. }
  572. if (property_id == CSS::PropertyID::Margin) {
  573. if (value.is_length()) {
  574. style.set_property(CSS::PropertyID::MarginTop, value);
  575. style.set_property(CSS::PropertyID::MarginRight, value);
  576. style.set_property(CSS::PropertyID::MarginBottom, value);
  577. style.set_property(CSS::PropertyID::MarginLeft, value);
  578. return;
  579. }
  580. if (value.is_string()) {
  581. auto parts = split_on_whitespace(value.to_string());
  582. if (value.is_string() && parts.size() == 2) {
  583. auto vertical = parse_css_value(context, parts[0]);
  584. auto horizontal = parse_css_value(context, parts[1]);
  585. if (vertical && horizontal) {
  586. style.set_property(CSS::PropertyID::MarginTop, *vertical);
  587. style.set_property(CSS::PropertyID::MarginBottom, *vertical);
  588. style.set_property(CSS::PropertyID::MarginLeft, *horizontal);
  589. style.set_property(CSS::PropertyID::MarginRight, *horizontal);
  590. }
  591. return;
  592. }
  593. if (value.is_string() && parts.size() == 3) {
  594. auto top = parse_css_value(context, parts[0]);
  595. auto horizontal = parse_css_value(context, parts[1]);
  596. auto bottom = parse_css_value(context, parts[2]);
  597. if (top && horizontal && bottom) {
  598. style.set_property(CSS::PropertyID::MarginTop, *top);
  599. style.set_property(CSS::PropertyID::MarginBottom, *bottom);
  600. style.set_property(CSS::PropertyID::MarginLeft, *horizontal);
  601. style.set_property(CSS::PropertyID::MarginRight, *horizontal);
  602. }
  603. return;
  604. }
  605. if (value.is_string() && parts.size() == 4) {
  606. auto top = parse_css_value(context, parts[0]);
  607. auto right = parse_css_value(context, parts[1]);
  608. auto bottom = parse_css_value(context, parts[2]);
  609. auto left = parse_css_value(context, parts[3]);
  610. if (top && right && bottom && left) {
  611. style.set_property(CSS::PropertyID::MarginTop, *top);
  612. style.set_property(CSS::PropertyID::MarginBottom, *bottom);
  613. style.set_property(CSS::PropertyID::MarginLeft, *left);
  614. style.set_property(CSS::PropertyID::MarginRight, *right);
  615. }
  616. return;
  617. }
  618. dbgln("Unsure what to do with CSS margin value '{}'", value.to_string());
  619. return;
  620. }
  621. return;
  622. }
  623. if (property_id == CSS::PropertyID::Padding) {
  624. if (value.is_length()) {
  625. style.set_property(CSS::PropertyID::PaddingTop, value);
  626. style.set_property(CSS::PropertyID::PaddingRight, value);
  627. style.set_property(CSS::PropertyID::PaddingBottom, value);
  628. style.set_property(CSS::PropertyID::PaddingLeft, value);
  629. return;
  630. }
  631. if (value.is_string()) {
  632. auto parts = split_on_whitespace(value.to_string());
  633. if (value.is_string() && parts.size() == 2) {
  634. auto vertical = parse_css_value(context, parts[0]);
  635. auto horizontal = parse_css_value(context, parts[1]);
  636. if (vertical && horizontal) {
  637. style.set_property(CSS::PropertyID::PaddingTop, *vertical);
  638. style.set_property(CSS::PropertyID::PaddingBottom, *vertical);
  639. style.set_property(CSS::PropertyID::PaddingLeft, *horizontal);
  640. style.set_property(CSS::PropertyID::PaddingRight, *horizontal);
  641. }
  642. return;
  643. }
  644. if (value.is_string() && parts.size() == 3) {
  645. auto top = parse_css_value(context, parts[0]);
  646. auto horizontal = parse_css_value(context, parts[1]);
  647. auto bottom = parse_css_value(context, parts[2]);
  648. if (top && bottom && horizontal) {
  649. style.set_property(CSS::PropertyID::PaddingTop, *top);
  650. style.set_property(CSS::PropertyID::PaddingBottom, *bottom);
  651. style.set_property(CSS::PropertyID::PaddingLeft, *horizontal);
  652. style.set_property(CSS::PropertyID::PaddingRight, *horizontal);
  653. }
  654. return;
  655. }
  656. if (value.is_string() && parts.size() == 4) {
  657. auto top = parse_css_value(context, parts[0]);
  658. auto right = parse_css_value(context, parts[1]);
  659. auto bottom = parse_css_value(context, parts[2]);
  660. auto left = parse_css_value(context, parts[3]);
  661. if (top && bottom && left && right) {
  662. style.set_property(CSS::PropertyID::PaddingTop, *top);
  663. style.set_property(CSS::PropertyID::PaddingBottom, *bottom);
  664. style.set_property(CSS::PropertyID::PaddingLeft, *left);
  665. style.set_property(CSS::PropertyID::PaddingRight, *right);
  666. }
  667. return;
  668. }
  669. dbgln("Unsure what to do with CSS padding value '{}'", value.to_string());
  670. return;
  671. }
  672. return;
  673. }
  674. if (property_id == CSS::PropertyID::ListStyle) {
  675. auto parts = split_on_whitespace(value.to_string());
  676. if (!parts.is_empty()) {
  677. auto value = parse_css_value(context, parts[0]);
  678. if (!value)
  679. return;
  680. style.set_property(CSS::PropertyID::ListStyleType, value.release_nonnull());
  681. }
  682. return;
  683. }
  684. // FIXME: parse other values as well
  685. if (property_id == CSS::PropertyID::Font) {
  686. auto parts = split_on_whitespace(value.to_string());
  687. if (parts.size() < 2)
  688. return;
  689. auto size_parts = parts[0].split_view('/');
  690. if (size_parts.size() == 2) {
  691. auto size = parse_css_value(context, size_parts[0]);
  692. auto line_height = parse_css_value(context, size_parts[1]);
  693. if (!size || !line_height)
  694. return;
  695. style.set_property(CSS::PropertyID::FontSize, size.release_nonnull());
  696. style.set_property(CSS::PropertyID::LineHeight, line_height.release_nonnull());
  697. } else if (size_parts.size() == 1) {
  698. auto size = parse_css_value(context, parts[0]);
  699. if (!size)
  700. return;
  701. style.set_property(CSS::PropertyID::FontSize, size.release_nonnull());
  702. }
  703. auto family = parse_css_value(context, parts[1]);
  704. style.set_property(CSS::PropertyID::FontFamily, family.release_nonnull());
  705. return;
  706. }
  707. style.set_property(property_id, value);
  708. }
  709. NonnullRefPtr<StyleProperties> StyleResolver::resolve_style(const DOM::Element& element) const
  710. {
  711. auto style = StyleProperties::create();
  712. if (auto* parent_style = element.parent_element() ? element.parent_element()->specified_css_values() : nullptr) {
  713. parent_style->for_each_property([&](auto property_id, auto& value) {
  714. if (is_inherited_property(property_id))
  715. set_property_expanding_shorthands(style, property_id, value, m_document);
  716. });
  717. }
  718. element.apply_presentational_hints(*style);
  719. auto matching_rules = collect_matching_rules(element);
  720. sort_matching_rules(matching_rules);
  721. for (auto& match : matching_rules) {
  722. for (auto& property : match.rule->declaration().properties()) {
  723. set_property_expanding_shorthands(style, property.property_id, property.value, m_document);
  724. }
  725. }
  726. if (auto* inline_style = element.inline_style()) {
  727. for (auto& property : inline_style->properties()) {
  728. set_property_expanding_shorthands(style, property.property_id, property.value, m_document);
  729. }
  730. }
  731. return style;
  732. }
  733. }