StyleResolver.cpp 30 KB

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