StyleComputer.cpp 101 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504150515061507150815091510151115121513151415151516151715181519152015211522152315241525152615271528152915301531153215331534153515361537153815391540154115421543154415451546154715481549155015511552155315541555155615571558155915601561156215631564156515661567156815691570157115721573157415751576157715781579158015811582158315841585158615871588158915901591159215931594159515961597159815991600160116021603160416051606160716081609161016111612161316141615161616171618161916201621162216231624162516261627162816291630163116321633163416351636163716381639164016411642164316441645164616471648164916501651165216531654165516561657165816591660166116621663166416651666166716681669167016711672167316741675167616771678167916801681168216831684168516861687168816891690169116921693169416951696169716981699170017011702170317041705170617071708170917101711171217131714171517161717171817191720172117221723172417251726172717281729173017311732173317341735173617371738173917401741174217431744174517461747174817491750175117521753175417551756175717581759176017611762176317641765176617671768176917701771177217731774177517761777177817791780178117821783178417851786178717881789179017911792179317941795179617971798179918001801180218031804180518061807180818091810181118121813181418151816181718181819182018211822182318241825182618271828182918301831183218331834183518361837183818391840184118421843184418451846184718481849185018511852185318541855185618571858185918601861186218631864186518661867186818691870187118721873187418751876187718781879188018811882188318841885188618871888188918901891189218931894189518961897189818991900190119021903190419051906190719081909191019111912191319141915191619171918191919201921192219231924192519261927192819291930193119321933193419351936193719381939194019411942194319441945194619471948194919501951195219531954195519561957195819591960196119621963196419651966196719681969197019711972197319741975197619771978197919801981198219831984198519861987198819891990199119921993199419951996199719981999200020012002200320042005200620072008200920102011201220132014201520162017201820192020202120222023202420252026202720282029203020312032203320342035203620372038203920402041204220432044204520462047204820492050205120522053205420552056205720582059206020612062206320642065206620672068206920702071207220732074207520762077207820792080208120822083208420852086208720882089209020912092209320942095209620972098209921002101210221032104210521062107210821092110211121122113211421152116211721182119
  1. /*
  2. * Copyright (c) 2018-2023, Andreas Kling <kling@serenityos.org>
  3. * Copyright (c) 2021, the SerenityOS developers.
  4. * Copyright (c) 2021-2023, Sam Atkins <atkinssj@serenityos.org>
  5. * Copyright (c) 2024, Matthew Olsson <mattco@serenityos.org>
  6. *
  7. * SPDX-License-Identifier: BSD-2-Clause
  8. */
  9. #include <AK/BinarySearch.h>
  10. #include <AK/Debug.h>
  11. #include <AK/Error.h>
  12. #include <AK/Find.h>
  13. #include <AK/Function.h>
  14. #include <AK/HashMap.h>
  15. #include <AK/Math.h>
  16. #include <AK/QuickSort.h>
  17. #include <AK/TemporaryChange.h>
  18. #include <LibGfx/Font/Font.h>
  19. #include <LibGfx/Font/FontDatabase.h>
  20. #include <LibGfx/Font/FontStyleMapping.h>
  21. #include <LibGfx/Font/OpenType/Font.h>
  22. #include <LibGfx/Font/ScaledFont.h>
  23. #include <LibGfx/Font/VectorFont.h>
  24. #include <LibGfx/Font/WOFF/Font.h>
  25. #include <LibGfx/Font/WOFF2/Font.h>
  26. #include <LibWeb/Animations/AnimationEffect.h>
  27. #include <LibWeb/Animations/DocumentTimeline.h>
  28. #include <LibWeb/Animations/TimingFunction.h>
  29. #include <LibWeb/CSS/AnimationEvent.h>
  30. #include <LibWeb/CSS/CSSAnimation.h>
  31. #include <LibWeb/CSS/CSSFontFaceRule.h>
  32. #include <LibWeb/CSS/CSSImportRule.h>
  33. #include <LibWeb/CSS/CSSStyleRule.h>
  34. #include <LibWeb/CSS/Parser/Parser.h>
  35. #include <LibWeb/CSS/SelectorEngine.h>
  36. #include <LibWeb/CSS/StyleComputer.h>
  37. #include <LibWeb/CSS/StyleSheet.h>
  38. #include <LibWeb/CSS/StyleValues/AngleStyleValue.h>
  39. #include <LibWeb/CSS/StyleValues/BorderRadiusStyleValue.h>
  40. #include <LibWeb/CSS/StyleValues/ColorStyleValue.h>
  41. #include <LibWeb/CSS/StyleValues/CustomIdentStyleValue.h>
  42. #include <LibWeb/CSS/StyleValues/DisplayStyleValue.h>
  43. #include <LibWeb/CSS/StyleValues/EasingStyleValue.h>
  44. #include <LibWeb/CSS/StyleValues/FilterValueListStyleValue.h>
  45. #include <LibWeb/CSS/StyleValues/GridTrackPlacementStyleValue.h>
  46. #include <LibWeb/CSS/StyleValues/GridTrackSizeListStyleValue.h>
  47. #include <LibWeb/CSS/StyleValues/IdentifierStyleValue.h>
  48. #include <LibWeb/CSS/StyleValues/IntegerStyleValue.h>
  49. #include <LibWeb/CSS/StyleValues/LengthStyleValue.h>
  50. #include <LibWeb/CSS/StyleValues/MathDepthStyleValue.h>
  51. #include <LibWeb/CSS/StyleValues/NumberStyleValue.h>
  52. #include <LibWeb/CSS/StyleValues/PercentageStyleValue.h>
  53. #include <LibWeb/CSS/StyleValues/PositionStyleValue.h>
  54. #include <LibWeb/CSS/StyleValues/RectStyleValue.h>
  55. #include <LibWeb/CSS/StyleValues/ShorthandStyleValue.h>
  56. #include <LibWeb/CSS/StyleValues/StringStyleValue.h>
  57. #include <LibWeb/CSS/StyleValues/StyleValueList.h>
  58. #include <LibWeb/CSS/StyleValues/TimeStyleValue.h>
  59. #include <LibWeb/CSS/StyleValues/TransformationStyleValue.h>
  60. #include <LibWeb/CSS/StyleValues/UnresolvedStyleValue.h>
  61. #include <LibWeb/CSS/StyleValues/UnsetStyleValue.h>
  62. #include <LibWeb/DOM/Document.h>
  63. #include <LibWeb/DOM/Element.h>
  64. #include <LibWeb/HTML/HTMLBRElement.h>
  65. #include <LibWeb/HTML/HTMLHtmlElement.h>
  66. #include <LibWeb/HTML/Scripting/TemporaryExecutionContext.h>
  67. #include <LibWeb/HighResolutionTime/TimeOrigin.h>
  68. #include <LibWeb/Layout/Node.h>
  69. #include <LibWeb/Loader/ResourceLoader.h>
  70. #include <LibWeb/Namespace.h>
  71. #include <LibWeb/Platform/FontPlugin.h>
  72. #include <LibWeb/ReferrerPolicy/AbstractOperations.h>
  73. #include <math.h>
  74. #include <stdio.h>
  75. namespace AK {
  76. // traits for FontFaceKey
  77. template<>
  78. struct Traits<Web::CSS::FontFaceKey> : public DefaultTraits<Web::CSS::FontFaceKey> {
  79. static unsigned hash(Web::CSS::FontFaceKey const& key) { return pair_int_hash(key.family_name.hash(), pair_int_hash(key.weight, key.slope)); }
  80. };
  81. }
  82. namespace Web::CSS {
  83. static DOM::Element const* element_to_inherit_style_from(DOM::Element const*, Optional<CSS::Selector::PseudoElement::Type>);
  84. static NonnullRefPtr<StyleValue const> get_inherit_value(JS::Realm& initial_value_context_realm, CSS::PropertyID, DOM::Element const*, Optional<CSS::Selector::PseudoElement::Type>);
  85. StyleComputer::StyleComputer(DOM::Document& document)
  86. : m_document(document)
  87. , m_default_font_metrics(16, Gfx::FontDatabase::default_font().pixel_metrics())
  88. , m_root_element_font_metrics(m_default_font_metrics)
  89. {
  90. }
  91. StyleComputer::~StyleComputer() = default;
  92. class StyleComputer::FontLoader : public ResourceClient {
  93. public:
  94. explicit FontLoader(StyleComputer& style_computer, FlyString family_name, Vector<Gfx::UnicodeRange> unicode_ranges, Vector<URL> urls)
  95. : m_style_computer(style_computer)
  96. , m_family_name(move(family_name))
  97. , m_unicode_ranges(move(unicode_ranges))
  98. , m_urls(move(urls))
  99. {
  100. }
  101. virtual ~FontLoader() override { }
  102. Vector<Gfx::UnicodeRange> const& unicode_ranges() const { return m_unicode_ranges; }
  103. virtual void resource_did_load() override
  104. {
  105. auto result = try_load_font();
  106. if (result.is_error())
  107. return start_loading_next_url();
  108. m_vector_font = result.release_value();
  109. m_style_computer.did_load_font(m_family_name);
  110. }
  111. virtual void resource_did_fail() override
  112. {
  113. }
  114. RefPtr<Gfx::Font> font_with_point_size(float point_size)
  115. {
  116. if (!m_vector_font) {
  117. start_loading_next_url();
  118. return nullptr;
  119. }
  120. return m_vector_font->scaled_font(point_size);
  121. }
  122. private:
  123. void start_loading_next_url()
  124. {
  125. if (resource() && resource()->is_pending())
  126. return;
  127. if (m_urls.is_empty())
  128. return;
  129. LoadRequest request;
  130. request.set_url(m_urls.take_first());
  131. // HACK: We're crudely computing the referer value and shoving it into the
  132. // request until fetch infrastructure is used here.
  133. auto referrer_url = ReferrerPolicy::strip_url_for_use_as_referrer(m_style_computer.document().url());
  134. if (referrer_url.has_value() && !request.headers().contains("Referer"))
  135. request.set_header("Referer", referrer_url->serialize());
  136. set_resource(ResourceLoader::the().load_resource(Resource::Type::Generic, request));
  137. }
  138. ErrorOr<NonnullRefPtr<Gfx::VectorFont>> try_load_font()
  139. {
  140. // FIXME: This could maybe use the format() provided in @font-face as well, since often the mime type is just application/octet-stream and we have to try every format
  141. auto mime_type = resource()->mime_type();
  142. if (mime_type == "font/ttf"sv || mime_type == "application/x-font-ttf"sv)
  143. return TRY(OpenType::Font::try_load_from_externally_owned_memory(resource()->encoded_data()));
  144. if (mime_type == "font/woff"sv || mime_type == "application/font-woff"sv)
  145. return TRY(WOFF::Font::try_load_from_externally_owned_memory(resource()->encoded_data()));
  146. if (mime_type == "font/woff2"sv || mime_type == "application/font-woff2"sv) {
  147. auto woff2 = WOFF2::Font::try_load_from_externally_owned_memory(resource()->encoded_data());
  148. if (woff2.is_error()) {
  149. dbgln("WOFF2 error: {}", woff2.error());
  150. return woff2.release_error();
  151. }
  152. return woff2.release_value();
  153. }
  154. auto ttf = OpenType::Font::try_load_from_externally_owned_memory(resource()->encoded_data());
  155. if (!ttf.is_error())
  156. return ttf.release_value();
  157. auto woff = WOFF::Font::try_load_from_externally_owned_memory(resource()->encoded_data());
  158. if (!woff.is_error())
  159. return woff.release_value();
  160. auto woff2 = WOFF2::Font::try_load_from_externally_owned_memory(resource()->encoded_data());
  161. if (!woff2.is_error())
  162. return woff2.release_value();
  163. return woff2.release_error();
  164. }
  165. StyleComputer& m_style_computer;
  166. FlyString m_family_name;
  167. Vector<Gfx::UnicodeRange> m_unicode_ranges;
  168. RefPtr<Gfx::VectorFont> m_vector_font;
  169. Vector<URL> m_urls;
  170. };
  171. struct StyleComputer::MatchingFontCandidate {
  172. FontFaceKey key;
  173. Variant<FontLoaderList*, Gfx::Typeface const*> loader_or_typeface;
  174. [[nodiscard]] RefPtr<Gfx::FontCascadeList const> font_with_point_size(float point_size) const
  175. {
  176. RefPtr<Gfx::FontCascadeList> font_list = Gfx::FontCascadeList::create();
  177. if (auto* loader_list = loader_or_typeface.get_pointer<FontLoaderList*>(); loader_list) {
  178. for (auto const& loader : **loader_list) {
  179. if (auto font = loader->font_with_point_size(point_size); font)
  180. font_list->add(*font, loader->unicode_ranges());
  181. }
  182. return font_list;
  183. }
  184. if (auto font = loader_or_typeface.get<Gfx::Typeface const*>()->get_font(point_size))
  185. font_list->add(*font);
  186. return font_list;
  187. }
  188. };
  189. static CSSStyleSheet& default_stylesheet(DOM::Document const& document)
  190. {
  191. static JS::Handle<CSSStyleSheet> sheet;
  192. if (!sheet.cell()) {
  193. extern StringView default_stylesheet_source;
  194. sheet = JS::make_handle(parse_css_stylesheet(CSS::Parser::ParsingContext(document), default_stylesheet_source));
  195. }
  196. return *sheet;
  197. }
  198. static CSSStyleSheet& quirks_mode_stylesheet(DOM::Document const& document)
  199. {
  200. static JS::Handle<CSSStyleSheet> sheet;
  201. if (!sheet.cell()) {
  202. extern StringView quirks_mode_stylesheet_source;
  203. sheet = JS::make_handle(parse_css_stylesheet(CSS::Parser::ParsingContext(document), quirks_mode_stylesheet_source));
  204. }
  205. return *sheet;
  206. }
  207. static CSSStyleSheet& mathml_stylesheet(DOM::Document const& document)
  208. {
  209. static JS::Handle<CSSStyleSheet> sheet;
  210. if (!sheet.cell()) {
  211. extern StringView mathml_stylesheet_source;
  212. sheet = JS::make_handle(parse_css_stylesheet(CSS::Parser::ParsingContext(document), mathml_stylesheet_source));
  213. }
  214. return *sheet;
  215. }
  216. static CSSStyleSheet& svg_stylesheet(DOM::Document const& document)
  217. {
  218. static JS::Handle<CSSStyleSheet> sheet;
  219. if (!sheet.cell()) {
  220. extern StringView svg_stylesheet_source;
  221. sheet = JS::make_handle(parse_css_stylesheet(CSS::Parser::ParsingContext(document), svg_stylesheet_source));
  222. }
  223. return *sheet;
  224. }
  225. template<typename Callback>
  226. void StyleComputer::for_each_stylesheet(CascadeOrigin cascade_origin, Callback callback) const
  227. {
  228. if (cascade_origin == CascadeOrigin::UserAgent) {
  229. callback(default_stylesheet(document()));
  230. if (document().in_quirks_mode())
  231. callback(quirks_mode_stylesheet(document()));
  232. callback(mathml_stylesheet(document()));
  233. callback(svg_stylesheet(document()));
  234. }
  235. if (cascade_origin == CascadeOrigin::User) {
  236. if (m_user_style_sheet)
  237. callback(*m_user_style_sheet);
  238. }
  239. if (cascade_origin == CascadeOrigin::Author) {
  240. for (auto const& sheet : document().style_sheets().sheets())
  241. callback(*sheet);
  242. }
  243. }
  244. StyleComputer::RuleCache const& StyleComputer::rule_cache_for_cascade_origin(CascadeOrigin cascade_origin) const
  245. {
  246. switch (cascade_origin) {
  247. case CascadeOrigin::Author:
  248. return *m_author_rule_cache;
  249. case CascadeOrigin::User:
  250. return *m_user_rule_cache;
  251. case CascadeOrigin::UserAgent:
  252. return *m_user_agent_rule_cache;
  253. default:
  254. TODO();
  255. }
  256. }
  257. [[nodiscard]] static bool filter_namespace_rule(DOM::Element const& element, MatchingRule const& rule)
  258. {
  259. // FIXME: Filter out non-default namespace using prefixes
  260. auto namespace_uri = rule.sheet->default_namespace();
  261. if (namespace_uri.has_value() && namespace_uri.value() != element.namespace_uri()) {
  262. return false;
  263. }
  264. return true;
  265. }
  266. Vector<MatchingRule> StyleComputer::collect_matching_rules(DOM::Element const& element, CascadeOrigin cascade_origin, Optional<CSS::Selector::PseudoElement::Type> pseudo_element) const
  267. {
  268. auto const& rule_cache = rule_cache_for_cascade_origin(cascade_origin);
  269. Vector<MatchingRule> rules_to_run;
  270. auto add_rules_to_run = [&](Vector<MatchingRule> const& rules) {
  271. rules_to_run.grow_capacity(rules_to_run.size() + rules.size());
  272. if (pseudo_element.has_value()) {
  273. for (auto const& rule : rules) {
  274. if (rule.contains_pseudo_element && filter_namespace_rule(element, rule))
  275. rules_to_run.append(rule);
  276. }
  277. } else {
  278. for (auto const& rule : rules) {
  279. if (filter_namespace_rule(element, rule))
  280. rules_to_run.append(rule);
  281. }
  282. }
  283. };
  284. for (auto const& class_name : element.class_names()) {
  285. if (auto it = rule_cache.rules_by_class.find(class_name); it != rule_cache.rules_by_class.end())
  286. add_rules_to_run(it->value);
  287. }
  288. if (auto id = element.id(); id.has_value()) {
  289. if (auto it = rule_cache.rules_by_id.find(id.value()); it != rule_cache.rules_by_id.end())
  290. add_rules_to_run(it->value);
  291. }
  292. if (auto it = rule_cache.rules_by_tag_name.find(element.local_name()); it != rule_cache.rules_by_tag_name.end())
  293. add_rules_to_run(it->value);
  294. add_rules_to_run(rule_cache.other_rules);
  295. Vector<MatchingRule> matching_rules;
  296. matching_rules.ensure_capacity(rules_to_run.size());
  297. for (auto const& rule_to_run : rules_to_run) {
  298. auto const& selector = rule_to_run.rule->selectors()[rule_to_run.selector_index];
  299. if (SelectorEngine::matches(selector, *rule_to_run.sheet, element, pseudo_element))
  300. matching_rules.append(rule_to_run);
  301. }
  302. return matching_rules;
  303. }
  304. static void sort_matching_rules(Vector<MatchingRule>& matching_rules)
  305. {
  306. quick_sort(matching_rules, [&](MatchingRule& a, MatchingRule& b) {
  307. auto const& a_selector = a.rule->selectors()[a.selector_index];
  308. auto const& b_selector = b.rule->selectors()[b.selector_index];
  309. auto a_specificity = a_selector->specificity();
  310. auto b_specificity = b_selector->specificity();
  311. if (a_selector->specificity() == b_selector->specificity()) {
  312. if (a.style_sheet_index == b.style_sheet_index)
  313. return a.rule_index < b.rule_index;
  314. return a.style_sheet_index < b.style_sheet_index;
  315. }
  316. return a_specificity < b_specificity;
  317. });
  318. }
  319. void StyleComputer::for_each_property_expanding_shorthands(PropertyID property_id, StyleValue const& value, Function<void(PropertyID, StyleValue const&)> const& set_longhand_property)
  320. {
  321. auto map_logical_property_to_real_property = [](PropertyID property_id) -> Optional<PropertyID> {
  322. // FIXME: Honor writing-mode, direction and text-orientation.
  323. switch (property_id) {
  324. case PropertyID::MarginBlockStart:
  325. return PropertyID::MarginTop;
  326. case PropertyID::MarginBlockEnd:
  327. return PropertyID::MarginBottom;
  328. case PropertyID::MarginInlineStart:
  329. return PropertyID::MarginLeft;
  330. case PropertyID::MarginInlineEnd:
  331. return PropertyID::MarginRight;
  332. case PropertyID::PaddingBlockStart:
  333. return PropertyID::PaddingTop;
  334. case PropertyID::PaddingBlockEnd:
  335. return PropertyID::PaddingBottom;
  336. case PropertyID::PaddingInlineStart:
  337. return PropertyID::PaddingLeft;
  338. case PropertyID::PaddingInlineEnd:
  339. return PropertyID::PaddingRight;
  340. case PropertyID::InsetBlockStart:
  341. return PropertyID::Top;
  342. case PropertyID::InsetBlockEnd:
  343. return PropertyID::Bottom;
  344. case PropertyID::InsetInlineStart:
  345. return PropertyID::Left;
  346. case PropertyID::InsetInlineEnd:
  347. return PropertyID::Right;
  348. case PropertyID::WebkitAppearance:
  349. return PropertyID::Appearance;
  350. default:
  351. return {};
  352. }
  353. };
  354. struct StartAndEndPropertyIDs {
  355. PropertyID start;
  356. PropertyID end;
  357. };
  358. auto map_logical_property_to_real_properties = [](PropertyID property_id) -> Optional<StartAndEndPropertyIDs> {
  359. // FIXME: Honor writing-mode, direction and text-orientation.
  360. switch (property_id) {
  361. case PropertyID::MarginBlock:
  362. return StartAndEndPropertyIDs { PropertyID::MarginTop, PropertyID::MarginBottom };
  363. case PropertyID::MarginInline:
  364. return StartAndEndPropertyIDs { PropertyID::MarginLeft, PropertyID::MarginRight };
  365. case PropertyID::PaddingBlock:
  366. return StartAndEndPropertyIDs { PropertyID::PaddingTop, PropertyID::PaddingBottom };
  367. case PropertyID::PaddingInline:
  368. return StartAndEndPropertyIDs { PropertyID::PaddingLeft, PropertyID::PaddingRight };
  369. case PropertyID::InsetBlock:
  370. return StartAndEndPropertyIDs { PropertyID::Top, PropertyID::Bottom };
  371. case PropertyID::InsetInline:
  372. return StartAndEndPropertyIDs { PropertyID::Left, PropertyID::Right };
  373. default:
  374. return {};
  375. }
  376. };
  377. if (auto real_property_id = map_logical_property_to_real_property(property_id); real_property_id.has_value()) {
  378. for_each_property_expanding_shorthands(real_property_id.value(), value, set_longhand_property);
  379. return;
  380. }
  381. if (auto real_property_ids = map_logical_property_to_real_properties(property_id); real_property_ids.has_value()) {
  382. if (value.is_value_list() && value.as_value_list().size() == 2) {
  383. auto const& start = value.as_value_list().values()[0];
  384. auto const& end = value.as_value_list().values()[1];
  385. for_each_property_expanding_shorthands(real_property_ids->start, start, set_longhand_property);
  386. for_each_property_expanding_shorthands(real_property_ids->end, end, set_longhand_property);
  387. return;
  388. }
  389. for_each_property_expanding_shorthands(real_property_ids->start, value, set_longhand_property);
  390. for_each_property_expanding_shorthands(real_property_ids->end, value, set_longhand_property);
  391. return;
  392. }
  393. if (value.is_shorthand()) {
  394. auto& shorthand_value = value.as_shorthand();
  395. auto& properties = shorthand_value.sub_properties();
  396. auto& values = shorthand_value.values();
  397. for (size_t i = 0; i < properties.size(); ++i)
  398. for_each_property_expanding_shorthands(properties[i], values[i], set_longhand_property);
  399. return;
  400. }
  401. auto assign_edge_values = [&](PropertyID top_property, PropertyID right_property, PropertyID bottom_property, PropertyID left_property, auto const& values) {
  402. if (values.size() == 4) {
  403. set_longhand_property(top_property, values[0]);
  404. set_longhand_property(right_property, values[1]);
  405. set_longhand_property(bottom_property, values[2]);
  406. set_longhand_property(left_property, values[3]);
  407. } else if (values.size() == 3) {
  408. set_longhand_property(top_property, values[0]);
  409. set_longhand_property(right_property, values[1]);
  410. set_longhand_property(bottom_property, values[2]);
  411. set_longhand_property(left_property, values[1]);
  412. } else if (values.size() == 2) {
  413. set_longhand_property(top_property, values[0]);
  414. set_longhand_property(right_property, values[1]);
  415. set_longhand_property(bottom_property, values[0]);
  416. set_longhand_property(left_property, values[1]);
  417. } else if (values.size() == 1) {
  418. set_longhand_property(top_property, values[0]);
  419. set_longhand_property(right_property, values[0]);
  420. set_longhand_property(bottom_property, values[0]);
  421. set_longhand_property(left_property, values[0]);
  422. }
  423. };
  424. if (property_id == CSS::PropertyID::Border) {
  425. for_each_property_expanding_shorthands(CSS::PropertyID::BorderTop, value, set_longhand_property);
  426. for_each_property_expanding_shorthands(CSS::PropertyID::BorderRight, value, set_longhand_property);
  427. for_each_property_expanding_shorthands(CSS::PropertyID::BorderBottom, value, set_longhand_property);
  428. for_each_property_expanding_shorthands(CSS::PropertyID::BorderLeft, value, set_longhand_property);
  429. // FIXME: Also reset border-image, in line with the spec: https://www.w3.org/TR/css-backgrounds-3/#border-shorthands
  430. return;
  431. }
  432. if (property_id == CSS::PropertyID::BorderStyle) {
  433. if (value.is_value_list()) {
  434. auto const& values_list = value.as_value_list();
  435. assign_edge_values(PropertyID::BorderTopStyle, PropertyID::BorderRightStyle, PropertyID::BorderBottomStyle, PropertyID::BorderLeftStyle, values_list.values());
  436. return;
  437. }
  438. set_longhand_property(CSS::PropertyID::BorderTopStyle, value);
  439. set_longhand_property(CSS::PropertyID::BorderRightStyle, value);
  440. set_longhand_property(CSS::PropertyID::BorderBottomStyle, value);
  441. set_longhand_property(CSS::PropertyID::BorderLeftStyle, value);
  442. return;
  443. }
  444. if (property_id == CSS::PropertyID::BorderWidth) {
  445. if (value.is_value_list()) {
  446. auto const& values_list = value.as_value_list();
  447. assign_edge_values(PropertyID::BorderTopWidth, PropertyID::BorderRightWidth, PropertyID::BorderBottomWidth, PropertyID::BorderLeftWidth, values_list.values());
  448. return;
  449. }
  450. set_longhand_property(CSS::PropertyID::BorderTopWidth, value);
  451. set_longhand_property(CSS::PropertyID::BorderRightWidth, value);
  452. set_longhand_property(CSS::PropertyID::BorderBottomWidth, value);
  453. set_longhand_property(CSS::PropertyID::BorderLeftWidth, value);
  454. return;
  455. }
  456. if (property_id == CSS::PropertyID::BorderColor) {
  457. if (value.is_value_list()) {
  458. auto const& values_list = value.as_value_list();
  459. assign_edge_values(PropertyID::BorderTopColor, PropertyID::BorderRightColor, PropertyID::BorderBottomColor, PropertyID::BorderLeftColor, values_list.values());
  460. return;
  461. }
  462. set_longhand_property(CSS::PropertyID::BorderTopColor, value);
  463. set_longhand_property(CSS::PropertyID::BorderRightColor, value);
  464. set_longhand_property(CSS::PropertyID::BorderBottomColor, value);
  465. set_longhand_property(CSS::PropertyID::BorderLeftColor, value);
  466. return;
  467. }
  468. if (property_id == CSS::PropertyID::BackgroundPosition) {
  469. if (value.is_position()) {
  470. auto const& position = value.as_position();
  471. set_longhand_property(CSS::PropertyID::BackgroundPositionX, position.edge_x());
  472. set_longhand_property(CSS::PropertyID::BackgroundPositionY, position.edge_y());
  473. } else if (value.is_value_list()) {
  474. // Expand background-position layer list into separate lists for x and y positions:
  475. auto const& values_list = value.as_value_list();
  476. StyleValueVector x_positions {};
  477. StyleValueVector y_positions {};
  478. x_positions.ensure_capacity(values_list.size());
  479. y_positions.ensure_capacity(values_list.size());
  480. for (auto& layer : values_list.values()) {
  481. if (layer->is_position()) {
  482. auto const& position = layer->as_position();
  483. x_positions.unchecked_append(position.edge_x());
  484. y_positions.unchecked_append(position.edge_y());
  485. } else {
  486. x_positions.unchecked_append(layer);
  487. y_positions.unchecked_append(layer);
  488. }
  489. }
  490. set_longhand_property(CSS::PropertyID::BackgroundPositionX, StyleValueList::create(move(x_positions), values_list.separator()));
  491. set_longhand_property(CSS::PropertyID::BackgroundPositionY, StyleValueList::create(move(y_positions), values_list.separator()));
  492. } else {
  493. set_longhand_property(CSS::PropertyID::BackgroundPositionX, value);
  494. set_longhand_property(CSS::PropertyID::BackgroundPositionY, value);
  495. }
  496. return;
  497. }
  498. if (property_id == CSS::PropertyID::Inset) {
  499. if (value.is_value_list()) {
  500. auto const& values_list = value.as_value_list();
  501. assign_edge_values(PropertyID::Top, PropertyID::Right, PropertyID::Bottom, PropertyID::Left, values_list.values());
  502. return;
  503. }
  504. set_longhand_property(CSS::PropertyID::Top, value);
  505. set_longhand_property(CSS::PropertyID::Right, value);
  506. set_longhand_property(CSS::PropertyID::Bottom, value);
  507. set_longhand_property(CSS::PropertyID::Left, value);
  508. return;
  509. }
  510. if (property_id == CSS::PropertyID::Margin) {
  511. if (value.is_value_list()) {
  512. auto const& values_list = value.as_value_list();
  513. assign_edge_values(PropertyID::MarginTop, PropertyID::MarginRight, PropertyID::MarginBottom, PropertyID::MarginLeft, values_list.values());
  514. return;
  515. }
  516. set_longhand_property(CSS::PropertyID::MarginTop, value);
  517. set_longhand_property(CSS::PropertyID::MarginRight, value);
  518. set_longhand_property(CSS::PropertyID::MarginBottom, value);
  519. set_longhand_property(CSS::PropertyID::MarginLeft, value);
  520. return;
  521. }
  522. if (property_id == CSS::PropertyID::Padding) {
  523. if (value.is_value_list()) {
  524. auto const& values_list = value.as_value_list();
  525. assign_edge_values(PropertyID::PaddingTop, PropertyID::PaddingRight, PropertyID::PaddingBottom, PropertyID::PaddingLeft, values_list.values());
  526. return;
  527. }
  528. set_longhand_property(CSS::PropertyID::PaddingTop, value);
  529. set_longhand_property(CSS::PropertyID::PaddingRight, value);
  530. set_longhand_property(CSS::PropertyID::PaddingBottom, value);
  531. set_longhand_property(CSS::PropertyID::PaddingLeft, value);
  532. return;
  533. }
  534. if (property_id == CSS::PropertyID::Gap || property_id == CSS::PropertyID::GridGap) {
  535. if (value.is_value_list()) {
  536. auto const& values_list = value.as_value_list();
  537. set_longhand_property(CSS::PropertyID::RowGap, values_list.values()[0]);
  538. set_longhand_property(CSS::PropertyID::ColumnGap, values_list.values()[1]);
  539. return;
  540. }
  541. set_longhand_property(CSS::PropertyID::RowGap, value);
  542. set_longhand_property(CSS::PropertyID::ColumnGap, value);
  543. return;
  544. }
  545. if (property_id == CSS::PropertyID::RowGap || property_id == CSS::PropertyID::GridRowGap) {
  546. set_longhand_property(CSS::PropertyID::RowGap, value);
  547. return;
  548. }
  549. if (property_id == CSS::PropertyID::ColumnGap || property_id == CSS::PropertyID::GridColumnGap) {
  550. set_longhand_property(CSS::PropertyID::ColumnGap, value);
  551. return;
  552. }
  553. if (property_id == CSS::PropertyID::MaxInlineSize || property_id == CSS::PropertyID::MinInlineSize) {
  554. // FIXME: Use writing-mode to determine if we should set width or height.
  555. bool is_horizontal = true;
  556. if (is_horizontal) {
  557. if (property_id == CSS::PropertyID::MaxInlineSize) {
  558. set_longhand_property(CSS::PropertyID::MaxWidth, value);
  559. } else {
  560. set_longhand_property(CSS::PropertyID::MinWidth, value);
  561. }
  562. } else {
  563. if (property_id == CSS::PropertyID::MaxInlineSize) {
  564. set_longhand_property(CSS::PropertyID::MaxHeight, value);
  565. } else {
  566. set_longhand_property(CSS::PropertyID::MinHeight, value);
  567. }
  568. }
  569. return;
  570. }
  571. if (property_is_shorthand(property_id)) {
  572. // ShorthandStyleValue was handled already.
  573. // That means if we got here, that `value` must be a CSS-wide keyword, which we should apply to our longhand properties.
  574. // We don't directly call `set_longhand_property()` because the longhands might have longhands of their own.
  575. // (eg `grid` -> `grid-template` -> `grid-template-areas` & `grid-template-rows` & `grid-template-columns`)
  576. VERIFY(value.is_css_wide_keyword());
  577. for (auto longhand : longhands_for_shorthand(property_id))
  578. for_each_property_expanding_shorthands(longhand, value, set_longhand_property);
  579. return;
  580. }
  581. set_longhand_property(property_id, value);
  582. }
  583. void StyleComputer::set_property_expanding_shorthands(StyleProperties& style, CSS::PropertyID property_id, StyleValue const& value, CSS::CSSStyleDeclaration const* declaration, StyleProperties::PropertyValues const& properties_for_revert)
  584. {
  585. for_each_property_expanding_shorthands(property_id, value, [&](PropertyID shorthand_id, StyleValue const& shorthand_value) {
  586. if (shorthand_value.is_revert()) {
  587. auto& property_in_previous_cascade_origin = properties_for_revert[to_underlying(shorthand_id)];
  588. if (property_in_previous_cascade_origin.has_value())
  589. style.set_property(shorthand_id, property_in_previous_cascade_origin->style, property_in_previous_cascade_origin->declaration);
  590. } else {
  591. style.set_property(shorthand_id, shorthand_value, declaration);
  592. }
  593. });
  594. }
  595. void StyleComputer::set_all_properties(DOM::Element& element, Optional<CSS::Selector::PseudoElement::Type> pseudo_element, StyleProperties& style, StyleValue const& value, DOM::Document& document, CSS::CSSStyleDeclaration const* declaration, StyleProperties::PropertyValues const& properties_for_revert) const
  596. {
  597. for (auto i = to_underlying(CSS::first_longhand_property_id); i <= to_underlying(CSS::last_longhand_property_id); ++i) {
  598. auto property_id = (CSS::PropertyID)i;
  599. if (value.is_revert()) {
  600. style.m_property_values[to_underlying(property_id)] = properties_for_revert[to_underlying(property_id)];
  601. continue;
  602. }
  603. if (value.is_unset()) {
  604. if (is_inherited_property(property_id))
  605. style.m_property_values[to_underlying(property_id)] = { { get_inherit_value(document.realm(), property_id, &element, pseudo_element), nullptr } };
  606. else
  607. style.m_property_values[to_underlying(property_id)] = { { property_initial_value(document.realm(), property_id), nullptr } };
  608. continue;
  609. }
  610. NonnullRefPtr<StyleValue> property_value = value;
  611. if (property_value->is_unresolved())
  612. property_value = Parser::Parser::resolve_unresolved_style_value({}, Parser::ParsingContext { document }, element, pseudo_element, property_id, property_value->as_unresolved());
  613. if (!property_value->is_unresolved())
  614. set_property_expanding_shorthands(style, property_id, property_value, declaration, properties_for_revert);
  615. set_property_expanding_shorthands(style, property_id, value, declaration, properties_for_revert);
  616. }
  617. }
  618. void StyleComputer::cascade_declarations(StyleProperties& style, DOM::Element& element, Optional<CSS::Selector::PseudoElement::Type> pseudo_element, Vector<MatchingRule> const& matching_rules, CascadeOrigin cascade_origin, Important important) const
  619. {
  620. auto properties_for_revert = style.properties();
  621. for (auto const& match : matching_rules) {
  622. for (auto const& property : verify_cast<PropertyOwningCSSStyleDeclaration>(match.rule->declaration()).properties()) {
  623. if (important != property.important)
  624. continue;
  625. if (property.property_id == CSS::PropertyID::All) {
  626. set_all_properties(element, pseudo_element, style, property.value, m_document, &match.rule->declaration(), properties_for_revert);
  627. continue;
  628. }
  629. auto property_value = property.value;
  630. if (property.value->is_unresolved())
  631. property_value = Parser::Parser::resolve_unresolved_style_value({}, Parser::ParsingContext { document() }, element, pseudo_element, property.property_id, property.value->as_unresolved());
  632. if (!property_value->is_unresolved())
  633. set_property_expanding_shorthands(style, property.property_id, property_value, &match.rule->declaration(), properties_for_revert);
  634. }
  635. }
  636. if (cascade_origin == CascadeOrigin::Author && !pseudo_element.has_value()) {
  637. if (auto const* inline_style = verify_cast<ElementInlineCSSStyleDeclaration>(element.inline_style())) {
  638. for (auto const& property : inline_style->properties()) {
  639. if (important != property.important)
  640. continue;
  641. if (property.property_id == CSS::PropertyID::All) {
  642. set_all_properties(element, pseudo_element, style, property.value, m_document, inline_style, properties_for_revert);
  643. continue;
  644. }
  645. auto property_value = property.value;
  646. if (property.value->is_unresolved())
  647. property_value = Parser::Parser::resolve_unresolved_style_value({}, Parser::ParsingContext { document() }, element, pseudo_element, property.property_id, property.value->as_unresolved());
  648. if (!property_value->is_unresolved())
  649. set_property_expanding_shorthands(style, property.property_id, property_value, inline_style, properties_for_revert);
  650. }
  651. }
  652. }
  653. }
  654. static ErrorOr<void> cascade_custom_properties(DOM::Element& element, Optional<CSS::Selector::PseudoElement::Type> pseudo_element, Vector<MatchingRule> const& matching_rules)
  655. {
  656. size_t needed_capacity = 0;
  657. for (auto const& matching_rule : matching_rules)
  658. needed_capacity += verify_cast<PropertyOwningCSSStyleDeclaration>(matching_rule.rule->declaration()).custom_properties().size();
  659. if (!pseudo_element.has_value()) {
  660. if (auto const* inline_style = verify_cast<PropertyOwningCSSStyleDeclaration>(element.inline_style()))
  661. needed_capacity += inline_style->custom_properties().size();
  662. }
  663. HashMap<FlyString, StyleProperty> custom_properties;
  664. TRY(custom_properties.try_ensure_capacity(needed_capacity));
  665. for (auto const& matching_rule : matching_rules) {
  666. for (auto const& it : verify_cast<PropertyOwningCSSStyleDeclaration>(matching_rule.rule->declaration()).custom_properties())
  667. custom_properties.set(it.key, it.value);
  668. }
  669. if (!pseudo_element.has_value()) {
  670. if (auto const* inline_style = verify_cast<PropertyOwningCSSStyleDeclaration>(element.inline_style())) {
  671. for (auto const& it : inline_style->custom_properties())
  672. custom_properties.set(it.key, it.value);
  673. }
  674. }
  675. element.set_custom_properties(pseudo_element, move(custom_properties));
  676. return {};
  677. }
  678. static ErrorOr<NonnullRefPtr<StyleValue const>> interpolate_value(StyleValue const& from, StyleValue const& to, float delta)
  679. {
  680. if (from.type() != to.type())
  681. return delta >= 0.5f ? to : from;
  682. auto interpolate_raw = [delta = static_cast<double>(delta)](auto from, auto to) {
  683. return static_cast<RemoveCVReference<decltype(from)>>(static_cast<double>(from) + static_cast<double>(to - from) * delta);
  684. };
  685. switch (from.type()) {
  686. case StyleValue::Type::Angle:
  687. return AngleStyleValue::create(Angle::make_degrees(interpolate_raw(from.as_angle().angle().to_degrees(), to.as_angle().angle().to_degrees())));
  688. case StyleValue::Type::Color: {
  689. auto from_color = from.as_color().color();
  690. auto to_color = to.as_color().color();
  691. auto from_oklab = from_color.to_oklab();
  692. auto to_oklab = to_color.to_oklab();
  693. auto color = Color::from_oklab(
  694. interpolate_raw(from_oklab.L, to_oklab.L),
  695. interpolate_raw(from_oklab.a, to_oklab.a),
  696. interpolate_raw(from_oklab.b, to_oklab.b));
  697. color.set_alpha(interpolate_raw(from_color.alpha(), to_color.alpha()));
  698. return ColorStyleValue::create(color);
  699. }
  700. case StyleValue::Type::Integer:
  701. return IntegerStyleValue::create(interpolate_raw(from.as_integer().integer(), to.as_integer().integer()));
  702. case StyleValue::Type::Length: {
  703. auto& from_length = from.as_length().length();
  704. auto& to_length = to.as_length().length();
  705. return LengthStyleValue::create(Length(interpolate_raw(from_length.raw_value(), to_length.raw_value()), from_length.type()));
  706. }
  707. case StyleValue::Type::Number:
  708. return NumberStyleValue::create(interpolate_raw(from.as_number().number(), to.as_number().number()));
  709. case StyleValue::Type::Percentage:
  710. return PercentageStyleValue::create(Percentage(interpolate_raw(from.as_percentage().percentage().value(), to.as_percentage().percentage().value())));
  711. case StyleValue::Type::Position: {
  712. // https://www.w3.org/TR/css-values-4/#combine-positions
  713. // FIXME: Interpolation of <position> is defined as the independent interpolation of each component (x, y) normalized as an offset from the top left corner as a <length-percentage>.
  714. auto& from_position = from.as_position();
  715. auto& to_position = to.as_position();
  716. return PositionStyleValue::create(
  717. TRY(interpolate_value(from_position.edge_x(), to_position.edge_x(), delta))->as_edge(),
  718. TRY(interpolate_value(from_position.edge_y(), to_position.edge_y(), delta))->as_edge());
  719. }
  720. case StyleValue::Type::Rect: {
  721. auto from_rect = from.as_rect().rect();
  722. auto to_rect = to.as_rect().rect();
  723. return RectStyleValue::create({
  724. Length(interpolate_raw(from_rect.top_edge.raw_value(), to_rect.top_edge.raw_value()), from_rect.top_edge.type()),
  725. Length(interpolate_raw(from_rect.right_edge.raw_value(), to_rect.right_edge.raw_value()), from_rect.right_edge.type()),
  726. Length(interpolate_raw(from_rect.bottom_edge.raw_value(), to_rect.bottom_edge.raw_value()), from_rect.bottom_edge.type()),
  727. Length(interpolate_raw(from_rect.left_edge.raw_value(), to_rect.left_edge.raw_value()), from_rect.left_edge.type()),
  728. });
  729. }
  730. case StyleValue::Type::Transformation:
  731. VERIFY_NOT_REACHED();
  732. case StyleValue::Type::ValueList: {
  733. auto& from_list = from.as_value_list();
  734. auto& to_list = to.as_value_list();
  735. if (from_list.size() != to_list.size())
  736. return from;
  737. StyleValueVector interpolated_values;
  738. interpolated_values.ensure_capacity(from_list.size());
  739. for (size_t i = 0; i < from_list.size(); ++i)
  740. interpolated_values.append(TRY(interpolate_value(from_list.values()[i], to_list.values()[i], delta)));
  741. return StyleValueList::create(move(interpolated_values), from_list.separator());
  742. }
  743. default:
  744. return from;
  745. }
  746. }
  747. static ErrorOr<ValueComparingNonnullRefPtr<StyleValue const>> interpolate_property(PropertyID property_id, StyleValue const& from, StyleValue const& to, float delta)
  748. {
  749. auto animation_type = animation_type_from_longhand_property(property_id);
  750. switch (animation_type) {
  751. case AnimationType::ByComputedValue:
  752. return interpolate_value(from, to, delta);
  753. case AnimationType::None:
  754. return to;
  755. case AnimationType::Custom: {
  756. if (property_id == PropertyID::Transform) {
  757. // Try to optimize same-function interpolation
  758. if (from.is_transformation() && to.is_transformation()) {
  759. auto& from_transform = from.as_transformation();
  760. auto& to_transform = to.as_transformation();
  761. if (from_transform.transform_function() == to_transform.transform_function()) {
  762. auto from_input_values = from_transform.values();
  763. auto to_input_values = to_transform.values();
  764. if (from_input_values.size() == to_input_values.size()) {
  765. StyleValueVector interpolated_values;
  766. interpolated_values.ensure_capacity(from_input_values.size());
  767. for (size_t i = 0; i < from_input_values.size(); ++i)
  768. interpolated_values.append(TRY(interpolate_value(element, *from_input_values[i], *to_input_values[i], delta)));
  769. return TransformationStyleValue::create(from_transform.transform_function(), move(interpolated_values));
  770. }
  771. }
  772. }
  773. return from;
  774. }
  775. // FIXME: Handle all custom animatable properties
  776. [[fallthrough]];
  777. }
  778. // FIXME: Handle repeatable-list animatable properties
  779. case AnimationType::RepeatableList:
  780. case AnimationType::Discrete:
  781. default:
  782. return delta >= 0.5f ? to : from;
  783. }
  784. }
  785. ErrorOr<void> StyleComputer::collect_animation_into(JS::NonnullGCPtr<Animations::KeyframeEffect> effect, StyleProperties& style_properties) const
  786. {
  787. auto animation = effect->associated_animation();
  788. if (!animation)
  789. return {};
  790. auto output_progress = effect->transformed_progress();
  791. if (!output_progress.has_value())
  792. return {};
  793. if (!effect->key_frame_set())
  794. return {};
  795. auto& keyframes = effect->key_frame_set()->keyframes_by_key;
  796. auto key = static_cast<u64>(output_progress.value() * 100.0 * Animations::KeyframeEffect::AnimationKeyFrameKeyScaleFactor);
  797. auto matching_keyframe_it = keyframes.find_largest_not_above_iterator(key);
  798. if (matching_keyframe_it.is_end()) {
  799. if constexpr (LIBWEB_CSS_ANIMATION_DEBUG) {
  800. dbgln(" Did not find any start keyframe for the current state ({}) :(", key);
  801. dbgln(" (have {} keyframes)", keyframes.size());
  802. for (auto it = keyframes.begin(); it != keyframes.end(); ++it)
  803. dbgln(" - {}", it.key());
  804. }
  805. return {};
  806. }
  807. auto keyframe_start = matching_keyframe_it.key();
  808. auto keyframe_values = *matching_keyframe_it;
  809. auto initial_keyframe_it = matching_keyframe_it;
  810. auto keyframe_end_it = ++matching_keyframe_it;
  811. if (keyframe_end_it.is_end())
  812. keyframe_end_it = initial_keyframe_it;
  813. auto keyframe_end = keyframe_end_it.key();
  814. auto keyframe_end_values = *keyframe_end_it;
  815. auto progress_in_keyframe = [&] {
  816. if (keyframe_start == keyframe_end)
  817. return 0.f;
  818. return static_cast<float>(key - keyframe_start) / static_cast<float>(keyframe_end - keyframe_start);
  819. }();
  820. if constexpr (LIBWEB_CSS_ANIMATION_DEBUG) {
  821. auto valid_properties = keyframe_values.resolved_properties.size();
  822. dbgln("Animation {} contains {} properties to interpolate, progress = {}%", animation->id(), valid_properties, progress_in_keyframe * 100);
  823. }
  824. for (auto const& it : keyframe_values.resolved_properties) {
  825. auto resolve_property = [&](auto& property) {
  826. return property.visit(
  827. [&](Animations::KeyframeEffect::KeyFrameSet::UseInitial) -> RefPtr<StyleValue const> {
  828. return style_properties.maybe_null_property(it.key);
  829. },
  830. [&](RefPtr<StyleValue const> value) { return value; });
  831. };
  832. auto resolved_start_property = resolve_property(it.value);
  833. auto const& end_property = keyframe_end_values.resolved_properties.get(it.key);
  834. if (!end_property.has_value()) {
  835. if (resolved_start_property) {
  836. style_properties.set_property(it.key, *resolved_start_property);
  837. dbgln_if(LIBWEB_CSS_ANIMATION_DEBUG, "No end property for property {}, using {}", string_from_property_id(it.key), resolved_start_property->to_string());
  838. }
  839. continue;
  840. }
  841. auto resolved_end_property = resolve_property(end_property.value());
  842. if (resolved_end_property && !resolved_start_property)
  843. resolved_start_property = CSS::property_initial_value(document().realm(), it.key);
  844. if (!resolved_start_property || !resolved_end_property)
  845. continue;
  846. auto start = resolved_start_property.release_nonnull();
  847. auto end = resolved_end_property.release_nonnull();
  848. auto next_value = TRY(interpolate_property(it.key, *start, *end, progress_in_keyframe));
  849. dbgln_if(LIBWEB_CSS_ANIMATION_DEBUG, "Interpolated value for property {} at {}: {} -> {} = {}", string_from_property_id(it.key), progress_in_keyframe, start->to_string(), end->to_string(), next_value->to_string());
  850. style_properties.set_property(it.key, next_value);
  851. }
  852. return {};
  853. }
  854. static void apply_animation_properties(DOM::Document& document, StyleProperties& style, Animations::Animation& animation)
  855. {
  856. auto& effect = verify_cast<Animations::KeyframeEffect>(*animation.effect());
  857. Optional<CSS::Time> duration;
  858. if (auto duration_value = style.maybe_null_property(PropertyID::AnimationDuration); duration_value) {
  859. if (duration_value->is_time()) {
  860. duration = duration_value->as_time().time();
  861. } else if (duration_value->is_identifier() && duration_value->as_identifier().id() == ValueID::Auto) {
  862. // We use empty optional to represent "auto".
  863. duration = {};
  864. }
  865. }
  866. CSS::Time delay { 0, CSS::Time::Type::S };
  867. if (auto delay_value = style.maybe_null_property(PropertyID::AnimationDelay); delay_value && delay_value->is_time())
  868. delay = delay_value->as_time().time();
  869. double iteration_count = 1.0;
  870. if (auto iteration_count_value = style.maybe_null_property(PropertyID::AnimationIterationCount); iteration_count_value) {
  871. if (iteration_count_value->is_identifier() && iteration_count_value->to_identifier() == ValueID::Infinite)
  872. iteration_count = HUGE_VAL;
  873. else if (iteration_count_value->is_number())
  874. iteration_count = iteration_count_value->as_number().number();
  875. }
  876. CSS::AnimationFillMode fill_mode { CSS::AnimationFillMode::None };
  877. if (auto fill_mode_property = style.maybe_null_property(PropertyID::AnimationFillMode); fill_mode_property && fill_mode_property->is_identifier()) {
  878. if (auto fill_mode_value = value_id_to_animation_fill_mode(fill_mode_property->to_identifier()); fill_mode_value.has_value())
  879. fill_mode = *fill_mode_value;
  880. }
  881. CSS::AnimationDirection direction { CSS::AnimationDirection::Normal };
  882. if (auto direction_property = style.maybe_null_property(PropertyID::AnimationDirection); direction_property && direction_property->is_identifier()) {
  883. if (auto direction_value = value_id_to_animation_direction(direction_property->to_identifier()); direction_value.has_value())
  884. direction = *direction_value;
  885. }
  886. CSS::AnimationPlayState play_state { CSS::AnimationPlayState::Running };
  887. if (auto play_state_property = style.maybe_null_property(PropertyID::AnimationPlayState); play_state_property && play_state_property->is_identifier()) {
  888. if (auto play_state_value = value_id_to_animation_play_state(play_state_property->to_identifier()); play_state_value.has_value())
  889. play_state = *play_state_value;
  890. }
  891. Animations::TimingFunction timing_function = Animations::ease_timing_function;
  892. if (auto timing_property = style.maybe_null_property(PropertyID::AnimationTimingFunction); timing_property && timing_property->is_easing())
  893. timing_function = Animations::TimingFunction::from_easing_style_value(timing_property->as_easing());
  894. auto iteration_duration = duration.has_value()
  895. ? Variant<double, String> { duration.release_value().to_milliseconds() }
  896. : "auto"_string;
  897. effect.set_iteration_duration(iteration_duration);
  898. effect.set_start_delay(delay.to_milliseconds());
  899. effect.set_iteration_count(iteration_count);
  900. effect.set_timing_function(move(timing_function));
  901. effect.set_fill_mode(Animations::css_fill_mode_to_bindings_fill_mode(fill_mode));
  902. effect.set_playback_direction(Animations::css_animation_direction_to_bindings_playback_direction(direction));
  903. HTML::TemporaryExecutionContext context(document.relevant_settings_object());
  904. if (play_state == CSS::AnimationPlayState::Running && animation.play_state() != Bindings::AnimationPlayState::Running) {
  905. animation.play().release_value_but_fixme_should_propagate_errors();
  906. } else if (play_state == CSS::AnimationPlayState::Paused && animation.play_state() != Bindings::AnimationPlayState::Paused) {
  907. animation.pause().release_value_but_fixme_should_propagate_errors();
  908. }
  909. }
  910. // https://www.w3.org/TR/css-cascade/#cascading
  911. ErrorOr<void> StyleComputer::compute_cascaded_values(StyleProperties& style, DOM::Element& element, Optional<CSS::Selector::PseudoElement::Type> pseudo_element, bool& did_match_any_pseudo_element_rules, ComputeStyleMode mode) const
  912. {
  913. // First, we collect all the CSS rules whose selectors match `element`:
  914. MatchingRuleSet matching_rule_set;
  915. matching_rule_set.user_agent_rules = collect_matching_rules(element, CascadeOrigin::UserAgent, pseudo_element);
  916. sort_matching_rules(matching_rule_set.user_agent_rules);
  917. matching_rule_set.user_rules = collect_matching_rules(element, CascadeOrigin::User, pseudo_element);
  918. sort_matching_rules(matching_rule_set.user_rules);
  919. matching_rule_set.author_rules = collect_matching_rules(element, CascadeOrigin::Author, pseudo_element);
  920. sort_matching_rules(matching_rule_set.author_rules);
  921. if (mode == ComputeStyleMode::CreatePseudoElementStyleIfNeeded) {
  922. VERIFY(pseudo_element.has_value());
  923. if (matching_rule_set.author_rules.is_empty() && matching_rule_set.user_rules.is_empty() && matching_rule_set.user_agent_rules.is_empty()) {
  924. did_match_any_pseudo_element_rules = false;
  925. return {};
  926. }
  927. did_match_any_pseudo_element_rules = true;
  928. }
  929. // Then we resolve all the CSS custom properties ("variables") for this element:
  930. TRY(cascade_custom_properties(element, pseudo_element, matching_rule_set.author_rules));
  931. // Then we apply the declarations from the matched rules in cascade order:
  932. // Normal user agent declarations
  933. cascade_declarations(style, element, pseudo_element, matching_rule_set.user_agent_rules, CascadeOrigin::UserAgent, Important::No);
  934. // Normal user declarations
  935. cascade_declarations(style, element, pseudo_element, matching_rule_set.user_rules, CascadeOrigin::User, Important::No);
  936. // Author presentational hints (NOTE: The spec doesn't say exactly how to prioritize these.)
  937. if (!pseudo_element.has_value()) {
  938. element.apply_presentational_hints(style);
  939. // SVG presentation attributes are parsed as CSS values, so we need to handle potential custom properties here.
  940. if (element.is_svg_element()) {
  941. // FIXME: This is not very efficient, we should only resolve the custom properties that are actually used.
  942. for (auto i = to_underlying(CSS::first_property_id); i <= to_underlying(CSS::last_property_id); ++i) {
  943. auto property_id = (CSS::PropertyID)i;
  944. auto& property = style.m_property_values[i];
  945. if (property.has_value() && property->style->is_unresolved())
  946. property->style = Parser::Parser::resolve_unresolved_style_value({}, Parser::ParsingContext { document() }, element, pseudo_element, property_id, property->style->as_unresolved());
  947. }
  948. }
  949. }
  950. // Normal author declarations
  951. cascade_declarations(style, element, pseudo_element, matching_rule_set.author_rules, CascadeOrigin::Author, Important::No);
  952. // Animation declarations [css-animations-2]
  953. auto animation_name = [&]() -> Optional<String> {
  954. auto animation_name = style.maybe_null_property(PropertyID::AnimationName);
  955. if (animation_name.is_null())
  956. return OptionalNone {};
  957. if (animation_name->is_string())
  958. return animation_name->as_string().string_value();
  959. return animation_name->to_string();
  960. }();
  961. if (animation_name.has_value()) {
  962. if (auto source_declaration = style.property_source_declaration(PropertyID::AnimationName); source_declaration) {
  963. auto& realm = element.realm();
  964. if (source_declaration != element.cached_animation_name_source()) {
  965. // This animation name is new, so we need to create a new animation for it.
  966. if (auto existing_animation = element.cached_animation_name_animation())
  967. existing_animation->cancel();
  968. element.set_cached_animation_name_source(source_declaration);
  969. auto effect = Animations::KeyframeEffect::create(realm);
  970. auto animation = CSSAnimation::create(realm);
  971. animation->set_id(animation_name.release_value());
  972. animation->set_timeline(m_document->timeline());
  973. animation->set_owning_element(element);
  974. animation->set_effect(effect);
  975. apply_animation_properties(m_document, style, animation);
  976. if (pseudo_element.has_value())
  977. effect->set_pseudo_element(Selector::PseudoElement { pseudo_element.value() });
  978. auto const& rule_cache = rule_cache_for_cascade_origin(CascadeOrigin::Author);
  979. if (auto keyframe_set = rule_cache.rules_by_animation_keyframes.get(animation->id()); keyframe_set.has_value())
  980. effect->set_key_frame_set(keyframe_set.value());
  981. element.associate_with_effect(effect);
  982. element.set_cached_animation_name_animation(animation);
  983. } else {
  984. // The animation hasn't changed, but some properties of the animation may have
  985. apply_animation_properties(m_document, style, *element.cached_animation_name_animation());
  986. }
  987. }
  988. } else {
  989. // If the element had an existing animation, cancel it
  990. if (auto existing_animation = element.cached_animation_name_animation()) {
  991. existing_animation->cancel();
  992. element.set_cached_animation_name_animation({});
  993. element.set_cached_animation_name_source({});
  994. }
  995. }
  996. auto animations = element.get_animations({ .subtree = false });
  997. for (auto& animation : animations) {
  998. if (!animation->is_relevant())
  999. continue;
  1000. if (auto effect = animation->effect(); effect && effect->is_keyframe_effect()) {
  1001. auto& keyframe_effect = *static_cast<Animations::KeyframeEffect*>(effect.ptr());
  1002. if (keyframe_effect.pseudo_element_type() == pseudo_element)
  1003. TRY(collect_animation_into(keyframe_effect, style));
  1004. }
  1005. }
  1006. // Important author declarations
  1007. cascade_declarations(style, element, pseudo_element, matching_rule_set.author_rules, CascadeOrigin::Author, Important::Yes);
  1008. // Important user declarations
  1009. cascade_declarations(style, element, pseudo_element, matching_rule_set.user_rules, CascadeOrigin::User, Important::Yes);
  1010. // Important user agent declarations
  1011. cascade_declarations(style, element, pseudo_element, matching_rule_set.user_agent_rules, CascadeOrigin::UserAgent, Important::Yes);
  1012. // FIXME: Transition declarations [css-transitions-1]
  1013. return {};
  1014. }
  1015. DOM::Element const* element_to_inherit_style_from(DOM::Element const* element, Optional<CSS::Selector::PseudoElement::Type> pseudo_element)
  1016. {
  1017. // Pseudo-elements treat their originating element as their parent.
  1018. DOM::Element const* parent_element = nullptr;
  1019. if (pseudo_element.has_value()) {
  1020. parent_element = element;
  1021. } else if (element) {
  1022. parent_element = element->parent_or_shadow_host_element();
  1023. }
  1024. return parent_element;
  1025. }
  1026. NonnullRefPtr<StyleValue const> get_inherit_value(JS::Realm& initial_value_context_realm, CSS::PropertyID property_id, DOM::Element const* element, Optional<CSS::Selector::PseudoElement::Type> pseudo_element)
  1027. {
  1028. auto* parent_element = element_to_inherit_style_from(element, pseudo_element);
  1029. if (!parent_element || !parent_element->computed_css_values())
  1030. return property_initial_value(initial_value_context_realm, property_id);
  1031. return parent_element->computed_css_values()->property(property_id);
  1032. }
  1033. void StyleComputer::compute_defaulted_property_value(StyleProperties& style, DOM::Element const* element, CSS::PropertyID property_id, Optional<CSS::Selector::PseudoElement::Type> pseudo_element) const
  1034. {
  1035. // FIXME: If we don't know the correct initial value for a property, we fall back to InitialStyleValue.
  1036. auto& value_slot = style.m_property_values[to_underlying(property_id)];
  1037. if (!value_slot.has_value()) {
  1038. if (is_inherited_property(property_id))
  1039. style.m_property_values[to_underlying(property_id)] = { { get_inherit_value(document().realm(), property_id, element, pseudo_element), nullptr } };
  1040. else
  1041. style.m_property_values[to_underlying(property_id)] = { { property_initial_value(document().realm(), property_id), nullptr } };
  1042. return;
  1043. }
  1044. if (value_slot->style->is_initial()) {
  1045. value_slot->style = property_initial_value(document().realm(), property_id);
  1046. return;
  1047. }
  1048. if (value_slot->style->is_inherit()) {
  1049. value_slot->style = get_inherit_value(document().realm(), property_id, element, pseudo_element);
  1050. return;
  1051. }
  1052. // https://www.w3.org/TR/css-cascade-4/#inherit-initial
  1053. // If the cascaded value of a property is the unset keyword,
  1054. if (value_slot->style->is_unset()) {
  1055. if (is_inherited_property(property_id)) {
  1056. // then if it is an inherited property, this is treated as inherit,
  1057. value_slot->style = get_inherit_value(document().realm(), property_id, element, pseudo_element);
  1058. } else {
  1059. // and if it is not, this is treated as initial.
  1060. value_slot->style = property_initial_value(document().realm(), property_id);
  1061. }
  1062. }
  1063. }
  1064. // https://www.w3.org/TR/css-cascade/#defaulting
  1065. void StyleComputer::compute_defaulted_values(StyleProperties& style, DOM::Element const* element, Optional<CSS::Selector::PseudoElement::Type> pseudo_element) const
  1066. {
  1067. // Walk the list of all known CSS properties and:
  1068. // - Add them to `style` if they are missing.
  1069. // - Resolve `inherit` and `initial` as needed.
  1070. for (auto i = to_underlying(CSS::first_longhand_property_id); i <= to_underlying(CSS::last_longhand_property_id); ++i) {
  1071. auto property_id = (CSS::PropertyID)i;
  1072. compute_defaulted_property_value(style, element, property_id, pseudo_element);
  1073. }
  1074. // https://www.w3.org/TR/css-color-4/#resolving-other-colors
  1075. // In the color property, the used value of currentcolor is the inherited value.
  1076. auto color = style.property(CSS::PropertyID::Color);
  1077. if (color->to_identifier() == CSS::ValueID::Currentcolor) {
  1078. color = get_inherit_value(document().realm(), CSS::PropertyID::Color, element, pseudo_element);
  1079. style.set_property(CSS::PropertyID::Color, color);
  1080. }
  1081. }
  1082. Length::FontMetrics StyleComputer::calculate_root_element_font_metrics(StyleProperties const& style) const
  1083. {
  1084. auto root_value = style.property(CSS::PropertyID::FontSize);
  1085. auto font_pixel_metrics = style.first_available_computed_font().pixel_metrics();
  1086. Length::FontMetrics font_metrics { m_default_font_metrics.font_size, font_pixel_metrics };
  1087. font_metrics.font_size = root_value->as_length().length().to_px(viewport_rect(), font_metrics, font_metrics);
  1088. font_metrics.line_height = style.compute_line_height(viewport_rect(), font_metrics, font_metrics);
  1089. return font_metrics;
  1090. }
  1091. RefPtr<Gfx::FontCascadeList const> StyleComputer::find_matching_font_weight_ascending(Vector<MatchingFontCandidate> const& candidates, int target_weight, float font_size_in_pt, bool inclusive)
  1092. {
  1093. using Fn = AK::Function<bool(MatchingFontCandidate const&)>;
  1094. auto pred = inclusive ? Fn([&](auto const& matching_font_candidate) { return matching_font_candidate.key.weight >= target_weight; })
  1095. : Fn([&](auto const& matching_font_candidate) { return matching_font_candidate.key.weight > target_weight; });
  1096. auto it = find_if(candidates.begin(), candidates.end(), pred);
  1097. for (; it != candidates.end(); ++it) {
  1098. if (auto found_font = it->font_with_point_size(font_size_in_pt))
  1099. return found_font;
  1100. }
  1101. return {};
  1102. }
  1103. RefPtr<Gfx::FontCascadeList const> StyleComputer::find_matching_font_weight_descending(Vector<MatchingFontCandidate> const& candidates, int target_weight, float font_size_in_pt, bool inclusive)
  1104. {
  1105. using Fn = AK::Function<bool(MatchingFontCandidate const&)>;
  1106. auto pred = inclusive ? Fn([&](auto const& matching_font_candidate) { return matching_font_candidate.key.weight <= target_weight; })
  1107. : Fn([&](auto const& matching_font_candidate) { return matching_font_candidate.key.weight < target_weight; });
  1108. auto it = find_if(candidates.rbegin(), candidates.rend(), pred);
  1109. for (; it != candidates.rend(); ++it) {
  1110. if (auto found_font = it->font_with_point_size(font_size_in_pt))
  1111. return found_font;
  1112. }
  1113. return {};
  1114. }
  1115. // Partial implementation of the font-matching algorithm: https://www.w3.org/TR/css-fonts-4/#font-matching-algorithm
  1116. // FIXME: This should be replaced by the full CSS font selection algorithm.
  1117. RefPtr<Gfx::FontCascadeList const> StyleComputer::font_matching_algorithm(FontFaceKey const& key, float font_size_in_pt) const
  1118. {
  1119. // If a font family match occurs, the user agent assembles the set of font faces in that family and then
  1120. // narrows the set to a single face using other font properties in the order given below.
  1121. Vector<MatchingFontCandidate> matching_family_fonts;
  1122. for (auto const& font_key_and_loader : m_loaded_fonts) {
  1123. if (font_key_and_loader.key.family_name.equals_ignoring_ascii_case(key.family_name))
  1124. matching_family_fonts.empend(font_key_and_loader.key, const_cast<FontLoaderList*>(&font_key_and_loader.value));
  1125. }
  1126. Gfx::FontDatabase::the().for_each_typeface_with_family_name(key.family_name.to_string(), [&](Gfx::Typeface const& typeface) {
  1127. matching_family_fonts.empend(
  1128. FontFaceKey {
  1129. .family_name = typeface.family(),
  1130. .weight = static_cast<int>(typeface.weight()),
  1131. .slope = typeface.slope(),
  1132. },
  1133. &typeface);
  1134. });
  1135. quick_sort(matching_family_fonts, [](auto const& a, auto const& b) {
  1136. return a.key.weight < b.key.weight;
  1137. });
  1138. // FIXME: 1. font-stretch is tried first.
  1139. // FIXME: 2. font-style is tried next.
  1140. // We don't have complete support of italic and oblique fonts, so matching on font-style can be simplified to:
  1141. // If a matching slope is found, all faces which don't have that matching slope are excluded from the matching set.
  1142. auto style_it = find_if(matching_family_fonts.begin(), matching_family_fonts.end(),
  1143. [&](auto const& matching_font_candidate) { return matching_font_candidate.key.slope == key.slope; });
  1144. if (style_it != matching_family_fonts.end()) {
  1145. matching_family_fonts.remove_all_matching([&](auto const& matching_font_candidate) {
  1146. return matching_font_candidate.key.slope != key.slope;
  1147. });
  1148. }
  1149. // 3. font-weight is matched next.
  1150. // If the desired weight is inclusively between 400 and 500, weights greater than or equal to the target weight
  1151. // are checked in ascending order until 500 is hit and checked, followed by weights less than the target weight
  1152. // in descending order, followed by weights greater than 500, until a match is found.
  1153. if (key.weight >= 400 && key.weight <= 500) {
  1154. auto it = find_if(matching_family_fonts.begin(), matching_family_fonts.end(),
  1155. [&](auto const& matching_font_candidate) { return matching_font_candidate.key.weight >= key.weight; });
  1156. for (; it != matching_family_fonts.end() && it->key.weight <= 500; ++it) {
  1157. if (auto found_font = it->font_with_point_size(font_size_in_pt))
  1158. return found_font;
  1159. }
  1160. if (auto found_font = find_matching_font_weight_descending(matching_family_fonts, key.weight, font_size_in_pt, false))
  1161. return found_font;
  1162. for (; it != matching_family_fonts.end(); ++it) {
  1163. if (auto found_font = it->font_with_point_size(font_size_in_pt))
  1164. return found_font;
  1165. }
  1166. }
  1167. // If the desired weight is less than 400, weights less than or equal to the desired weight are checked in descending order
  1168. // followed by weights above the desired weight in ascending order until a match is found.
  1169. if (key.weight < 400) {
  1170. if (auto found_font = find_matching_font_weight_descending(matching_family_fonts, key.weight, font_size_in_pt, true))
  1171. return found_font;
  1172. if (auto found_font = find_matching_font_weight_ascending(matching_family_fonts, key.weight, font_size_in_pt, false))
  1173. return found_font;
  1174. }
  1175. // If the desired weight is greater than 500, weights greater than or equal to the desired weight are checked in ascending order
  1176. // followed by weights below the desired weight in descending order until a match is found.
  1177. if (key.weight > 500) {
  1178. if (auto found_font = find_matching_font_weight_ascending(matching_family_fonts, key.weight, font_size_in_pt, true))
  1179. return found_font;
  1180. if (auto found_font = find_matching_font_weight_descending(matching_family_fonts, key.weight, font_size_in_pt, false))
  1181. return found_font;
  1182. }
  1183. return {};
  1184. }
  1185. RefPtr<Gfx::FontCascadeList const> StyleComputer::compute_font_for_style_values(DOM::Element const* element, Optional<CSS::Selector::PseudoElement::Type> pseudo_element, StyleValue const& font_family, StyleValue const& font_size, StyleValue const& font_style, StyleValue const& font_weight, StyleValue const& font_stretch, int math_depth) const
  1186. {
  1187. auto* parent_element = element_to_inherit_style_from(element, pseudo_element);
  1188. auto width = font_stretch.to_font_stretch_width();
  1189. auto weight = font_weight.to_font_weight();
  1190. bool bold = weight > Gfx::FontWeight::Regular;
  1191. // FIXME: Should be based on "user's default font size"
  1192. CSSPixels font_size_in_px = 16;
  1193. Gfx::FontPixelMetrics font_pixel_metrics;
  1194. if (parent_element && parent_element->computed_css_values())
  1195. font_pixel_metrics = parent_element->computed_css_values()->first_available_computed_font().pixel_metrics();
  1196. else
  1197. font_pixel_metrics = Platform::FontPlugin::the().default_font().pixel_metrics();
  1198. auto parent_font_size = [&]() -> CSSPixels {
  1199. if (!parent_element || !parent_element->computed_css_values())
  1200. return font_size_in_px;
  1201. auto value = parent_element->computed_css_values()->property(CSS::PropertyID::FontSize);
  1202. if (value->is_length()) {
  1203. auto length = value->as_length().length();
  1204. if (length.is_absolute() || length.is_relative()) {
  1205. Length::FontMetrics font_metrics { font_size_in_px, font_pixel_metrics };
  1206. return length.to_px(viewport_rect(), font_metrics, m_root_element_font_metrics);
  1207. }
  1208. }
  1209. return font_size_in_px;
  1210. };
  1211. Length::FontMetrics font_metrics { parent_font_size(), font_pixel_metrics };
  1212. if (font_size.is_identifier()) {
  1213. // https://w3c.github.io/csswg-drafts/css-fonts/#absolute-size-mapping
  1214. auto get_absolute_size_mapping = [](Web::CSS::ValueID identifier) -> CSSPixelFraction {
  1215. switch (identifier) {
  1216. case CSS::ValueID::XxSmall:
  1217. return CSSPixels(3) / 5;
  1218. case CSS::ValueID::XSmall:
  1219. return CSSPixels(3) / 4;
  1220. case CSS::ValueID::Small:
  1221. return CSSPixels(8) / 9;
  1222. case CSS::ValueID::Medium:
  1223. return 1;
  1224. case CSS::ValueID::Large:
  1225. return CSSPixels(6) / 5;
  1226. case CSS::ValueID::XLarge:
  1227. return CSSPixels(3) / 2;
  1228. case CSS::ValueID::XxLarge:
  1229. return 2;
  1230. case CSS::ValueID::XxxLarge:
  1231. return 3;
  1232. case CSS::ValueID::Smaller:
  1233. return CSSPixels(4) / 5;
  1234. case CSS::ValueID::Larger:
  1235. return CSSPixels(5) / 4;
  1236. default:
  1237. return 1;
  1238. }
  1239. };
  1240. auto const identifier = static_cast<IdentifierStyleValue const&>(font_size).id();
  1241. if (identifier == ValueID::Math) {
  1242. auto math_scaling_factor = [&]() {
  1243. // https://w3c.github.io/mathml-core/#the-math-script-level-property
  1244. // If the specified value font-size is math then the computed value of font-size is obtained by multiplying
  1245. // the inherited value of font-size by a nonzero scale factor calculated by the following procedure:
  1246. // 1. Let A be the inherited math-depth value, B the computed math-depth value, C be 0.71 and S be 1.0
  1247. int inherited_math_depth = parent_element && parent_element->computed_css_values()
  1248. ? parent_element->computed_css_values()->math_depth()
  1249. : InitialValues::math_depth();
  1250. int computed_math_depth = math_depth;
  1251. auto size_ratio = 0.71;
  1252. auto scale = 1.0;
  1253. // 2. If A = B then return S.
  1254. bool invert_scale_factor = false;
  1255. if (inherited_math_depth == computed_math_depth) {
  1256. return scale;
  1257. }
  1258. // If B < A, swap A and B and set InvertScaleFactor to true.
  1259. else if (computed_math_depth < inherited_math_depth) {
  1260. AK::swap(inherited_math_depth, computed_math_depth);
  1261. invert_scale_factor = true;
  1262. }
  1263. // Otherwise B > A and set InvertScaleFactor to false.
  1264. else {
  1265. invert_scale_factor = false;
  1266. }
  1267. // 3. Let E be B - A > 0.
  1268. double e = (computed_math_depth - inherited_math_depth) > 0;
  1269. // FIXME: 4. If the inherited first available font has an OpenType MATH table:
  1270. // - If A ≤ 0 and B ≥ 2 then multiply S by scriptScriptPercentScaleDown and decrement E by 2.
  1271. // - Otherwise if A = 1 then multiply S by scriptScriptPercentScaleDown / scriptPercentScaleDown and decrement E by 1.
  1272. // - Otherwise if B = 1 then multiply S by scriptPercentScaleDown and decrement E by 1.
  1273. // 5. Multiply S by C^E.
  1274. scale *= AK::pow(size_ratio, e);
  1275. // 6. Return S if InvertScaleFactor is false and 1/S otherwise.
  1276. if (!invert_scale_factor)
  1277. return scale;
  1278. return 1.0 / scale;
  1279. };
  1280. font_size_in_px = parent_font_size().scale_by(math_scaling_factor());
  1281. } else {
  1282. // https://w3c.github.io/csswg-drafts/css-fonts/#valdef-font-size-relative-size
  1283. // TODO: If the parent element has a keyword font size in the absolute size keyword mapping table,
  1284. // larger may compute the font size to the next entry in the table,
  1285. // and smaller may compute the font size to the previous entry in the table.
  1286. if (identifier == CSS::ValueID::Smaller || identifier == CSS::ValueID::Larger) {
  1287. if (parent_element && parent_element->computed_css_values()) {
  1288. font_size_in_px = CSSPixels::nearest_value_for(parent_element->computed_css_values()->first_available_computed_font().pixel_metrics().size);
  1289. }
  1290. }
  1291. font_size_in_px *= get_absolute_size_mapping(identifier);
  1292. }
  1293. } else {
  1294. Length::ResolutionContext const length_resolution_context {
  1295. .viewport_rect = viewport_rect(),
  1296. .font_metrics = font_metrics,
  1297. .root_font_metrics = m_root_element_font_metrics,
  1298. };
  1299. Optional<Length> maybe_length;
  1300. if (font_size.is_percentage()) {
  1301. // Percentages refer to parent element's font size
  1302. maybe_length = Length::make_px(CSSPixels::nearest_value_for(font_size.as_percentage().percentage().as_fraction() * parent_font_size().to_double()));
  1303. } else if (font_size.is_length()) {
  1304. maybe_length = font_size.as_length().length();
  1305. } else if (font_size.is_calculated()) {
  1306. if (font_size.as_calculated().contains_percentage()) {
  1307. maybe_length = font_size.as_calculated().resolve_length_percentage(length_resolution_context, Length::make_px(parent_font_size()));
  1308. } else {
  1309. maybe_length = font_size.as_calculated().resolve_length(length_resolution_context);
  1310. }
  1311. }
  1312. if (maybe_length.has_value()) {
  1313. font_size_in_px = maybe_length.value().to_px(length_resolution_context);
  1314. }
  1315. }
  1316. auto slope = font_style.to_font_slope();
  1317. // FIXME: Implement the full font-matching algorithm: https://www.w3.org/TR/css-fonts-4/#font-matching-algorithm
  1318. // Note: This is modified by the find_font() lambda
  1319. bool monospace = false;
  1320. float const font_size_in_pt = font_size_in_px * 0.75f;
  1321. auto find_font = [&](FlyString const& family) -> RefPtr<Gfx::FontCascadeList const> {
  1322. FontFaceKey key {
  1323. .family_name = family,
  1324. .weight = weight,
  1325. .slope = slope,
  1326. };
  1327. auto result = Gfx::FontCascadeList::create();
  1328. if (auto it = m_loaded_fonts.find(key); it != m_loaded_fonts.end()) {
  1329. auto const& loaders = it->value;
  1330. for (auto const& loader : loaders) {
  1331. if (auto found_font = loader->font_with_point_size(font_size_in_pt))
  1332. result->add(*found_font, loader->unicode_ranges());
  1333. }
  1334. return result;
  1335. }
  1336. if (auto found_font = font_matching_algorithm(key, font_size_in_pt); found_font && !found_font->is_empty()) {
  1337. return found_font;
  1338. }
  1339. if (auto found_font = Gfx::FontDatabase::the().get(family, font_size_in_pt, weight, width, slope, Gfx::Font::AllowInexactSizeMatch::Yes)) {
  1340. result->add(*found_font);
  1341. return result;
  1342. }
  1343. return {};
  1344. };
  1345. auto find_generic_font = [&](ValueID font_id) -> RefPtr<Gfx::FontCascadeList const> {
  1346. Platform::GenericFont generic_font {};
  1347. switch (font_id) {
  1348. case ValueID::Monospace:
  1349. case ValueID::UiMonospace:
  1350. generic_font = Platform::GenericFont::Monospace;
  1351. monospace = true;
  1352. break;
  1353. case ValueID::Serif:
  1354. generic_font = Platform::GenericFont::Serif;
  1355. break;
  1356. case ValueID::Fantasy:
  1357. generic_font = Platform::GenericFont::Fantasy;
  1358. break;
  1359. case ValueID::SansSerif:
  1360. generic_font = Platform::GenericFont::SansSerif;
  1361. break;
  1362. case ValueID::Cursive:
  1363. generic_font = Platform::GenericFont::Cursive;
  1364. break;
  1365. case ValueID::UiSerif:
  1366. generic_font = Platform::GenericFont::UiSerif;
  1367. break;
  1368. case ValueID::UiSansSerif:
  1369. generic_font = Platform::GenericFont::UiSansSerif;
  1370. break;
  1371. case ValueID::UiRounded:
  1372. generic_font = Platform::GenericFont::UiRounded;
  1373. break;
  1374. default:
  1375. return {};
  1376. }
  1377. return find_font(Platform::FontPlugin::the().generic_font_name(generic_font));
  1378. };
  1379. auto font_list = Gfx::FontCascadeList::create();
  1380. if (font_family.is_value_list()) {
  1381. auto const& family_list = static_cast<StyleValueList const&>(font_family).values();
  1382. for (auto const& family : family_list) {
  1383. RefPtr<Gfx::FontCascadeList const> other_font_list;
  1384. if (family->is_identifier()) {
  1385. other_font_list = find_generic_font(family->to_identifier());
  1386. } else if (family->is_string()) {
  1387. other_font_list = find_font(family->as_string().string_value());
  1388. } else if (family->is_custom_ident()) {
  1389. other_font_list = find_font(family->as_custom_ident().custom_ident());
  1390. }
  1391. if (other_font_list)
  1392. font_list->extend(*other_font_list);
  1393. }
  1394. } else if (font_family.is_identifier()) {
  1395. if (auto other_font_list = find_generic_font(font_family.to_identifier()))
  1396. font_list->extend(*other_font_list);
  1397. } else if (font_family.is_string()) {
  1398. if (auto other_font_list = find_font(font_family.as_string().string_value()))
  1399. font_list->extend(*other_font_list);
  1400. } else if (font_family.is_custom_ident()) {
  1401. if (auto other_font_list = find_font(font_family.as_custom_ident().custom_ident()))
  1402. font_list->extend(*other_font_list);
  1403. }
  1404. auto found_font = StyleProperties::font_fallback(monospace, bold);
  1405. if (auto scaled_fallback_font = found_font->with_size(font_size_in_pt)) {
  1406. font_list->add(*scaled_fallback_font);
  1407. } else {
  1408. font_list->add(*found_font);
  1409. }
  1410. return font_list;
  1411. }
  1412. void StyleComputer::compute_font(StyleProperties& style, DOM::Element const* element, Optional<CSS::Selector::PseudoElement::Type> pseudo_element) const
  1413. {
  1414. // To compute the font, first ensure that we've defaulted the relevant CSS font properties.
  1415. // FIXME: This should be more sophisticated.
  1416. compute_defaulted_property_value(style, element, CSS::PropertyID::FontFamily, pseudo_element);
  1417. compute_defaulted_property_value(style, element, CSS::PropertyID::FontSize, pseudo_element);
  1418. compute_defaulted_property_value(style, element, CSS::PropertyID::FontStretch, pseudo_element);
  1419. compute_defaulted_property_value(style, element, CSS::PropertyID::FontStyle, pseudo_element);
  1420. compute_defaulted_property_value(style, element, CSS::PropertyID::FontWeight, pseudo_element);
  1421. compute_defaulted_property_value(style, element, CSS::PropertyID::LineHeight, pseudo_element);
  1422. auto font_family = style.property(CSS::PropertyID::FontFamily);
  1423. auto font_size = style.property(CSS::PropertyID::FontSize);
  1424. auto font_style = style.property(CSS::PropertyID::FontStyle);
  1425. auto font_weight = style.property(CSS::PropertyID::FontWeight);
  1426. auto font_stretch = style.property(CSS::PropertyID::FontStretch);
  1427. auto font_list = compute_font_for_style_values(element, pseudo_element, font_family, font_size, font_style, font_weight, font_stretch, style.math_depth());
  1428. VERIFY(font_list);
  1429. VERIFY(!font_list->is_empty());
  1430. RefPtr<Gfx::Font const> const found_font = font_list->first();
  1431. style.set_property(CSS::PropertyID::FontSize, LengthStyleValue::create(CSS::Length::make_px(CSSPixels::nearest_value_for(found_font->pixel_size()))), nullptr);
  1432. style.set_property(CSS::PropertyID::FontWeight, NumberStyleValue::create(font_weight->to_font_weight()));
  1433. style.set_computed_font_list(*font_list);
  1434. if (element && is<HTML::HTMLHtmlElement>(*element)) {
  1435. const_cast<StyleComputer&>(*this).m_root_element_font_metrics = calculate_root_element_font_metrics(style);
  1436. }
  1437. }
  1438. Gfx::Font const& StyleComputer::initial_font() const
  1439. {
  1440. // FIXME: This is not correct.
  1441. return StyleProperties::font_fallback(false, false);
  1442. }
  1443. void StyleComputer::absolutize_values(StyleProperties& style) const
  1444. {
  1445. Length::FontMetrics font_metrics {
  1446. m_root_element_font_metrics.font_size,
  1447. style.first_available_computed_font().pixel_metrics()
  1448. };
  1449. auto font_size = style.property(CSS::PropertyID::FontSize)->as_length().length().to_px(viewport_rect(), font_metrics, m_root_element_font_metrics);
  1450. font_metrics.font_size = font_size;
  1451. // NOTE: Percentage line-height values are relative to the font-size of the element.
  1452. // We have to resolve them right away, so that the *computed* line-height is ready for inheritance.
  1453. // We can't simply absolutize *all* percentage values against the font size,
  1454. // because most percentages are relative to containing block metrics.
  1455. auto line_height_value_slot = style.m_property_values[to_underlying(CSS::PropertyID::LineHeight)].map([](auto& x) -> auto& { return x.style; });
  1456. if (line_height_value_slot.has_value() && (*line_height_value_slot)->is_percentage()) {
  1457. *line_height_value_slot = LengthStyleValue::create(
  1458. Length::make_px(CSSPixels::nearest_value_for(font_size * static_cast<double>((*line_height_value_slot)->as_percentage().percentage().as_fraction()))));
  1459. }
  1460. auto line_height = style.compute_line_height(viewport_rect(), font_metrics, m_root_element_font_metrics);
  1461. font_metrics.line_height = line_height;
  1462. // NOTE: line-height might be using lh which should be resolved against the parent line height (like we did here already)
  1463. if (line_height_value_slot.has_value() && (*line_height_value_slot)->is_length())
  1464. (*line_height_value_slot) = LengthStyleValue::create(Length::make_px(line_height));
  1465. for (size_t i = 0; i < style.m_property_values.size(); ++i) {
  1466. auto& value_slot = style.m_property_values[i];
  1467. if (!value_slot.has_value())
  1468. continue;
  1469. value_slot->style = value_slot->style->absolutized(viewport_rect(), font_metrics, m_root_element_font_metrics);
  1470. }
  1471. style.set_line_height({}, line_height);
  1472. }
  1473. void StyleComputer::resolve_effective_overflow_values(StyleProperties& style) const
  1474. {
  1475. // https://www.w3.org/TR/css-overflow-3/#overflow-control
  1476. // The visible/clip values of overflow compute to auto/hidden (respectively) if one of overflow-x or
  1477. // overflow-y is neither visible nor clip.
  1478. auto overflow_x = value_id_to_overflow(style.property(PropertyID::OverflowX)->to_identifier());
  1479. auto overflow_y = value_id_to_overflow(style.property(PropertyID::OverflowY)->to_identifier());
  1480. auto overflow_x_is_visible_or_clip = overflow_x == Overflow::Visible || overflow_x == Overflow::Clip;
  1481. auto overflow_y_is_visible_or_clip = overflow_y == Overflow::Visible || overflow_y == Overflow::Clip;
  1482. if (!overflow_x_is_visible_or_clip || !overflow_y_is_visible_or_clip) {
  1483. if (overflow_x == CSS::Overflow::Visible)
  1484. style.set_property(CSS::PropertyID::OverflowX, IdentifierStyleValue::create(CSS::ValueID::Auto), nullptr);
  1485. if (overflow_x == CSS::Overflow::Clip)
  1486. style.set_property(CSS::PropertyID::OverflowX, IdentifierStyleValue::create(CSS::ValueID::Hidden), nullptr);
  1487. if (overflow_y == CSS::Overflow::Visible)
  1488. style.set_property(CSS::PropertyID::OverflowY, IdentifierStyleValue::create(CSS::ValueID::Auto), nullptr);
  1489. if (overflow_y == CSS::Overflow::Clip)
  1490. style.set_property(CSS::PropertyID::OverflowY, IdentifierStyleValue::create(CSS::ValueID::Hidden), nullptr);
  1491. }
  1492. }
  1493. enum class BoxTypeTransformation {
  1494. None,
  1495. Blockify,
  1496. Inlinify,
  1497. };
  1498. static BoxTypeTransformation required_box_type_transformation(StyleProperties const& style, DOM::Element const& element, Optional<CSS::Selector::PseudoElement::Type> const& pseudo_element)
  1499. {
  1500. // NOTE: We never blockify <br> elements. They are always inline.
  1501. // There is currently no way to express in CSS how a <br> element really behaves.
  1502. // Spec issue: https://github.com/whatwg/html/issues/2291
  1503. if (is<HTML::HTMLBRElement>(element))
  1504. return BoxTypeTransformation::None;
  1505. // Absolute positioning or floating an element blockifies the box’s display type. [CSS2]
  1506. if (style.position() == CSS::Positioning::Absolute || style.position() == CSS::Positioning::Fixed || style.float_() != CSS::Float::None)
  1507. return BoxTypeTransformation::Blockify;
  1508. // FIXME: Containment in a ruby container inlinifies the box’s display type, as described in [CSS-RUBY-1].
  1509. // NOTE: If we're computing style for a pseudo-element, the effective parent will be the originating element itself, not its parent.
  1510. auto const* parent = pseudo_element.has_value() ? &element : element.parent_element();
  1511. // A parent with a grid or flex display value blockifies the box’s display type. [CSS-GRID-1] [CSS-FLEXBOX-1]
  1512. if (parent && parent->computed_css_values()) {
  1513. auto const& parent_display = parent->computed_css_values()->display();
  1514. if (parent_display.is_grid_inside() || parent_display.is_flex_inside())
  1515. return BoxTypeTransformation::Blockify;
  1516. }
  1517. return BoxTypeTransformation::None;
  1518. }
  1519. // https://drafts.csswg.org/css-display/#transformations
  1520. void StyleComputer::transform_box_type_if_needed(StyleProperties& style, DOM::Element const& element, Optional<CSS::Selector::PseudoElement::Type> pseudo_element) const
  1521. {
  1522. // 2.7. Automatic Box Type Transformations
  1523. // Some layout effects require blockification or inlinification of the box type,
  1524. // which sets the box’s computed outer display type to block or inline (respectively).
  1525. // (This has no effect on display types that generate no box at all, such as none or contents.)
  1526. auto display = style.display();
  1527. if (display.is_none() || display.is_contents())
  1528. return;
  1529. auto new_display = display;
  1530. if (display.is_math_inside()) {
  1531. // https://w3c.github.io/mathml-core/#new-display-math-value
  1532. // For elements that are not MathML elements, if the specified value of display is inline math or block math
  1533. // then the computed value is block flow and inline flow respectively.
  1534. if (element.namespace_uri() != Namespace::MathML)
  1535. new_display = CSS::Display { display.outside(), CSS::DisplayInside::Flow };
  1536. // For the mtable element the computed value is block table and inline table respectively.
  1537. else if (element.tag_name().equals_ignoring_ascii_case("mtable"sv))
  1538. new_display = CSS::Display { display.outside(), CSS::DisplayInside::Table };
  1539. // For the mtr element, the computed value is table-row.
  1540. else if (element.tag_name().equals_ignoring_ascii_case("mtr"sv))
  1541. new_display = CSS::Display { CSS::DisplayInternal::TableRow };
  1542. // For the mtd element, the computed value is table-cell.
  1543. else if (element.tag_name().equals_ignoring_ascii_case("mtd"sv))
  1544. new_display = CSS::Display { CSS::DisplayInternal::TableCell };
  1545. }
  1546. switch (required_box_type_transformation(style, element, pseudo_element)) {
  1547. case BoxTypeTransformation::None:
  1548. break;
  1549. case BoxTypeTransformation::Blockify:
  1550. if (display.is_block_outside())
  1551. return;
  1552. // If a layout-internal box is blockified, its inner display type converts to flow so that it becomes a block container.
  1553. if (display.is_internal()) {
  1554. new_display = CSS::Display::from_short(CSS::Display::Short::Block);
  1555. } else {
  1556. VERIFY(display.is_outside_and_inside());
  1557. // For legacy reasons, if an inline block box (inline flow-root) is blockified, it becomes a block box (losing its flow-root nature).
  1558. // For consistency, a run-in flow-root box also blockifies to a block box.
  1559. if (display.is_inline_block()) {
  1560. new_display = CSS::Display { CSS::DisplayOutside::Block, CSS::DisplayInside::Flow, display.list_item() };
  1561. } else {
  1562. new_display = CSS::Display { CSS::DisplayOutside::Block, display.inside(), display.list_item() };
  1563. }
  1564. }
  1565. break;
  1566. case BoxTypeTransformation::Inlinify:
  1567. if (display.is_inline_outside()) {
  1568. // FIXME: If an inline box (inline flow) is inlinified, it recursively inlinifies all of its in-flow children,
  1569. // so that no block-level descendants break up the inline formatting context in which it participates.
  1570. if (display.is_flow_inside()) {
  1571. dbgln("FIXME: Inlinify inline box children recursively");
  1572. }
  1573. break;
  1574. }
  1575. if (display.is_internal()) {
  1576. // Inlinification has no effect on layout-internal boxes. (However, placement in such an inline context will typically cause them
  1577. // to be wrapped in an appropriately-typed anonymous inline-level box.)
  1578. } else {
  1579. VERIFY(display.is_outside_and_inside());
  1580. // If a block box (block flow) is inlinified, its inner display type is set to flow-root so that it remains a block container.
  1581. if (display.is_block_outside() && display.is_flow_inside()) {
  1582. new_display = CSS::Display { CSS::DisplayOutside::Inline, CSS::DisplayInside::FlowRoot, display.list_item() };
  1583. }
  1584. new_display = CSS::Display { CSS::DisplayOutside::Inline, display.inside(), display.list_item() };
  1585. }
  1586. break;
  1587. }
  1588. if (new_display != display)
  1589. style.set_property(CSS::PropertyID::Display, DisplayStyleValue::create(new_display), style.property_source_declaration(CSS::PropertyID::Display));
  1590. }
  1591. NonnullRefPtr<StyleProperties> StyleComputer::create_document_style() const
  1592. {
  1593. auto style = StyleProperties::create();
  1594. compute_math_depth(style, nullptr, {});
  1595. compute_font(style, nullptr, {});
  1596. compute_defaulted_values(style, nullptr, {});
  1597. absolutize_values(style);
  1598. style->set_property(CSS::PropertyID::Width, CSS::LengthStyleValue::create(CSS::Length::make_px(viewport_rect().width())), nullptr);
  1599. style->set_property(CSS::PropertyID::Height, CSS::LengthStyleValue::create(CSS::Length::make_px(viewport_rect().height())), nullptr);
  1600. style->set_property(CSS::PropertyID::Display, CSS::DisplayStyleValue::create(CSS::Display::from_short(CSS::Display::Short::Block)), nullptr);
  1601. return style;
  1602. }
  1603. ErrorOr<NonnullRefPtr<StyleProperties>> StyleComputer::compute_style(DOM::Element& element, Optional<CSS::Selector::PseudoElement::Type> pseudo_element) const
  1604. {
  1605. auto style = TRY(compute_style_impl(element, move(pseudo_element), ComputeStyleMode::Normal));
  1606. return style.release_nonnull();
  1607. }
  1608. ErrorOr<RefPtr<StyleProperties>> StyleComputer::compute_pseudo_element_style_if_needed(DOM::Element& element, Optional<CSS::Selector::PseudoElement::Type> pseudo_element) const
  1609. {
  1610. return compute_style_impl(element, move(pseudo_element), ComputeStyleMode::CreatePseudoElementStyleIfNeeded);
  1611. }
  1612. ErrorOr<RefPtr<StyleProperties>> StyleComputer::compute_style_impl(DOM::Element& element, Optional<CSS::Selector::PseudoElement::Type> pseudo_element, ComputeStyleMode mode) const
  1613. {
  1614. build_rule_cache_if_needed();
  1615. // Special path for elements that use pseudo element as style selector
  1616. if (element.use_pseudo_element().has_value()) {
  1617. auto& parent_element = verify_cast<HTML::HTMLElement>(*element.root().parent_or_shadow_host());
  1618. auto style = TRY(compute_style(parent_element, *element.use_pseudo_element()));
  1619. // Merge back inline styles
  1620. if (element.has_attribute(HTML::AttributeNames::style)) {
  1621. auto* inline_style = parse_css_style_attribute(CSS::Parser::ParsingContext(document()), *element.get_attribute(HTML::AttributeNames::style), element);
  1622. for (auto const& property : inline_style->properties())
  1623. style->set_property(property.property_id, property.value);
  1624. }
  1625. return style;
  1626. }
  1627. auto style = StyleProperties::create();
  1628. // 1. Perform the cascade. This produces the "specified style"
  1629. bool did_match_any_pseudo_element_rules = false;
  1630. TRY(compute_cascaded_values(style, element, pseudo_element, did_match_any_pseudo_element_rules, mode));
  1631. if (mode == ComputeStyleMode::CreatePseudoElementStyleIfNeeded && !did_match_any_pseudo_element_rules)
  1632. return nullptr;
  1633. // 2. Compute the math-depth property, since that might affect the font-size
  1634. compute_math_depth(style, &element, pseudo_element);
  1635. // 3. Compute the font, since that may be needed for font-relative CSS units
  1636. compute_font(style, &element, pseudo_element);
  1637. // 4. Absolutize values, turning font/viewport relative lengths into absolute lengths
  1638. absolutize_values(style);
  1639. // 5. Default the values, applying inheritance and 'initial' as needed
  1640. compute_defaulted_values(style, &element, pseudo_element);
  1641. // 6. Run automatic box type transformations
  1642. transform_box_type_if_needed(style, element, pseudo_element);
  1643. // 7. Resolve effective overflow values
  1644. resolve_effective_overflow_values(style);
  1645. return style;
  1646. }
  1647. void StyleComputer::build_rule_cache_if_needed() const
  1648. {
  1649. if (m_author_rule_cache && m_user_rule_cache && m_user_agent_rule_cache)
  1650. return;
  1651. const_cast<StyleComputer&>(*this).build_rule_cache();
  1652. }
  1653. NonnullOwnPtr<StyleComputer::RuleCache> StyleComputer::make_rule_cache_for_cascade_origin(CascadeOrigin cascade_origin)
  1654. {
  1655. auto rule_cache = make<RuleCache>();
  1656. size_t num_class_rules = 0;
  1657. size_t num_id_rules = 0;
  1658. size_t num_tag_name_rules = 0;
  1659. size_t num_pseudo_element_rules = 0;
  1660. Vector<MatchingRule> matching_rules;
  1661. size_t style_sheet_index = 0;
  1662. for_each_stylesheet(cascade_origin, [&](auto& sheet) {
  1663. size_t rule_index = 0;
  1664. sheet.for_each_effective_style_rule([&](auto const& rule) {
  1665. size_t selector_index = 0;
  1666. for (CSS::Selector const& selector : rule.selectors()) {
  1667. MatchingRule matching_rule {
  1668. &rule,
  1669. sheet,
  1670. style_sheet_index,
  1671. rule_index,
  1672. selector_index,
  1673. selector.specificity()
  1674. };
  1675. for (auto const& simple_selector : selector.compound_selectors().last().simple_selectors) {
  1676. if (simple_selector.type == CSS::Selector::SimpleSelector::Type::PseudoElement) {
  1677. matching_rule.contains_pseudo_element = true;
  1678. ++num_pseudo_element_rules;
  1679. break;
  1680. }
  1681. }
  1682. bool added_to_bucket = false;
  1683. for (auto const& simple_selector : selector.compound_selectors().last().simple_selectors) {
  1684. if (simple_selector.type == CSS::Selector::SimpleSelector::Type::Id) {
  1685. rule_cache->rules_by_id.ensure(simple_selector.name()).append(move(matching_rule));
  1686. ++num_id_rules;
  1687. added_to_bucket = true;
  1688. break;
  1689. }
  1690. if (simple_selector.type == CSS::Selector::SimpleSelector::Type::Class) {
  1691. rule_cache->rules_by_class.ensure(simple_selector.name()).append(move(matching_rule));
  1692. ++num_class_rules;
  1693. added_to_bucket = true;
  1694. break;
  1695. }
  1696. if (simple_selector.type == CSS::Selector::SimpleSelector::Type::TagName) {
  1697. rule_cache->rules_by_tag_name.ensure(simple_selector.qualified_name().name.lowercase_name).append(move(matching_rule));
  1698. ++num_tag_name_rules;
  1699. added_to_bucket = true;
  1700. break;
  1701. }
  1702. }
  1703. if (!added_to_bucket)
  1704. rule_cache->other_rules.append(move(matching_rule));
  1705. ++selector_index;
  1706. }
  1707. ++rule_index;
  1708. });
  1709. // Loosely based on https://drafts.csswg.org/css-animations-2/#keyframe-processing
  1710. sheet.for_each_effective_keyframes_at_rule([&](CSSKeyframesRule const& rule) {
  1711. auto keyframe_set = adopt_ref(*new Animations::KeyframeEffect::KeyFrameSet);
  1712. HashTable<PropertyID> animated_properties;
  1713. // Forwards pass, resolve all the user-specified keyframe properties.
  1714. for (auto const& keyframe : rule.keyframes()) {
  1715. Animations::KeyframeEffect::KeyFrameSet::ResolvedKeyFrame resolved_keyframe;
  1716. auto key = static_cast<u64>(keyframe->key().value() * Animations::KeyframeEffect::AnimationKeyFrameKeyScaleFactor);
  1717. auto keyframe_rule = keyframe->style();
  1718. if (!is<PropertyOwningCSSStyleDeclaration>(*keyframe_rule))
  1719. continue;
  1720. auto const& keyframe_style = static_cast<PropertyOwningCSSStyleDeclaration const&>(*keyframe_rule);
  1721. for (auto const& it : keyframe_style.properties()) {
  1722. for_each_property_expanding_shorthands(it.property_id, it.value, [&](PropertyID shorthand_id, StyleValue const& shorthand_value) {
  1723. animated_properties.set(shorthand_id);
  1724. resolved_keyframe.resolved_properties.set(shorthand_id, NonnullRefPtr<StyleValue const> { shorthand_value });
  1725. });
  1726. }
  1727. keyframe_set->keyframes_by_key.insert(key, resolved_keyframe);
  1728. }
  1729. Animations::KeyframeEffect::generate_initial_and_final_frames(keyframe_set, animated_properties);
  1730. if constexpr (LIBWEB_CSS_DEBUG) {
  1731. dbgln("Resolved keyframe set '{}' into {} keyframes:", rule.name(), keyframe_set->keyframes_by_key.size());
  1732. for (auto it = keyframe_set->keyframes_by_key.begin(); it != keyframe_set->keyframes_by_key.end(); ++it)
  1733. dbgln(" - keyframe {}: {} properties", it.key(), it->resolved_properties.size());
  1734. }
  1735. rule_cache->rules_by_animation_keyframes.set(rule.name(), move(keyframe_set));
  1736. });
  1737. ++style_sheet_index;
  1738. });
  1739. if constexpr (LIBWEB_CSS_DEBUG) {
  1740. dbgln("Built rule cache!");
  1741. dbgln(" ID: {}", num_id_rules);
  1742. dbgln(" Class: {}", num_class_rules);
  1743. dbgln(" TagName: {}", num_tag_name_rules);
  1744. dbgln("PseudoElement: {}", num_pseudo_element_rules);
  1745. dbgln(" Other: {}", rule_cache->other_rules.size());
  1746. dbgln(" Total: {}", num_class_rules + num_id_rules + num_tag_name_rules + rule_cache->other_rules.size());
  1747. }
  1748. return rule_cache;
  1749. }
  1750. void StyleComputer::build_rule_cache()
  1751. {
  1752. if (auto user_style_source = document().page().user_style(); user_style_source.has_value()) {
  1753. m_user_style_sheet = JS::make_handle(parse_css_stylesheet(CSS::Parser::ParsingContext(document()), user_style_source.value()));
  1754. }
  1755. m_author_rule_cache = make_rule_cache_for_cascade_origin(CascadeOrigin::Author);
  1756. m_user_rule_cache = make_rule_cache_for_cascade_origin(CascadeOrigin::User);
  1757. m_user_agent_rule_cache = make_rule_cache_for_cascade_origin(CascadeOrigin::UserAgent);
  1758. }
  1759. void StyleComputer::invalidate_rule_cache()
  1760. {
  1761. m_author_rule_cache = nullptr;
  1762. // NOTE: We could be smarter about keeping the user rule cache, and style sheet.
  1763. // Currently we are re-parsing the user style sheet every time we build the caches,
  1764. // as it may have changed.
  1765. m_user_rule_cache = nullptr;
  1766. m_user_style_sheet = nullptr;
  1767. // NOTE: It might not be necessary to throw away the UA rule cache.
  1768. // If we are sure that it's safe, we could keep it as an optimization.
  1769. m_user_agent_rule_cache = nullptr;
  1770. }
  1771. void StyleComputer::did_load_font(FlyString const&)
  1772. {
  1773. document().invalidate_style();
  1774. }
  1775. void StyleComputer::load_fonts_from_sheet(CSSStyleSheet const& sheet)
  1776. {
  1777. for (auto const& rule : static_cast<CSSStyleSheet const&>(sheet).rules()) {
  1778. if (!is<CSSFontFaceRule>(*rule))
  1779. continue;
  1780. auto const& font_face = static_cast<CSSFontFaceRule const&>(*rule).font_face();
  1781. if (font_face.sources().is_empty())
  1782. continue;
  1783. FontFaceKey key {
  1784. .family_name = font_face.font_family(),
  1785. .weight = font_face.weight().value_or(0),
  1786. .slope = font_face.slope().value_or(0),
  1787. };
  1788. Vector<URL> urls;
  1789. for (auto& source : font_face.sources()) {
  1790. // FIXME: These should be loaded relative to the stylesheet URL instead of the document URL.
  1791. if (source.local_or_url.has<URL>())
  1792. urls.append(m_document->parse_url(MUST(source.local_or_url.get<URL>().to_string())));
  1793. // FIXME: Handle local()
  1794. }
  1795. if (urls.is_empty())
  1796. continue;
  1797. auto loader = make<FontLoader>(const_cast<StyleComputer&>(*this), font_face.font_family(), font_face.unicode_ranges(), move(urls));
  1798. auto maybe_font_loaders_list = const_cast<StyleComputer&>(*this).m_loaded_fonts.get(key);
  1799. if (maybe_font_loaders_list.has_value()) {
  1800. maybe_font_loaders_list->append(move(loader));
  1801. } else {
  1802. FontLoaderList loaders;
  1803. loaders.append(move(loader));
  1804. const_cast<StyleComputer&>(*this).m_loaded_fonts.set(key, move(loaders));
  1805. }
  1806. }
  1807. }
  1808. void StyleComputer::compute_math_depth(StyleProperties& style, DOM::Element const* element, Optional<CSS::Selector::PseudoElement::Type> pseudo_element) const
  1809. {
  1810. // https://w3c.github.io/mathml-core/#propdef-math-depth
  1811. // First, ensure that the relevant CSS properties have been defaulted.
  1812. // FIXME: This should be more sophisticated.
  1813. compute_defaulted_property_value(style, element, CSS::PropertyID::MathDepth, pseudo_element);
  1814. compute_defaulted_property_value(style, element, CSS::PropertyID::MathStyle, pseudo_element);
  1815. auto inherited_math_depth = [&]() {
  1816. if (!element || !element->parent_element())
  1817. return InitialValues::math_depth();
  1818. return element->parent_element()->computed_css_values()->math_depth();
  1819. };
  1820. auto value = style.property(CSS::PropertyID::MathDepth);
  1821. if (!value->is_math_depth()) {
  1822. style.set_math_depth(inherited_math_depth());
  1823. return;
  1824. }
  1825. auto& math_depth = value->as_math_depth();
  1826. auto resolve_integer = [&](StyleValue const& integer_value) {
  1827. if (integer_value.is_integer())
  1828. return integer_value.as_integer().integer();
  1829. if (integer_value.is_calculated())
  1830. return integer_value.as_calculated().resolve_integer().value();
  1831. VERIFY_NOT_REACHED();
  1832. };
  1833. // The computed value of the math-depth value is determined as follows:
  1834. // - If the specified value of math-depth is auto-add and the inherited value of math-style is compact
  1835. // then the computed value of math-depth of the element is its inherited value plus one.
  1836. if (math_depth.is_auto_add() && style.property(CSS::PropertyID::MathStyle)->to_identifier() == CSS::ValueID::Compact) {
  1837. style.set_math_depth(inherited_math_depth() + 1);
  1838. return;
  1839. }
  1840. // - If the specified value of math-depth is of the form add(<integer>) then the computed value of
  1841. // math-depth of the element is its inherited value plus the specified integer.
  1842. if (math_depth.is_add()) {
  1843. style.set_math_depth(inherited_math_depth() + resolve_integer(*math_depth.integer_value()));
  1844. return;
  1845. }
  1846. // - If the specified value of math-depth is of the form <integer> then the computed value of math-depth
  1847. // of the element is the specified integer.
  1848. if (math_depth.is_integer()) {
  1849. style.set_math_depth(resolve_integer(*math_depth.integer_value()));
  1850. return;
  1851. }
  1852. // - Otherwise, the computed value of math-depth of the element is the inherited one.
  1853. style.set_math_depth(inherited_math_depth());
  1854. }
  1855. }