StyleComputer.cpp 35 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859
  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@serenityos.org>
  5. *
  6. * SPDX-License-Identifier: BSD-2-Clause
  7. */
  8. #include <AK/QuickSort.h>
  9. #include <LibGfx/Font.h>
  10. #include <LibGfx/FontDatabase.h>
  11. #include <LibWeb/CSS/CSSStyleRule.h>
  12. #include <LibWeb/CSS/Parser/Parser.h>
  13. #include <LibWeb/CSS/SelectorEngine.h>
  14. #include <LibWeb/CSS/StyleComputer.h>
  15. #include <LibWeb/CSS/StyleSheet.h>
  16. #include <LibWeb/DOM/Document.h>
  17. #include <LibWeb/DOM/Element.h>
  18. #include <LibWeb/Dump.h>
  19. #include <LibWeb/FontCache.h>
  20. #include <LibWeb/Page/BrowsingContext.h>
  21. #include <ctype.h>
  22. #include <stdio.h>
  23. namespace Web::CSS {
  24. StyleComputer::StyleComputer(DOM::Document& document)
  25. : m_document(document)
  26. {
  27. }
  28. StyleComputer::~StyleComputer()
  29. {
  30. }
  31. static StyleSheet& default_stylesheet()
  32. {
  33. static StyleSheet* sheet;
  34. if (!sheet) {
  35. extern char const default_stylesheet_source[];
  36. String css = default_stylesheet_source;
  37. sheet = parse_css(CSS::ParsingContext(), css).leak_ref();
  38. }
  39. return *sheet;
  40. }
  41. static StyleSheet& quirks_mode_stylesheet()
  42. {
  43. static StyleSheet* sheet;
  44. if (!sheet) {
  45. extern char const quirks_mode_stylesheet_source[];
  46. String css = quirks_mode_stylesheet_source;
  47. sheet = parse_css(CSS::ParsingContext(), css).leak_ref();
  48. }
  49. return *sheet;
  50. }
  51. template<typename Callback>
  52. void StyleComputer::for_each_stylesheet(CascadeOrigin cascade_origin, Callback callback) const
  53. {
  54. if (cascade_origin == CascadeOrigin::Any || cascade_origin == CascadeOrigin::UserAgent) {
  55. callback(default_stylesheet());
  56. if (document().in_quirks_mode())
  57. callback(quirks_mode_stylesheet());
  58. }
  59. if (cascade_origin == CascadeOrigin::Any || cascade_origin == CascadeOrigin::Author) {
  60. for (auto& sheet : document().style_sheets().sheets()) {
  61. callback(sheet);
  62. }
  63. }
  64. }
  65. Vector<MatchingRule> StyleComputer::collect_matching_rules(DOM::Element const& element, CascadeOrigin declaration_type) const
  66. {
  67. Vector<MatchingRule> matching_rules;
  68. size_t style_sheet_index = 0;
  69. for_each_stylesheet(declaration_type, [&](auto& sheet) {
  70. size_t rule_index = 0;
  71. static_cast<CSSStyleSheet const&>(sheet).for_each_effective_style_rule([&](auto const& rule) {
  72. size_t selector_index = 0;
  73. for (auto& selector : rule.selectors()) {
  74. if (SelectorEngine::matches(selector, element)) {
  75. matching_rules.append({ rule, style_sheet_index, rule_index, selector_index, selector.specificity() });
  76. break;
  77. }
  78. ++selector_index;
  79. }
  80. ++rule_index;
  81. });
  82. ++style_sheet_index;
  83. });
  84. return matching_rules;
  85. }
  86. void StyleComputer::sort_matching_rules(Vector<MatchingRule>& matching_rules) const
  87. {
  88. quick_sort(matching_rules, [&](MatchingRule& a, MatchingRule& b) {
  89. auto& a_selector = a.rule->selectors()[a.selector_index];
  90. auto& b_selector = b.rule->selectors()[b.selector_index];
  91. auto a_specificity = a_selector.specificity();
  92. auto b_specificity = b_selector.specificity();
  93. if (a_selector.specificity() == b_selector.specificity()) {
  94. if (a.style_sheet_index == b.style_sheet_index)
  95. return a.rule_index < b.rule_index;
  96. return a.style_sheet_index < b.style_sheet_index;
  97. }
  98. return a_specificity < b_specificity;
  99. });
  100. }
  101. enum class Edge {
  102. Top,
  103. Right,
  104. Bottom,
  105. Left,
  106. All,
  107. };
  108. static bool contains(Edge a, Edge b)
  109. {
  110. return a == b || b == Edge::All;
  111. }
  112. 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)
  113. {
  114. if (is_pseudo_property(property_id) && !is_internally_generated_pseudo_property) {
  115. dbgln("Ignoring non-internally-generated pseudo property: {}", string_from_property_id(property_id));
  116. return;
  117. }
  118. auto assign_edge_values = [&style](PropertyID top_property, PropertyID right_property, PropertyID bottom_property, PropertyID left_property, auto const& values) {
  119. if (values.size() == 4) {
  120. style.set_property(top_property, values[0]);
  121. style.set_property(right_property, values[1]);
  122. style.set_property(bottom_property, values[2]);
  123. style.set_property(left_property, values[3]);
  124. } else if (values.size() == 3) {
  125. style.set_property(top_property, values[0]);
  126. style.set_property(right_property, values[1]);
  127. style.set_property(bottom_property, values[2]);
  128. style.set_property(left_property, values[1]);
  129. } else if (values.size() == 2) {
  130. style.set_property(top_property, values[0]);
  131. style.set_property(right_property, values[1]);
  132. style.set_property(bottom_property, values[0]);
  133. style.set_property(left_property, values[1]);
  134. } else if (values.size() == 1) {
  135. style.set_property(top_property, values[0]);
  136. style.set_property(right_property, values[0]);
  137. style.set_property(bottom_property, values[0]);
  138. style.set_property(left_property, values[0]);
  139. }
  140. };
  141. if (property_id == CSS::PropertyID::TextDecoration) {
  142. if (value.is_text_decoration()) {
  143. auto& text_decoration = value.as_text_decoration();
  144. style.set_property(CSS::PropertyID::TextDecorationLine, text_decoration.line());
  145. style.set_property(CSS::PropertyID::TextDecorationStyle, text_decoration.style());
  146. style.set_property(CSS::PropertyID::TextDecorationColor, text_decoration.color());
  147. return;
  148. }
  149. style.set_property(CSS::PropertyID::TextDecorationLine, value);
  150. style.set_property(CSS::PropertyID::TextDecorationStyle, value);
  151. style.set_property(CSS::PropertyID::TextDecorationColor, value);
  152. return;
  153. }
  154. if (property_id == CSS::PropertyID::Overflow) {
  155. if (value.is_overflow()) {
  156. auto& overflow = value.as_overflow();
  157. style.set_property(CSS::PropertyID::OverflowX, overflow.overflow_x());
  158. style.set_property(CSS::PropertyID::OverflowY, overflow.overflow_y());
  159. return;
  160. }
  161. style.set_property(CSS::PropertyID::OverflowX, value);
  162. style.set_property(CSS::PropertyID::OverflowY, value);
  163. return;
  164. }
  165. if (property_id == CSS::PropertyID::Border) {
  166. set_property_expanding_shorthands(style, CSS::PropertyID::BorderTop, value, document);
  167. set_property_expanding_shorthands(style, CSS::PropertyID::BorderRight, value, document);
  168. set_property_expanding_shorthands(style, CSS::PropertyID::BorderBottom, value, document);
  169. set_property_expanding_shorthands(style, CSS::PropertyID::BorderLeft, value, document);
  170. // FIXME: Also reset border-image, in line with the spec: https://www.w3.org/TR/css-backgrounds-3/#border-shorthands
  171. return;
  172. }
  173. if (property_id == CSS::PropertyID::BorderRadius) {
  174. if (value.is_value_list()) {
  175. auto& values_list = value.as_value_list();
  176. assign_edge_values(PropertyID::BorderTopLeftRadius, PropertyID::BorderTopRightRadius, PropertyID::BorderBottomRightRadius, PropertyID::BorderBottomLeftRadius, values_list.values());
  177. return;
  178. }
  179. style.set_property(CSS::PropertyID::BorderTopLeftRadius, value);
  180. style.set_property(CSS::PropertyID::BorderTopRightRadius, value);
  181. style.set_property(CSS::PropertyID::BorderBottomRightRadius, value);
  182. style.set_property(CSS::PropertyID::BorderBottomLeftRadius, value);
  183. return;
  184. }
  185. if (property_id == CSS::PropertyID::BorderTop
  186. || property_id == CSS::PropertyID::BorderRight
  187. || property_id == CSS::PropertyID::BorderBottom
  188. || property_id == CSS::PropertyID::BorderLeft) {
  189. Edge edge = Edge::All;
  190. switch (property_id) {
  191. case CSS::PropertyID::BorderTop:
  192. edge = Edge::Top;
  193. break;
  194. case CSS::PropertyID::BorderRight:
  195. edge = Edge::Right;
  196. break;
  197. case CSS::PropertyID::BorderBottom:
  198. edge = Edge::Bottom;
  199. break;
  200. case CSS::PropertyID::BorderLeft:
  201. edge = Edge::Left;
  202. break;
  203. default:
  204. break;
  205. }
  206. if (value.is_border()) {
  207. auto& border = value.as_border();
  208. if (contains(Edge::Top, edge)) {
  209. style.set_property(PropertyID::BorderTopWidth, border.border_width());
  210. style.set_property(PropertyID::BorderTopStyle, border.border_style());
  211. style.set_property(PropertyID::BorderTopColor, border.border_color());
  212. }
  213. if (contains(Edge::Right, edge)) {
  214. style.set_property(PropertyID::BorderRightWidth, border.border_width());
  215. style.set_property(PropertyID::BorderRightStyle, border.border_style());
  216. style.set_property(PropertyID::BorderRightColor, border.border_color());
  217. }
  218. if (contains(Edge::Bottom, edge)) {
  219. style.set_property(PropertyID::BorderBottomWidth, border.border_width());
  220. style.set_property(PropertyID::BorderBottomStyle, border.border_style());
  221. style.set_property(PropertyID::BorderBottomColor, border.border_color());
  222. }
  223. if (contains(Edge::Left, edge)) {
  224. style.set_property(PropertyID::BorderLeftWidth, border.border_width());
  225. style.set_property(PropertyID::BorderLeftStyle, border.border_style());
  226. style.set_property(PropertyID::BorderLeftColor, border.border_color());
  227. }
  228. return;
  229. }
  230. return;
  231. }
  232. if (property_id == CSS::PropertyID::BorderStyle) {
  233. if (value.is_value_list()) {
  234. auto& values_list = value.as_value_list();
  235. assign_edge_values(PropertyID::BorderTopStyle, PropertyID::BorderRightStyle, PropertyID::BorderBottomStyle, PropertyID::BorderLeftStyle, values_list.values());
  236. return;
  237. }
  238. style.set_property(CSS::PropertyID::BorderTopStyle, value);
  239. style.set_property(CSS::PropertyID::BorderRightStyle, value);
  240. style.set_property(CSS::PropertyID::BorderBottomStyle, value);
  241. style.set_property(CSS::PropertyID::BorderLeftStyle, value);
  242. return;
  243. }
  244. if (property_id == CSS::PropertyID::BorderWidth) {
  245. if (value.is_value_list()) {
  246. auto& values_list = value.as_value_list();
  247. assign_edge_values(PropertyID::BorderTopWidth, PropertyID::BorderRightWidth, PropertyID::BorderBottomWidth, PropertyID::BorderLeftWidth, values_list.values());
  248. return;
  249. }
  250. style.set_property(CSS::PropertyID::BorderTopWidth, value);
  251. style.set_property(CSS::PropertyID::BorderRightWidth, value);
  252. style.set_property(CSS::PropertyID::BorderBottomWidth, value);
  253. style.set_property(CSS::PropertyID::BorderLeftWidth, value);
  254. return;
  255. }
  256. if (property_id == CSS::PropertyID::BorderColor) {
  257. if (value.is_value_list()) {
  258. auto& values_list = value.as_value_list();
  259. assign_edge_values(PropertyID::BorderTopColor, PropertyID::BorderRightColor, PropertyID::BorderBottomColor, PropertyID::BorderLeftColor, values_list.values());
  260. return;
  261. }
  262. style.set_property(CSS::PropertyID::BorderTopColor, value);
  263. style.set_property(CSS::PropertyID::BorderRightColor, value);
  264. style.set_property(CSS::PropertyID::BorderBottomColor, value);
  265. style.set_property(CSS::PropertyID::BorderLeftColor, value);
  266. return;
  267. }
  268. if (property_id == CSS::PropertyID::Background) {
  269. auto set_single_background = [&](CSS::BackgroundStyleValue const& background) {
  270. set_property_expanding_shorthands(style, CSS::PropertyID::BackgroundColor, background.color(), document);
  271. set_property_expanding_shorthands(style, CSS::PropertyID::BackgroundImage, background.image(), document);
  272. set_property_expanding_shorthands(style, CSS::PropertyID::BackgroundRepeatX, background.repeat_x(), document, true);
  273. set_property_expanding_shorthands(style, CSS::PropertyID::BackgroundRepeatY, background.repeat_y(), document, true);
  274. };
  275. if (value.is_background()) {
  276. auto& background = value.as_background();
  277. set_single_background(background);
  278. return;
  279. }
  280. if (value.is_value_list()) {
  281. auto& background_list = value.as_value_list().values();
  282. // FIXME: Handle multiple backgrounds.
  283. if (!background_list.is_empty()) {
  284. auto& background = background_list.first();
  285. if (background.is_background())
  286. set_single_background(background.as_background());
  287. }
  288. return;
  289. }
  290. set_property_expanding_shorthands(style, CSS::PropertyID::BackgroundColor, value, document);
  291. set_property_expanding_shorthands(style, CSS::PropertyID::BackgroundImage, value, document);
  292. set_property_expanding_shorthands(style, CSS::PropertyID::BackgroundRepeatX, value, document, true);
  293. set_property_expanding_shorthands(style, CSS::PropertyID::BackgroundRepeatY, value, document, true);
  294. return;
  295. }
  296. if (property_id == CSS::PropertyID::BackgroundImage) {
  297. if (value.is_value_list()) {
  298. auto& background_image_list = value.as_value_list().values();
  299. // FIXME: Handle multiple backgrounds.
  300. if (!background_image_list.is_empty()) {
  301. auto& background_image = background_image_list.first();
  302. style.set_property(CSS::PropertyID::BackgroundImage, background_image);
  303. }
  304. return;
  305. }
  306. style.set_property(CSS::PropertyID::BackgroundImage, value);
  307. return;
  308. }
  309. if (property_id == CSS::PropertyID::BackgroundRepeat) {
  310. if (value.is_value_list()) {
  311. auto& background_repeat_list = value.as_value_list().values();
  312. // FIXME: Handle multiple backgrounds.
  313. if (!background_repeat_list.is_empty()) {
  314. auto& maybe_background_repeat = background_repeat_list.first();
  315. if (maybe_background_repeat.is_background_repeat()) {
  316. auto& background_repeat = maybe_background_repeat.as_background_repeat();
  317. set_property_expanding_shorthands(style, PropertyID::BackgroundRepeatX, background_repeat.repeat_x(), document, true);
  318. set_property_expanding_shorthands(style, PropertyID::BackgroundRepeatY, background_repeat.repeat_y(), document, true);
  319. }
  320. }
  321. return;
  322. }
  323. if (value.is_background_repeat()) {
  324. auto& background_repeat = value.as_background_repeat();
  325. set_property_expanding_shorthands(style, PropertyID::BackgroundRepeatX, background_repeat.repeat_x(), document, true);
  326. set_property_expanding_shorthands(style, PropertyID::BackgroundRepeatY, background_repeat.repeat_y(), document, true);
  327. return;
  328. }
  329. set_property_expanding_shorthands(style, PropertyID::BackgroundRepeatX, value, document, true);
  330. set_property_expanding_shorthands(style, PropertyID::BackgroundRepeatY, value, document, true);
  331. return;
  332. }
  333. if (property_id == CSS::PropertyID::BackgroundRepeatX || property_id == CSS::PropertyID::BackgroundRepeatY) {
  334. auto value_id = value.to_identifier();
  335. if (value_id == CSS::ValueID::RepeatX || value_id == CSS::ValueID::RepeatY)
  336. return;
  337. style.set_property(property_id, value);
  338. return;
  339. }
  340. if (property_id == CSS::PropertyID::Margin) {
  341. if (value.is_value_list()) {
  342. auto& values_list = value.as_value_list();
  343. assign_edge_values(PropertyID::MarginTop, PropertyID::MarginRight, PropertyID::MarginBottom, PropertyID::MarginLeft, values_list.values());
  344. return;
  345. }
  346. style.set_property(CSS::PropertyID::MarginTop, value);
  347. style.set_property(CSS::PropertyID::MarginRight, value);
  348. style.set_property(CSS::PropertyID::MarginBottom, value);
  349. style.set_property(CSS::PropertyID::MarginLeft, value);
  350. return;
  351. }
  352. if (property_id == CSS::PropertyID::Padding) {
  353. if (value.is_value_list()) {
  354. auto& values_list = value.as_value_list();
  355. assign_edge_values(PropertyID::PaddingTop, PropertyID::PaddingRight, PropertyID::PaddingBottom, PropertyID::PaddingLeft, values_list.values());
  356. return;
  357. }
  358. style.set_property(CSS::PropertyID::PaddingTop, value);
  359. style.set_property(CSS::PropertyID::PaddingRight, value);
  360. style.set_property(CSS::PropertyID::PaddingBottom, value);
  361. style.set_property(CSS::PropertyID::PaddingLeft, value);
  362. return;
  363. }
  364. if (property_id == CSS::PropertyID::ListStyle) {
  365. if (value.is_list_style()) {
  366. auto& list_style = value.as_list_style();
  367. style.set_property(CSS::PropertyID::ListStylePosition, list_style.position());
  368. style.set_property(CSS::PropertyID::ListStyleImage, list_style.image());
  369. style.set_property(CSS::PropertyID::ListStyleType, list_style.style_type());
  370. return;
  371. }
  372. style.set_property(CSS::PropertyID::ListStylePosition, value);
  373. style.set_property(CSS::PropertyID::ListStyleImage, value);
  374. style.set_property(CSS::PropertyID::ListStyleType, value);
  375. return;
  376. }
  377. if (property_id == CSS::PropertyID::Font) {
  378. if (value.is_font()) {
  379. auto& font_shorthand = value.as_font();
  380. style.set_property(CSS::PropertyID::FontSize, font_shorthand.font_size());
  381. style.set_property(CSS::PropertyID::FontFamily, font_shorthand.font_families());
  382. style.set_property(CSS::PropertyID::FontStyle, font_shorthand.font_style());
  383. style.set_property(CSS::PropertyID::FontWeight, font_shorthand.font_weight());
  384. style.set_property(CSS::PropertyID::LineHeight, font_shorthand.line_height());
  385. // FIXME: Implement font-stretch and font-variant
  386. return;
  387. }
  388. style.set_property(CSS::PropertyID::FontSize, value);
  389. style.set_property(CSS::PropertyID::FontFamily, value);
  390. style.set_property(CSS::PropertyID::FontStyle, value);
  391. style.set_property(CSS::PropertyID::FontWeight, value);
  392. style.set_property(CSS::PropertyID::LineHeight, value);
  393. // FIXME: Implement font-stretch and font-variant
  394. return;
  395. }
  396. if (property_id == CSS::PropertyID::Flex) {
  397. if (value.is_flex()) {
  398. auto& flex = value.as_flex();
  399. style.set_property(CSS::PropertyID::FlexGrow, flex.grow());
  400. style.set_property(CSS::PropertyID::FlexShrink, flex.shrink());
  401. style.set_property(CSS::PropertyID::FlexBasis, flex.basis());
  402. return;
  403. }
  404. style.set_property(CSS::PropertyID::FlexGrow, value);
  405. style.set_property(CSS::PropertyID::FlexShrink, value);
  406. style.set_property(CSS::PropertyID::FlexBasis, value);
  407. return;
  408. }
  409. if (property_id == CSS::PropertyID::FlexFlow) {
  410. if (value.is_flex_flow()) {
  411. auto& flex_flow = value.as_flex_flow();
  412. style.set_property(CSS::PropertyID::FlexDirection, flex_flow.flex_direction());
  413. style.set_property(CSS::PropertyID::FlexWrap, flex_flow.flex_wrap());
  414. return;
  415. }
  416. style.set_property(CSS::PropertyID::FlexDirection, value);
  417. style.set_property(CSS::PropertyID::FlexWrap, value);
  418. return;
  419. }
  420. style.set_property(property_id, value);
  421. }
  422. StyleComputer::CustomPropertyResolutionTuple StyleComputer::resolve_custom_property_with_specificity(DOM::Element& element, String const& custom_property_name) const
  423. {
  424. if (auto maybe_property = element.resolve_custom_property(custom_property_name); maybe_property.has_value())
  425. return maybe_property.value();
  426. auto parent_element = element.parent_element();
  427. CustomPropertyResolutionTuple parent_resolved {};
  428. if (parent_element)
  429. parent_resolved = resolve_custom_property_with_specificity(*parent_element, custom_property_name);
  430. auto matching_rules = collect_matching_rules(element);
  431. sort_matching_rules(matching_rules);
  432. for (int i = matching_rules.size() - 1; i >= 0; --i) {
  433. auto& match = matching_rules[i];
  434. if (match.specificity < parent_resolved.specificity)
  435. continue;
  436. auto custom_property_style = verify_cast<PropertyOwningCSSStyleDeclaration>(match.rule->declaration()).custom_property(custom_property_name);
  437. if (custom_property_style.has_value()) {
  438. element.add_custom_property(custom_property_name, { custom_property_style.value(), match.specificity });
  439. return { custom_property_style.value(), match.specificity };
  440. }
  441. }
  442. return parent_resolved;
  443. }
  444. Optional<StyleProperty> StyleComputer::resolve_custom_property(DOM::Element& element, String const& custom_property_name) const
  445. {
  446. auto resolved_with_specificity = resolve_custom_property_with_specificity(element, custom_property_name);
  447. return resolved_with_specificity.style;
  448. }
  449. struct MatchingDeclarations {
  450. Vector<MatchingRule> user_agent_rules;
  451. Vector<MatchingRule> author_rules;
  452. };
  453. void StyleComputer::cascade_declarations(StyleProperties& style, DOM::Element& element, Vector<MatchingRule> const& matching_rules, CascadeOrigin cascade_origin, bool important) const
  454. {
  455. for (auto& match : matching_rules) {
  456. for (auto& property : verify_cast<PropertyOwningCSSStyleDeclaration>(match.rule->declaration()).properties()) {
  457. if (important != property.important)
  458. continue;
  459. auto property_value = property.value;
  460. if (property.value->is_custom_property()) {
  461. auto custom_property_name = property.value->as_custom_property().custom_property_name();
  462. auto resolved = resolve_custom_property(element, custom_property_name);
  463. if (resolved.has_value()) {
  464. property_value = resolved.value().value;
  465. }
  466. }
  467. set_property_expanding_shorthands(style, property.property_id, property_value, m_document);
  468. }
  469. }
  470. if (cascade_origin == CascadeOrigin::Author) {
  471. if (auto* inline_style = verify_cast<ElementInlineCSSStyleDeclaration>(element.inline_style())) {
  472. for (auto& property : inline_style->properties()) {
  473. if (important != property.important)
  474. continue;
  475. set_property_expanding_shorthands(style, property.property_id, property.value, m_document);
  476. }
  477. }
  478. }
  479. }
  480. // https://drafts.csswg.org/css-cascade/#cascading
  481. void StyleComputer::compute_cascaded_values(StyleProperties& style, DOM::Element& element) const
  482. {
  483. // First, we collect all the CSS rules whose selectors match `element`:
  484. MatchingRuleSet matching_rule_set;
  485. matching_rule_set.user_agent_rules = collect_matching_rules(element, CascadeOrigin::UserAgent);
  486. sort_matching_rules(matching_rule_set.user_agent_rules);
  487. matching_rule_set.author_rules = collect_matching_rules(element, CascadeOrigin::Author);
  488. sort_matching_rules(matching_rule_set.author_rules);
  489. // Then we apply the declarations from the matched rules in cascade order:
  490. // Normal user agent declarations
  491. cascade_declarations(style, element, matching_rule_set.user_agent_rules, CascadeOrigin::UserAgent, false);
  492. // FIXME: Normal user declarations
  493. // Normal author declarations
  494. cascade_declarations(style, element, matching_rule_set.author_rules, CascadeOrigin::Author, false);
  495. // Author presentational hints (NOTE: The spec doesn't say exactly how to prioritize these.)
  496. element.apply_presentational_hints(style);
  497. // FIXME: Animation declarations [css-animations-1]
  498. // Important author declarations
  499. cascade_declarations(style, element, matching_rule_set.author_rules, CascadeOrigin::Author, true);
  500. // FIXME: Important user declarations
  501. // Important user agent declarations
  502. cascade_declarations(style, element, matching_rule_set.user_agent_rules, CascadeOrigin::UserAgent, true);
  503. // FIXME: Transition declarations [css-transitions-1]
  504. }
  505. static NonnullRefPtr<StyleValue> get_initial_value(CSS::PropertyID property_id)
  506. {
  507. auto value = property_initial_value(property_id);
  508. if (!value)
  509. return InitialStyleValue::the();
  510. return value.release_nonnull();
  511. };
  512. static NonnullRefPtr<StyleValue> get_inherit_value(CSS::PropertyID property_id, DOM::Element const* element)
  513. {
  514. if (!element || !element->parent_element() || !element->parent_element()->specified_css_values())
  515. return get_initial_value(property_id);
  516. auto& map = element->parent_element()->specified_css_values()->properties();
  517. auto it = map.find(property_id);
  518. VERIFY(it != map.end());
  519. return *it->value;
  520. };
  521. void StyleComputer::compute_defaulted_property_value(StyleProperties& style, DOM::Element const* element, CSS::PropertyID property_id) const
  522. {
  523. // FIXME: If we don't know the correct initial value for a property, we fall back to InitialStyleValue.
  524. auto it = style.m_property_values.find(property_id);
  525. if (it == style.m_property_values.end()) {
  526. if (is_inherited_property(property_id))
  527. style.m_property_values.set(property_id, get_inherit_value(property_id, element));
  528. else
  529. style.m_property_values.set(property_id, get_initial_value(property_id));
  530. return;
  531. }
  532. if (it->value->is_initial()) {
  533. it->value = get_initial_value(property_id);
  534. return;
  535. }
  536. if (it->value->is_inherit()) {
  537. it->value = get_inherit_value(property_id, element);
  538. return;
  539. }
  540. }
  541. // https://drafts.csswg.org/css-cascade/#defaulting
  542. void StyleComputer::compute_defaulted_values(StyleProperties& style, DOM::Element const* element) const
  543. {
  544. // Walk the list of all known CSS properties and:
  545. // - Add them to `style` if they are missing.
  546. // - Resolve `inherit` and `initial` as needed.
  547. for (auto i = to_underlying(CSS::first_longhand_property_id); i <= to_underlying(CSS::last_longhand_property_id); ++i) {
  548. auto property_id = (CSS::PropertyID)i;
  549. compute_defaulted_property_value(style, element, property_id);
  550. }
  551. }
  552. void StyleComputer::compute_font(StyleProperties& style, DOM::Element const* element) const
  553. {
  554. // To compute the font, first ensure that we've defaulted the relevant CSS font properties.
  555. // FIXME: This should be more sophisticated.
  556. compute_defaulted_property_value(style, element, CSS::PropertyID::FontFamily);
  557. compute_defaulted_property_value(style, element, CSS::PropertyID::FontSize);
  558. compute_defaulted_property_value(style, element, CSS::PropertyID::FontWeight);
  559. auto viewport_rect = document().browsing_context()->viewport_rect();
  560. auto font_size = style.property(CSS::PropertyID::FontSize).value();
  561. auto font_weight = style.property(CSS::PropertyID::FontWeight).value();
  562. int weight = Gfx::FontWeight::Regular;
  563. if (font_weight->is_identifier()) {
  564. switch (static_cast<IdentifierStyleValue const&>(*font_weight).id()) {
  565. case CSS::ValueID::Normal:
  566. weight = Gfx::FontWeight::Regular;
  567. break;
  568. case CSS::ValueID::Bold:
  569. weight = Gfx::FontWeight::Bold;
  570. break;
  571. case CSS::ValueID::Lighter:
  572. // FIXME: This should be relative to the parent.
  573. weight = Gfx::FontWeight::Regular;
  574. break;
  575. case CSS::ValueID::Bolder:
  576. // FIXME: This should be relative to the parent.
  577. weight = Gfx::FontWeight::Bold;
  578. break;
  579. default:
  580. break;
  581. }
  582. } else if (font_weight->is_numeric()) {
  583. int font_weight_integer = roundf(static_cast<NumericStyleValue const&>(*font_weight).value());
  584. if (font_weight_integer <= Gfx::FontWeight::Regular)
  585. weight = Gfx::FontWeight::Regular;
  586. else if (font_weight_integer <= Gfx::FontWeight::Bold)
  587. weight = Gfx::FontWeight::Bold;
  588. else
  589. weight = Gfx::FontWeight::Black;
  590. }
  591. // FIXME: calc() for font-weight
  592. bool bold = weight > Gfx::FontWeight::Regular;
  593. int size = 10;
  594. if (font_size->is_identifier()) {
  595. switch (static_cast<const IdentifierStyleValue&>(*font_size).id()) {
  596. case CSS::ValueID::XxSmall:
  597. case CSS::ValueID::XSmall:
  598. case CSS::ValueID::Small:
  599. case CSS::ValueID::Medium:
  600. // FIXME: Should be based on "user's default font size"
  601. size = 10;
  602. break;
  603. case CSS::ValueID::Large:
  604. case CSS::ValueID::XLarge:
  605. case CSS::ValueID::XxLarge:
  606. case CSS::ValueID::XxxLarge:
  607. // FIXME: Should be based on "user's default font size"
  608. size = 12;
  609. break;
  610. case CSS::ValueID::Smaller:
  611. case CSS::ValueID::Larger:
  612. // FIXME: Should be based on parent element
  613. break;
  614. default:
  615. break;
  616. }
  617. } else {
  618. // FIXME: Get the root element font.
  619. float root_font_size = 10;
  620. Gfx::FontMetrics font_metrics;
  621. if (element && element->parent_element() && element->parent_element()->specified_css_values())
  622. font_metrics = element->parent_element()->specified_css_values()->computed_font().metrics('M');
  623. else
  624. font_metrics = Gfx::FontDatabase::default_font().metrics('M');
  625. Optional<Length> maybe_length;
  626. if (font_size->is_length()) {
  627. maybe_length = font_size->to_length();
  628. if (maybe_length->is_percentage()) {
  629. auto parent_font_size = size;
  630. if (element && element->parent_element() && element->parent_element()->layout_node() && element->parent_element()->specified_css_values()) {
  631. auto value = element->parent_element()->specified_css_values()->property(CSS::PropertyID::FontSize).value();
  632. if (value->is_length()) {
  633. auto length = static_cast<LengthStyleValue const&>(*value).to_length();
  634. if (length.is_absolute() || length.is_relative())
  635. parent_font_size = length.to_px(viewport_rect, font_metrics, root_font_size);
  636. }
  637. }
  638. maybe_length = Length::make_px(maybe_length->raw_value() / 100.0f * (parent_font_size));
  639. }
  640. } else if (font_size->is_calculated()) {
  641. Length length = Length(0, Length::Type::Calculated);
  642. length.set_calculated_style(verify_cast<CalculatedStyleValue>(font_size.ptr()));
  643. maybe_length = length;
  644. }
  645. if (maybe_length.has_value()) {
  646. // FIXME: Support font-size: calc(...)
  647. if (!maybe_length->is_calculated()) {
  648. auto px = maybe_length.value().to_px(viewport_rect, font_metrics, root_font_size);
  649. if (px != 0)
  650. size = px;
  651. }
  652. }
  653. }
  654. // FIXME: Implement the full font-matching algorithm: https://www.w3.org/TR/css-fonts-4/#font-matching-algorithm
  655. // Note: This is modified by the find_font() lambda
  656. FontSelector font_selector;
  657. bool monospace = false;
  658. auto find_font = [&](String const& family) -> RefPtr<Gfx::Font> {
  659. font_selector = { family, size, weight };
  660. if (auto found_font = FontCache::the().get(font_selector))
  661. return found_font;
  662. if (auto found_font = Gfx::FontDatabase::the().get(family, size, weight))
  663. return found_font;
  664. return {};
  665. };
  666. // FIXME: Replace hard-coded font names with a relevant call to FontDatabase.
  667. // Currently, we cannot request the default font's name, or request it at a specific size and weight.
  668. // So, hard-coded font names it is.
  669. auto find_generic_font = [&](ValueID font_id) -> RefPtr<Gfx::Font> {
  670. switch (font_id) {
  671. case ValueID::Monospace:
  672. case ValueID::UiMonospace:
  673. monospace = true;
  674. return find_font("Csilla");
  675. case ValueID::Serif:
  676. case ValueID::SansSerif:
  677. case ValueID::Cursive:
  678. case ValueID::Fantasy:
  679. case ValueID::UiSerif:
  680. case ValueID::UiSansSerif:
  681. case ValueID::UiRounded:
  682. return find_font("Katica");
  683. default:
  684. return {};
  685. }
  686. };
  687. RefPtr<Gfx::Font> found_font;
  688. auto family_value = style.property(PropertyID::FontFamily).value();
  689. if (family_value->is_value_list()) {
  690. auto& family_list = static_cast<StyleValueList const&>(*family_value).values();
  691. for (auto& family : family_list) {
  692. if (family.is_identifier()) {
  693. found_font = find_generic_font(family.to_identifier());
  694. } else if (family.is_string()) {
  695. found_font = find_font(family.to_string());
  696. }
  697. if (found_font)
  698. break;
  699. }
  700. } else if (family_value->is_identifier()) {
  701. found_font = find_generic_font(family_value->to_identifier());
  702. } else if (family_value->is_string()) {
  703. found_font = find_font(family_value->to_string());
  704. }
  705. if (!found_font) {
  706. found_font = StyleProperties::font_fallback(monospace, bold);
  707. }
  708. FontCache::the().set(font_selector, *found_font);
  709. style.set_computed_font(found_font.release_nonnull());
  710. }
  711. void StyleComputer::absolutize_values(StyleProperties& style, DOM::Element const*) const
  712. {
  713. auto viewport_rect = document().browsing_context()->viewport_rect();
  714. auto font_metrics = style.computed_font().metrics('M');
  715. // FIXME: Get the root element font.
  716. float root_font_size = 10;
  717. for (auto& it : style.properties()) {
  718. it.value->visit_lengths([&](Length& length) {
  719. if (length.is_absolute() || length.is_relative()) {
  720. auto px = length.to_px(viewport_rect, font_metrics, root_font_size);
  721. length = Length::make_px(px);
  722. }
  723. });
  724. }
  725. }
  726. NonnullRefPtr<StyleProperties> StyleComputer::create_document_style() const
  727. {
  728. auto style = StyleProperties::create();
  729. compute_font(style, nullptr);
  730. compute_defaulted_values(style, nullptr);
  731. absolutize_values(style, nullptr);
  732. return style;
  733. }
  734. NonnullRefPtr<StyleProperties> StyleComputer::compute_style(DOM::Element& element) const
  735. {
  736. auto style = StyleProperties::create();
  737. // 1. Perform the cascade. This produces the "specified style"
  738. compute_cascaded_values(style, element);
  739. // 2. Compute the font, since that may be needed for font-relative CSS units
  740. compute_font(style, &element);
  741. // 3. Absolutize values, turning font/viewport relative lengths into absolute lengths
  742. absolutize_values(style, &element);
  743. // 4. Default the values, applying inheritance and 'initial' as needed
  744. compute_defaulted_values(style, &element);
  745. return style;
  746. }
  747. }