Node.cpp 53 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197
  1. /*
  2. * Copyright (c) 2018-2023, Andreas Kling <andreas@ladybird.org>
  3. * Copyright (c) 2021-2023, Sam Atkins <atkinssj@serenityos.org>
  4. *
  5. * SPDX-License-Identifier: BSD-2-Clause
  6. */
  7. #include <AK/Demangle.h>
  8. #include <LibWeb/CSS/StyleValues/AbstractImageStyleValue.h>
  9. #include <LibWeb/CSS/StyleValues/BackgroundRepeatStyleValue.h>
  10. #include <LibWeb/CSS/StyleValues/BackgroundSizeStyleValue.h>
  11. #include <LibWeb/CSS/StyleValues/BorderRadiusStyleValue.h>
  12. #include <LibWeb/CSS/StyleValues/CSSKeywordValue.h>
  13. #include <LibWeb/CSS/StyleValues/IntegerStyleValue.h>
  14. #include <LibWeb/CSS/StyleValues/LengthStyleValue.h>
  15. #include <LibWeb/CSS/StyleValues/MathDepthStyleValue.h>
  16. #include <LibWeb/CSS/StyleValues/NumberStyleValue.h>
  17. #include <LibWeb/CSS/StyleValues/PercentageStyleValue.h>
  18. #include <LibWeb/CSS/StyleValues/RatioStyleValue.h>
  19. #include <LibWeb/CSS/StyleValues/StyleValueList.h>
  20. #include <LibWeb/CSS/StyleValues/TimeStyleValue.h>
  21. #include <LibWeb/CSS/StyleValues/URLStyleValue.h>
  22. #include <LibWeb/DOM/Document.h>
  23. #include <LibWeb/Dump.h>
  24. #include <LibWeb/HTML/HTMLHtmlElement.h>
  25. #include <LibWeb/Layout/BlockContainer.h>
  26. #include <LibWeb/Layout/FormattingContext.h>
  27. #include <LibWeb/Layout/Node.h>
  28. #include <LibWeb/Layout/TableWrapper.h>
  29. #include <LibWeb/Layout/TextNode.h>
  30. #include <LibWeb/Layout/Viewport.h>
  31. #include <LibWeb/Platform/FontPlugin.h>
  32. namespace Web::Layout {
  33. Node::Node(DOM::Document& document, DOM::Node* node)
  34. : m_dom_node(node ? *node : document)
  35. , m_anonymous(node == nullptr)
  36. {
  37. if (node)
  38. node->set_layout_node({}, *this);
  39. }
  40. Node::~Node() = default;
  41. void Node::visit_edges(Cell::Visitor& visitor)
  42. {
  43. Base::visit_edges(visitor);
  44. visitor.visit(m_dom_node);
  45. for (auto const& paintable : m_paintable) {
  46. visitor.visit(GC::Ptr { &paintable });
  47. }
  48. visitor.visit(m_pseudo_element_generator);
  49. TreeNode::visit_edges(visitor);
  50. }
  51. // https://www.w3.org/TR/css-display-3/#out-of-flow
  52. bool Node::is_out_of_flow(FormattingContext const& formatting_context) const
  53. {
  54. // A layout node is out of flow if either:
  55. // 1. It is floated (which requires that floating is not inhibited).
  56. if (!formatting_context.inhibits_floating() && computed_values().float_() != CSS::Float::None)
  57. return true;
  58. // 2. It is "absolutely positioned".
  59. if (is_absolutely_positioned())
  60. return true;
  61. return false;
  62. }
  63. bool Node::can_contain_boxes_with_position_absolute() const
  64. {
  65. if (computed_values().position() != CSS::Positioning::Static)
  66. return true;
  67. if (is<Viewport>(*this))
  68. return true;
  69. // https://w3c.github.io/csswg-drafts/css-transforms-1/#propdef-transform
  70. // Any computed value other than none for the transform affects containing block and stacking context
  71. if (!computed_values().transformations().is_empty())
  72. return true;
  73. if (computed_values().translate().has_value())
  74. return true;
  75. if (computed_values().rotate().has_value())
  76. return true;
  77. if (computed_values().scale().has_value())
  78. return true;
  79. return false;
  80. }
  81. static Box const* nearest_ancestor_capable_of_forming_a_containing_block(Node const& node)
  82. {
  83. for (auto const* ancestor = node.parent(); ancestor; ancestor = ancestor->parent()) {
  84. if (ancestor->is_block_container()
  85. || ancestor->display().is_flex_inside()
  86. || ancestor->display().is_grid_inside()
  87. || ancestor->is_svg_svg_box()) {
  88. return verify_cast<Box>(ancestor);
  89. }
  90. }
  91. return nullptr;
  92. }
  93. Box const* Node::containing_block() const
  94. {
  95. if (is<TextNode>(*this))
  96. return nearest_ancestor_capable_of_forming_a_containing_block(*this);
  97. auto position = computed_values().position();
  98. // https://drafts.csswg.org/css-position-3/#absolute-cb
  99. if (position == CSS::Positioning::Absolute) {
  100. auto const* ancestor = parent();
  101. while (ancestor && !ancestor->can_contain_boxes_with_position_absolute())
  102. ancestor = ancestor->parent();
  103. while (ancestor && ancestor->is_anonymous())
  104. ancestor = nearest_ancestor_capable_of_forming_a_containing_block(*ancestor);
  105. return static_cast<Box const*>(ancestor);
  106. }
  107. if (position == CSS::Positioning::Fixed)
  108. return &root();
  109. return nearest_ancestor_capable_of_forming_a_containing_block(*this);
  110. }
  111. Box const* Node::static_position_containing_block() const
  112. {
  113. return nearest_ancestor_capable_of_forming_a_containing_block(*this);
  114. }
  115. Box const* Node::non_anonymous_containing_block() const
  116. {
  117. auto nearest_ancestor_box = containing_block();
  118. VERIFY(nearest_ancestor_box);
  119. while (nearest_ancestor_box->is_anonymous()) {
  120. nearest_ancestor_box = nearest_ancestor_box->containing_block();
  121. VERIFY(nearest_ancestor_box);
  122. }
  123. return nearest_ancestor_box;
  124. }
  125. // https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context
  126. bool Node::establishes_stacking_context() const
  127. {
  128. // NOTE: While MDN is not authoritative, there isn't a single convenient location
  129. // in the CSS specifications where the rules for stacking contexts is described.
  130. // That's why the "spec link" here points to MDN.
  131. if (!has_style())
  132. return false;
  133. if (is_svg_box() || is_svg_svg_box())
  134. return false;
  135. // We make a stacking context for the viewport. Painting and hit testing starts from here.
  136. if (is_viewport())
  137. return true;
  138. // Root element of the document (<html>).
  139. if (is_root_element())
  140. return true;
  141. auto position = computed_values().position();
  142. // Element with a position value absolute or relative and z-index value other than auto.
  143. if (position == CSS::Positioning::Absolute || position == CSS::Positioning::Relative) {
  144. if (computed_values().z_index().has_value()) {
  145. return true;
  146. }
  147. }
  148. // Element with a position value fixed or sticky.
  149. if (position == CSS::Positioning::Fixed || position == CSS::Positioning::Sticky)
  150. return true;
  151. if (!computed_values().transformations().is_empty())
  152. return true;
  153. if (computed_values().translate().has_value())
  154. return true;
  155. if (computed_values().rotate().has_value())
  156. return true;
  157. if (computed_values().scale().has_value())
  158. return true;
  159. // Element that is a child of a flex container, with z-index value other than auto.
  160. if (parent() && parent()->display().is_flex_inside() && computed_values().z_index().has_value())
  161. return true;
  162. // Element that is a child of a grid container, with z-index value other than auto.
  163. if (parent() && parent()->display().is_grid_inside() && computed_values().z_index().has_value())
  164. return true;
  165. // https://drafts.fxtf.org/filter-effects/#FilterProperty
  166. // https://drafts.fxtf.org/filter-effects-2/#backdrop-filter-operation
  167. // A computed value of other than none results in the creation of both a stacking context
  168. // [CSS21] and a Containing Block for absolute and fixed position descendants, unless the
  169. // element it applies to is a document root element in the current browsing context.
  170. // Spec Note: This rule works in the same way as for the filter property.
  171. if (!computed_values().backdrop_filter().is_none() || !computed_values().filter().is_none())
  172. return true;
  173. // Element with any of the following properties with value other than none:
  174. // - transform
  175. // - filter
  176. // - backdrop-filter
  177. // - perspective
  178. // - clip-path
  179. // - mask / mask-image / mask-border
  180. if (computed_values().mask().has_value() || computed_values().clip_path().has_value() || computed_values().mask_image())
  181. return true;
  182. return computed_values().opacity() < 1.0f;
  183. }
  184. GC::Ptr<HTML::Navigable> Node::navigable() const
  185. {
  186. return document().navigable();
  187. }
  188. Viewport const& Node::root() const
  189. {
  190. VERIFY(document().layout_node());
  191. return *document().layout_node();
  192. }
  193. Viewport& Node::root()
  194. {
  195. VERIFY(document().layout_node());
  196. return *document().layout_node();
  197. }
  198. bool Node::is_floating() const
  199. {
  200. if (!has_style())
  201. return false;
  202. // flex-items don't float.
  203. if (is_flex_item())
  204. return false;
  205. return computed_values().float_() != CSS::Float::None;
  206. }
  207. bool Node::is_positioned() const
  208. {
  209. return has_style() && computed_values().position() != CSS::Positioning::Static;
  210. }
  211. bool Node::is_absolutely_positioned() const
  212. {
  213. if (!has_style())
  214. return false;
  215. auto position = computed_values().position();
  216. return position == CSS::Positioning::Absolute || position == CSS::Positioning::Fixed;
  217. }
  218. bool Node::is_fixed_position() const
  219. {
  220. if (!has_style())
  221. return false;
  222. auto position = computed_values().position();
  223. return position == CSS::Positioning::Fixed;
  224. }
  225. bool Node::is_sticky_position() const
  226. {
  227. if (!has_style())
  228. return false;
  229. auto position = computed_values().position();
  230. return position == CSS::Positioning::Sticky;
  231. }
  232. NodeWithStyle::NodeWithStyle(DOM::Document& document, DOM::Node* node, CSS::StyleProperties computed_style)
  233. : Node(document, node)
  234. , m_computed_values(make<CSS::ComputedValues>())
  235. {
  236. m_has_style = true;
  237. apply_style(computed_style);
  238. }
  239. NodeWithStyle::NodeWithStyle(DOM::Document& document, DOM::Node* node, NonnullOwnPtr<CSS::ComputedValues> computed_values)
  240. : Node(document, node)
  241. , m_computed_values(move(computed_values))
  242. {
  243. m_has_style = true;
  244. }
  245. void NodeWithStyle::visit_edges(Visitor& visitor)
  246. {
  247. Base::visit_edges(visitor);
  248. for (auto& layer : computed_values().background_layers()) {
  249. if (layer.background_image && layer.background_image->is_image())
  250. layer.background_image->as_image().visit_edges(visitor);
  251. }
  252. if (m_list_style_image && m_list_style_image->is_image())
  253. m_list_style_image->as_image().visit_edges(visitor);
  254. }
  255. // https://www.w3.org/TR/css-values-4/#snap-a-length-as-a-border-width
  256. static CSSPixels snap_a_length_as_a_border_width(double device_pixels_per_css_pixel, CSSPixels length)
  257. {
  258. // 1. Assert: len is non-negative.
  259. VERIFY(length >= 0);
  260. // 2. If len is an integer number of device pixels, do nothing.
  261. auto device_pixels = length.to_double() * device_pixels_per_css_pixel;
  262. if (device_pixels == trunc(device_pixels))
  263. return length;
  264. // 3. If len is greater than zero, but less than 1 device pixel, round len up to 1 device pixel.
  265. if (device_pixels > 0 && device_pixels < 1)
  266. return CSSPixels::nearest_value_for(1 / device_pixels_per_css_pixel);
  267. // 4. If len is greater than 1 device pixel, round it down to the nearest integer number of device pixels.
  268. if (device_pixels > 1)
  269. return CSSPixels::nearest_value_for(floor(device_pixels) / device_pixels_per_css_pixel);
  270. return length;
  271. }
  272. void NodeWithStyle::apply_style(const CSS::StyleProperties& computed_style)
  273. {
  274. auto& computed_values = mutable_computed_values();
  275. // NOTE: color must be set first to ensure currentColor can be resolved in other properties (e.g. background-color).
  276. computed_values.set_color(computed_style.color_or_fallback(CSS::PropertyID::Color, *this, CSS::InitialValues::color()));
  277. // NOTE: We have to be careful that font-related properties get set in the right order.
  278. // m_font is used by Length::to_px() when resolving sizes against this layout node.
  279. // That's why it has to be set before everything else.
  280. computed_values.set_font_list(computed_style.computed_font_list());
  281. computed_values.set_font_size(computed_style.property(CSS::PropertyID::FontSize).as_length().length().to_px(*this));
  282. computed_values.set_font_weight(round_to<int>(computed_style.property(CSS::PropertyID::FontWeight).as_number().number()));
  283. computed_values.set_line_height(computed_style.line_height());
  284. computed_values.set_vertical_align(computed_style.vertical_align());
  285. {
  286. auto const& attachments = computed_style.property(CSS::PropertyID::BackgroundAttachment);
  287. auto const& clips = computed_style.property(CSS::PropertyID::BackgroundClip);
  288. auto const& images = computed_style.property(CSS::PropertyID::BackgroundImage);
  289. auto const& origins = computed_style.property(CSS::PropertyID::BackgroundOrigin);
  290. auto const& x_positions = computed_style.property(CSS::PropertyID::BackgroundPositionX);
  291. auto const& y_positions = computed_style.property(CSS::PropertyID::BackgroundPositionY);
  292. auto const& repeats = computed_style.property(CSS::PropertyID::BackgroundRepeat);
  293. auto const& sizes = computed_style.property(CSS::PropertyID::BackgroundSize);
  294. auto count_layers = [](auto const& maybe_style_value) -> size_t {
  295. if (maybe_style_value.is_value_list())
  296. return maybe_style_value.as_value_list().size();
  297. else
  298. return 1;
  299. };
  300. auto value_for_layer = [](auto const& style_value, size_t layer_index) -> RefPtr<CSS::CSSStyleValue const> {
  301. if (style_value.is_value_list())
  302. return style_value.as_value_list().value_at(layer_index, true);
  303. return style_value;
  304. };
  305. size_t layer_count = 1;
  306. layer_count = max(layer_count, count_layers(attachments));
  307. layer_count = max(layer_count, count_layers(clips));
  308. layer_count = max(layer_count, count_layers(images));
  309. layer_count = max(layer_count, count_layers(origins));
  310. layer_count = max(layer_count, count_layers(x_positions));
  311. layer_count = max(layer_count, count_layers(y_positions));
  312. layer_count = max(layer_count, count_layers(repeats));
  313. layer_count = max(layer_count, count_layers(sizes));
  314. Vector<CSS::BackgroundLayerData> layers;
  315. layers.ensure_capacity(layer_count);
  316. for (size_t layer_index = 0; layer_index < layer_count; layer_index++) {
  317. CSS::BackgroundLayerData layer;
  318. if (auto image_value = value_for_layer(images, layer_index); image_value) {
  319. if (image_value->is_abstract_image()) {
  320. layer.background_image = image_value->as_abstract_image();
  321. const_cast<CSS::AbstractImageStyleValue&>(*layer.background_image).load_any_resources(document());
  322. }
  323. }
  324. if (auto attachment_value = value_for_layer(attachments, layer_index); attachment_value && attachment_value->is_keyword()) {
  325. switch (attachment_value->to_keyword()) {
  326. case CSS::Keyword::Fixed:
  327. layer.attachment = CSS::BackgroundAttachment::Fixed;
  328. break;
  329. case CSS::Keyword::Local:
  330. layer.attachment = CSS::BackgroundAttachment::Local;
  331. break;
  332. case CSS::Keyword::Scroll:
  333. layer.attachment = CSS::BackgroundAttachment::Scroll;
  334. break;
  335. default:
  336. break;
  337. }
  338. }
  339. auto as_box = [](auto keyword) {
  340. switch (keyword) {
  341. case CSS::Keyword::BorderBox:
  342. return CSS::BackgroundBox::BorderBox;
  343. case CSS::Keyword::ContentBox:
  344. return CSS::BackgroundBox::ContentBox;
  345. case CSS::Keyword::PaddingBox:
  346. return CSS::BackgroundBox::PaddingBox;
  347. case CSS::Keyword::Text:
  348. return CSS::BackgroundBox::Text;
  349. default:
  350. VERIFY_NOT_REACHED();
  351. }
  352. };
  353. if (auto origin_value = value_for_layer(origins, layer_index); origin_value && origin_value->is_keyword()) {
  354. layer.origin = as_box(origin_value->to_keyword());
  355. }
  356. if (auto clip_value = value_for_layer(clips, layer_index); clip_value && clip_value->is_keyword()) {
  357. layer.clip = as_box(clip_value->to_keyword());
  358. }
  359. if (auto position_value = value_for_layer(x_positions, layer_index); position_value && position_value->is_edge()) {
  360. auto& position = position_value->as_edge();
  361. layer.position_edge_x = position.edge();
  362. layer.position_offset_x = position.offset();
  363. }
  364. if (auto position_value = value_for_layer(y_positions, layer_index); position_value && position_value->is_edge()) {
  365. auto& position = position_value->as_edge();
  366. layer.position_edge_y = position.edge();
  367. layer.position_offset_y = position.offset();
  368. };
  369. if (auto size_value = value_for_layer(sizes, layer_index); size_value) {
  370. if (size_value->is_background_size()) {
  371. auto& size = size_value->as_background_size();
  372. layer.size_type = CSS::BackgroundSize::LengthPercentage;
  373. layer.size_x = size.size_x();
  374. layer.size_y = size.size_y();
  375. } else if (size_value->is_keyword()) {
  376. switch (size_value->to_keyword()) {
  377. case CSS::Keyword::Contain:
  378. layer.size_type = CSS::BackgroundSize::Contain;
  379. break;
  380. case CSS::Keyword::Cover:
  381. layer.size_type = CSS::BackgroundSize::Cover;
  382. break;
  383. default:
  384. break;
  385. }
  386. }
  387. }
  388. if (auto repeat_value = value_for_layer(repeats, layer_index); repeat_value && repeat_value->is_background_repeat()) {
  389. layer.repeat_x = repeat_value->as_background_repeat().repeat_x();
  390. layer.repeat_y = repeat_value->as_background_repeat().repeat_y();
  391. }
  392. layers.append(move(layer));
  393. }
  394. computed_values.set_background_layers(move(layers));
  395. }
  396. computed_values.set_background_color(computed_style.color_or_fallback(CSS::PropertyID::BackgroundColor, *this, CSS::InitialValues::background_color()));
  397. if (auto box_sizing = computed_style.box_sizing(); box_sizing.has_value())
  398. computed_values.set_box_sizing(box_sizing.release_value());
  399. if (auto maybe_font_variant = computed_style.font_variant(); maybe_font_variant.has_value())
  400. computed_values.set_font_variant(maybe_font_variant.release_value());
  401. if (auto maybe_font_language_override = computed_style.font_language_override(); maybe_font_language_override.has_value())
  402. computed_values.set_font_language_override(maybe_font_language_override.release_value());
  403. if (auto maybe_font_feature_settings = computed_style.font_feature_settings(); maybe_font_feature_settings.has_value())
  404. computed_values.set_font_feature_settings(maybe_font_feature_settings.release_value());
  405. if (auto maybe_font_variation_settings = computed_style.font_variation_settings(); maybe_font_variation_settings.has_value())
  406. computed_values.set_font_variation_settings(maybe_font_variation_settings.release_value());
  407. auto const& border_bottom_left_radius = computed_style.property(CSS::PropertyID::BorderBottomLeftRadius);
  408. if (border_bottom_left_radius.is_border_radius()) {
  409. computed_values.set_border_bottom_left_radius(
  410. CSS::BorderRadiusData {
  411. border_bottom_left_radius.as_border_radius().horizontal_radius(),
  412. border_bottom_left_radius.as_border_radius().vertical_radius() });
  413. }
  414. auto const& border_bottom_right_radius = computed_style.property(CSS::PropertyID::BorderBottomRightRadius);
  415. if (border_bottom_right_radius.is_border_radius()) {
  416. computed_values.set_border_bottom_right_radius(
  417. CSS::BorderRadiusData {
  418. border_bottom_right_radius.as_border_radius().horizontal_radius(),
  419. border_bottom_right_radius.as_border_radius().vertical_radius() });
  420. }
  421. auto const& border_top_left_radius = computed_style.property(CSS::PropertyID::BorderTopLeftRadius);
  422. if (border_top_left_radius.is_border_radius()) {
  423. computed_values.set_border_top_left_radius(
  424. CSS::BorderRadiusData {
  425. border_top_left_radius.as_border_radius().horizontal_radius(),
  426. border_top_left_radius.as_border_radius().vertical_radius() });
  427. }
  428. auto const& border_top_right_radius = computed_style.property(CSS::PropertyID::BorderTopRightRadius);
  429. if (border_top_right_radius.is_border_radius()) {
  430. computed_values.set_border_top_right_radius(
  431. CSS::BorderRadiusData {
  432. border_top_right_radius.as_border_radius().horizontal_radius(),
  433. border_top_right_radius.as_border_radius().vertical_radius() });
  434. }
  435. computed_values.set_display(computed_style.display());
  436. auto flex_direction = computed_style.flex_direction();
  437. if (flex_direction.has_value())
  438. computed_values.set_flex_direction(flex_direction.value());
  439. auto flex_wrap = computed_style.flex_wrap();
  440. if (flex_wrap.has_value())
  441. computed_values.set_flex_wrap(flex_wrap.value());
  442. auto flex_basis = computed_style.flex_basis();
  443. if (flex_basis.has_value())
  444. computed_values.set_flex_basis(flex_basis.value());
  445. computed_values.set_flex_grow(computed_style.flex_grow());
  446. computed_values.set_flex_shrink(computed_style.flex_shrink());
  447. computed_values.set_order(computed_style.order());
  448. computed_values.set_clip(computed_style.clip());
  449. auto resolve_filter = [this](CSS::Filter const& computed_filter) -> CSS::ResolvedFilter {
  450. CSS::ResolvedFilter resolved_filter;
  451. for (auto const& filter : computed_filter.filters()) {
  452. filter.visit(
  453. [&](CSS::FilterOperation::Blur const& blur) {
  454. resolved_filter.filters.append(CSS::ResolvedFilter::Blur {
  455. .radius = blur.resolved_radius(*this) });
  456. },
  457. [&](CSS::FilterOperation::DropShadow const& drop_shadow) {
  458. auto context = CSS::Length::ResolutionContext::for_layout_node(*this);
  459. // The default value for omitted values is missing length values set to 0
  460. // and the missing used color is taken from the color property.
  461. resolved_filter.filters.append(CSS::ResolvedFilter::DropShadow {
  462. .offset_x = drop_shadow.offset_x.resolved(context).to_px(*this).to_double(),
  463. .offset_y = drop_shadow.offset_y.resolved(context).to_px(*this).to_double(),
  464. .radius = drop_shadow.radius.has_value() ? drop_shadow.radius->resolved(context).to_px(*this).to_double() : 0.0,
  465. .color = drop_shadow.color.has_value() ? *drop_shadow.color : this->computed_values().color() });
  466. },
  467. [&](CSS::FilterOperation::Color const& color_operation) {
  468. resolved_filter.filters.append(CSS::ResolvedFilter::Color {
  469. .type = color_operation.operation,
  470. .amount = color_operation.resolved_amount() });
  471. },
  472. [&](CSS::FilterOperation::HueRotate const& hue_rotate) {
  473. resolved_filter.filters.append(CSS::ResolvedFilter::HueRotate { .angle_degrees = hue_rotate.angle_degrees(*this) });
  474. });
  475. }
  476. return resolved_filter;
  477. };
  478. if (computed_style.backdrop_filter().has_filters())
  479. computed_values.set_backdrop_filter(resolve_filter(computed_style.backdrop_filter()));
  480. if (computed_style.filter().has_filters())
  481. computed_values.set_filter(resolve_filter(computed_style.filter()));
  482. auto justify_content = computed_style.justify_content();
  483. if (justify_content.has_value())
  484. computed_values.set_justify_content(justify_content.value());
  485. auto justify_items = computed_style.justify_items();
  486. if (justify_items.has_value())
  487. computed_values.set_justify_items(justify_items.value());
  488. auto justify_self = computed_style.justify_self();
  489. if (justify_self.has_value())
  490. computed_values.set_justify_self(justify_self.value());
  491. auto accent_color = computed_style.accent_color(*this);
  492. if (accent_color.has_value())
  493. computed_values.set_accent_color(accent_color.value());
  494. auto align_content = computed_style.align_content();
  495. if (align_content.has_value())
  496. computed_values.set_align_content(align_content.value());
  497. auto align_items = computed_style.align_items();
  498. if (align_items.has_value())
  499. computed_values.set_align_items(align_items.value());
  500. auto align_self = computed_style.align_self();
  501. if (align_self.has_value())
  502. computed_values.set_align_self(align_self.value());
  503. auto appearance = computed_style.appearance();
  504. if (appearance.has_value())
  505. computed_values.set_appearance(appearance.value());
  506. auto position = computed_style.position();
  507. if (position.has_value())
  508. computed_values.set_position(position.value());
  509. auto text_align = computed_style.text_align();
  510. if (text_align.has_value())
  511. computed_values.set_text_align(text_align.value());
  512. auto text_justify = computed_style.text_justify();
  513. if (text_align.has_value())
  514. computed_values.set_text_justify(text_justify.value());
  515. if (auto text_indent = computed_style.length_percentage(CSS::PropertyID::TextIndent); text_indent.has_value())
  516. computed_values.set_text_indent(text_indent.release_value());
  517. if (auto text_overflow = computed_style.text_overflow(); text_overflow.has_value())
  518. computed_values.set_text_overflow(text_overflow.release_value());
  519. auto tab_size = computed_style.tab_size();
  520. computed_values.set_tab_size(tab_size);
  521. auto white_space = computed_style.white_space();
  522. if (white_space.has_value())
  523. computed_values.set_white_space(white_space.value());
  524. auto word_break = computed_style.word_break();
  525. if (word_break.has_value())
  526. computed_values.set_word_break(word_break.value());
  527. auto word_spacing = computed_style.word_spacing();
  528. if (word_spacing.has_value())
  529. computed_values.set_word_spacing(word_spacing.value());
  530. auto letter_spacing = computed_style.letter_spacing();
  531. if (letter_spacing.has_value())
  532. computed_values.set_letter_spacing(letter_spacing.value());
  533. auto float_ = computed_style.float_();
  534. if (float_.has_value())
  535. computed_values.set_float(float_.value());
  536. computed_values.set_border_spacing_horizontal(computed_style.border_spacing_horizontal(*this));
  537. computed_values.set_border_spacing_vertical(computed_style.border_spacing_vertical(*this));
  538. auto caption_side = computed_style.caption_side();
  539. if (caption_side.has_value())
  540. computed_values.set_caption_side(caption_side.value());
  541. auto clear = computed_style.clear();
  542. if (clear.has_value())
  543. computed_values.set_clear(clear.value());
  544. auto overflow_x = computed_style.overflow_x();
  545. if (overflow_x.has_value())
  546. computed_values.set_overflow_x(overflow_x.value());
  547. auto overflow_y = computed_style.overflow_y();
  548. if (overflow_y.has_value())
  549. computed_values.set_overflow_y(overflow_y.value());
  550. auto content_visibility = computed_style.content_visibility();
  551. if (content_visibility.has_value())
  552. computed_values.set_content_visibility(content_visibility.value());
  553. auto cursor = computed_style.cursor();
  554. if (cursor.has_value())
  555. computed_values.set_cursor(cursor.value());
  556. auto image_rendering = computed_style.image_rendering();
  557. if (image_rendering.has_value())
  558. computed_values.set_image_rendering(image_rendering.value());
  559. auto pointer_events = computed_style.pointer_events();
  560. if (pointer_events.has_value())
  561. computed_values.set_pointer_events(pointer_events.value());
  562. computed_values.set_text_decoration_line(computed_style.text_decoration_line());
  563. auto text_decoration_style = computed_style.text_decoration_style();
  564. if (text_decoration_style.has_value())
  565. computed_values.set_text_decoration_style(text_decoration_style.value());
  566. auto text_transform = computed_style.text_transform();
  567. if (text_transform.has_value())
  568. computed_values.set_text_transform(text_transform.value());
  569. if (auto list_style_type = computed_style.list_style_type(); list_style_type.has_value())
  570. computed_values.set_list_style_type(list_style_type.value());
  571. auto const& list_style_image = computed_style.property(CSS::PropertyID::ListStyleImage);
  572. if (list_style_image.is_abstract_image()) {
  573. m_list_style_image = list_style_image.as_abstract_image();
  574. const_cast<CSS::AbstractImageStyleValue&>(*m_list_style_image).load_any_resources(document());
  575. }
  576. if (auto list_style_position = computed_style.list_style_position(); list_style_position.has_value())
  577. computed_values.set_list_style_position(list_style_position.value());
  578. // FIXME: The default text decoration color value is `currentcolor`, but since we can't resolve that easily,
  579. // we just manually grab the value from `color`. This makes it dependent on `color` being
  580. // specified first, so it's far from ideal.
  581. computed_values.set_text_decoration_color(computed_style.color_or_fallback(CSS::PropertyID::TextDecorationColor, *this, computed_values.color()));
  582. if (auto maybe_text_decoration_thickness = computed_style.length_percentage(CSS::PropertyID::TextDecorationThickness); maybe_text_decoration_thickness.has_value())
  583. computed_values.set_text_decoration_thickness(maybe_text_decoration_thickness.release_value());
  584. computed_values.set_webkit_text_fill_color(computed_style.color_or_fallback(CSS::PropertyID::WebkitTextFillColor, *this, computed_values.color()));
  585. computed_values.set_text_shadow(computed_style.text_shadow(*this));
  586. computed_values.set_z_index(computed_style.z_index());
  587. computed_values.set_opacity(computed_style.opacity());
  588. if (auto maybe_visibility = computed_style.visibility(); maybe_visibility.has_value())
  589. computed_values.set_visibility(maybe_visibility.release_value());
  590. computed_values.set_width(computed_style.size_value(CSS::PropertyID::Width));
  591. computed_values.set_min_width(computed_style.size_value(CSS::PropertyID::MinWidth));
  592. computed_values.set_max_width(computed_style.size_value(CSS::PropertyID::MaxWidth));
  593. computed_values.set_height(computed_style.size_value(CSS::PropertyID::Height));
  594. computed_values.set_min_height(computed_style.size_value(CSS::PropertyID::MinHeight));
  595. computed_values.set_max_height(computed_style.size_value(CSS::PropertyID::MaxHeight));
  596. computed_values.set_inset(computed_style.length_box(CSS::PropertyID::Left, CSS::PropertyID::Top, CSS::PropertyID::Right, CSS::PropertyID::Bottom, CSS::Length::make_auto()));
  597. computed_values.set_margin(computed_style.length_box(CSS::PropertyID::MarginLeft, CSS::PropertyID::MarginTop, CSS::PropertyID::MarginRight, CSS::PropertyID::MarginBottom, CSS::Length::make_px(0)));
  598. computed_values.set_padding(computed_style.length_box(CSS::PropertyID::PaddingLeft, CSS::PropertyID::PaddingTop, CSS::PropertyID::PaddingRight, CSS::PropertyID::PaddingBottom, CSS::Length::make_px(0)));
  599. computed_values.set_box_shadow(computed_style.box_shadow(*this));
  600. if (auto rotate_value = computed_style.rotate(*this); rotate_value.has_value())
  601. computed_values.set_rotate(rotate_value.release_value());
  602. if (auto translate_value = computed_style.translate(); translate_value.has_value())
  603. computed_values.set_translate(translate_value.release_value());
  604. if (auto scale_value = computed_style.scale(); scale_value.has_value())
  605. computed_values.set_scale(scale_value.release_value());
  606. computed_values.set_transformations(computed_style.transformations());
  607. if (auto transform_box = computed_style.transform_box(); transform_box.has_value())
  608. computed_values.set_transform_box(transform_box.value());
  609. computed_values.set_transform_origin(computed_style.transform_origin());
  610. auto const& transition_delay_property = computed_style.property(CSS::PropertyID::TransitionDelay);
  611. if (transition_delay_property.is_time()) {
  612. auto const& transition_delay = transition_delay_property.as_time();
  613. computed_values.set_transition_delay(transition_delay.time());
  614. } else if (transition_delay_property.is_math()) {
  615. auto const& transition_delay = transition_delay_property.as_math();
  616. computed_values.set_transition_delay(transition_delay.resolve_time().value());
  617. }
  618. auto do_border_style = [&](CSS::BorderData& border, CSS::PropertyID width_property, CSS::PropertyID color_property, CSS::PropertyID style_property) {
  619. // FIXME: The default border color value is `currentcolor`, but since we can't resolve that easily,
  620. // we just manually grab the value from `color`. This makes it dependent on `color` being
  621. // specified first, so it's far from ideal.
  622. border.color = computed_style.color_or_fallback(color_property, *this, computed_values.color());
  623. border.line_style = computed_style.line_style(style_property).value_or(CSS::LineStyle::None);
  624. // https://w3c.github.io/csswg-drafts/css-backgrounds/#border-style
  625. // none
  626. // No border. Color and width are ignored (i.e., the border has width 0). Note this means that the initial value of border-image-width will also resolve to zero.
  627. // hidden
  628. // Same as none, but has different behavior in the border conflict resolution rules for border-collapsed tables [CSS2].
  629. if (border.line_style == CSS::LineStyle::None || border.line_style == CSS::LineStyle::Hidden) {
  630. border.width = 0;
  631. } else {
  632. auto resolve_border_width = [&]() -> CSSPixels {
  633. auto const& value = computed_style.property(width_property);
  634. if (value.is_math())
  635. return max(CSSPixels { 0 }, value.as_math().resolve_length(*this)->to_px(*this));
  636. if (value.is_length())
  637. return value.as_length().length().to_px(*this);
  638. if (value.is_keyword()) {
  639. // https://www.w3.org/TR/css-backgrounds-3/#valdef-line-width-thin
  640. switch (value.to_keyword()) {
  641. case CSS::Keyword::Thin:
  642. return 1;
  643. case CSS::Keyword::Medium:
  644. return 3;
  645. case CSS::Keyword::Thick:
  646. return 5;
  647. default:
  648. VERIFY_NOT_REACHED();
  649. }
  650. }
  651. VERIFY_NOT_REACHED();
  652. };
  653. border.width = snap_a_length_as_a_border_width(document().page().client().device_pixels_per_css_pixel(), resolve_border_width());
  654. }
  655. };
  656. do_border_style(computed_values.border_left(), CSS::PropertyID::BorderLeftWidth, CSS::PropertyID::BorderLeftColor, CSS::PropertyID::BorderLeftStyle);
  657. do_border_style(computed_values.border_top(), CSS::PropertyID::BorderTopWidth, CSS::PropertyID::BorderTopColor, CSS::PropertyID::BorderTopStyle);
  658. do_border_style(computed_values.border_right(), CSS::PropertyID::BorderRightWidth, CSS::PropertyID::BorderRightColor, CSS::PropertyID::BorderRightStyle);
  659. do_border_style(computed_values.border_bottom(), CSS::PropertyID::BorderBottomWidth, CSS::PropertyID::BorderBottomColor, CSS::PropertyID::BorderBottomStyle);
  660. if (auto const& outline_color = computed_style.property(CSS::PropertyID::OutlineColor); outline_color.has_color())
  661. computed_values.set_outline_color(outline_color.to_color(*this));
  662. if (auto const& outline_offset = computed_style.property(CSS::PropertyID::OutlineOffset); outline_offset.is_length())
  663. computed_values.set_outline_offset(outline_offset.as_length().length());
  664. if (auto const& outline_style = computed_style.outline_style(); outline_style.has_value())
  665. computed_values.set_outline_style(outline_style.value());
  666. if (auto const& outline_width = computed_style.property(CSS::PropertyID::OutlineWidth); outline_width.is_length())
  667. computed_values.set_outline_width(outline_width.as_length().length());
  668. computed_values.set_grid_auto_columns(computed_style.grid_auto_columns());
  669. computed_values.set_grid_auto_rows(computed_style.grid_auto_rows());
  670. computed_values.set_grid_template_columns(computed_style.grid_template_columns());
  671. computed_values.set_grid_template_rows(computed_style.grid_template_rows());
  672. computed_values.set_grid_column_end(computed_style.grid_column_end());
  673. computed_values.set_grid_column_start(computed_style.grid_column_start());
  674. computed_values.set_grid_row_end(computed_style.grid_row_end());
  675. computed_values.set_grid_row_start(computed_style.grid_row_start());
  676. computed_values.set_grid_template_areas(computed_style.grid_template_areas());
  677. computed_values.set_grid_auto_flow(computed_style.grid_auto_flow());
  678. if (auto cx_value = computed_style.length_percentage(CSS::PropertyID::Cx); cx_value.has_value())
  679. computed_values.set_cx(*cx_value);
  680. if (auto cy_value = computed_style.length_percentage(CSS::PropertyID::Cy); cy_value.has_value())
  681. computed_values.set_cy(*cy_value);
  682. if (auto r_value = computed_style.length_percentage(CSS::PropertyID::R); r_value.has_value())
  683. computed_values.set_r(*r_value);
  684. if (auto rx_value = computed_style.length_percentage(CSS::PropertyID::Rx); rx_value.has_value())
  685. computed_values.set_rx(*rx_value);
  686. if (auto ry_value = computed_style.length_percentage(CSS::PropertyID::Ry); ry_value.has_value())
  687. computed_values.set_ry(*ry_value);
  688. if (auto x_value = computed_style.length_percentage(CSS::PropertyID::X); x_value.has_value())
  689. computed_values.set_x(*x_value);
  690. if (auto y_value = computed_style.length_percentage(CSS::PropertyID::Y); y_value.has_value())
  691. computed_values.set_y(*y_value);
  692. auto const& fill = computed_style.property(CSS::PropertyID::Fill);
  693. if (fill.has_color())
  694. computed_values.set_fill(fill.to_color(*this));
  695. else if (fill.is_url())
  696. computed_values.set_fill(fill.as_url().url());
  697. auto const& stroke = computed_style.property(CSS::PropertyID::Stroke);
  698. if (stroke.has_color())
  699. computed_values.set_stroke(stroke.to_color(*this));
  700. else if (stroke.is_url())
  701. computed_values.set_stroke(stroke.as_url().url());
  702. if (auto const& stop_color = computed_style.property(CSS::PropertyID::StopColor); stop_color.has_color())
  703. computed_values.set_stop_color(stop_color.to_color(*this));
  704. auto const& stroke_width = computed_style.property(CSS::PropertyID::StrokeWidth);
  705. // FIXME: Converting to pixels isn't really correct - values should be in "user units"
  706. // https://svgwg.org/svg2-draft/coords.html#TermUserUnits
  707. if (stroke_width.is_number())
  708. computed_values.set_stroke_width(CSS::Length::make_px(CSSPixels::nearest_value_for(stroke_width.as_number().number())));
  709. else if (stroke_width.is_length())
  710. computed_values.set_stroke_width(stroke_width.as_length().length());
  711. else if (stroke_width.is_percentage())
  712. computed_values.set_stroke_width(CSS::LengthPercentage { stroke_width.as_percentage().percentage() });
  713. if (auto const& mask_image = computed_style.property(CSS::PropertyID::MaskImage); mask_image.is_abstract_image()) {
  714. auto const& abstract_image = mask_image.as_abstract_image();
  715. computed_values.set_mask_image(abstract_image);
  716. const_cast<CSS::AbstractImageStyleValue&>(abstract_image).load_any_resources(document());
  717. }
  718. if (auto mask_type = computed_style.mask_type(); mask_type.has_value())
  719. computed_values.set_mask_type(*mask_type);
  720. if (auto const& mask = computed_style.property(CSS::PropertyID::Mask); mask.is_url())
  721. computed_values.set_mask(mask.as_url().url());
  722. auto const& clip_path = computed_style.property(CSS::PropertyID::ClipPath);
  723. if (clip_path.is_url())
  724. computed_values.set_clip_path(clip_path.as_url().url());
  725. else if (clip_path.is_basic_shape())
  726. computed_values.set_clip_path(clip_path.as_basic_shape());
  727. if (auto clip_rule = computed_style.clip_rule(); clip_rule.has_value())
  728. computed_values.set_clip_rule(*clip_rule);
  729. if (auto fill_rule = computed_style.fill_rule(); fill_rule.has_value())
  730. computed_values.set_fill_rule(*fill_rule);
  731. computed_values.set_fill_opacity(computed_style.fill_opacity());
  732. if (auto const& stroke_dasharray_or_none = computed_style.property(CSS::PropertyID::StrokeDasharray); !stroke_dasharray_or_none.is_keyword()) {
  733. auto const& stroke_dasharray = stroke_dasharray_or_none.as_value_list();
  734. Vector<Variant<CSS::LengthPercentage, CSS::NumberOrCalculated>> dashes;
  735. for (auto const& value : stroke_dasharray.values()) {
  736. if (value->is_length())
  737. dashes.append(CSS::LengthPercentage { value->as_length().length() });
  738. else if (value->is_percentage())
  739. dashes.append(CSS::LengthPercentage { value->as_percentage().percentage() });
  740. else if (value->is_math())
  741. dashes.append(CSS::LengthPercentage { value->as_math() });
  742. else if (value->is_number())
  743. dashes.append(CSS::NumberOrCalculated { value->as_number().number() });
  744. }
  745. computed_values.set_stroke_dasharray(move(dashes));
  746. }
  747. auto const& stroke_dashoffset = computed_style.property(CSS::PropertyID::StrokeDashoffset);
  748. // FIXME: Converting to pixels isn't really correct - values should be in "user units"
  749. // https://svgwg.org/svg2-draft/coords.html#TermUserUnits
  750. if (stroke_dashoffset.is_number())
  751. computed_values.set_stroke_dashoffset(CSS::Length::make_px(CSSPixels::nearest_value_for(stroke_dashoffset.as_number().number())));
  752. else if (stroke_dashoffset.is_length())
  753. computed_values.set_stroke_dashoffset(stroke_dashoffset.as_length().length());
  754. else if (stroke_dashoffset.is_percentage())
  755. computed_values.set_stroke_dashoffset(CSS::LengthPercentage { stroke_dashoffset.as_percentage().percentage() });
  756. if (auto stroke_linecap = computed_style.stroke_linecap(); stroke_linecap.has_value())
  757. computed_values.set_stroke_linecap(stroke_linecap.value());
  758. if (auto stroke_linejoin = computed_style.stroke_linejoin(); stroke_linejoin.has_value())
  759. computed_values.set_stroke_linejoin(stroke_linejoin.value());
  760. computed_values.set_stroke_miterlimit(computed_style.stroke_miterlimit());
  761. computed_values.set_stroke_opacity(computed_style.stroke_opacity());
  762. computed_values.set_stop_opacity(computed_style.stop_opacity());
  763. if (auto text_anchor = computed_style.text_anchor(); text_anchor.has_value())
  764. computed_values.set_text_anchor(*text_anchor);
  765. if (auto const& column_count = computed_style.property(CSS::PropertyID::ColumnCount); column_count.is_integer())
  766. computed_values.set_column_count(CSS::ColumnCount::make_integer(column_count.as_integer().integer()));
  767. if (auto column_span = computed_style.column_span(); column_span.has_value())
  768. computed_values.set_column_span(column_span.value());
  769. computed_values.set_column_width(computed_style.size_value(CSS::PropertyID::ColumnWidth));
  770. computed_values.set_column_gap(computed_style.gap_value(CSS::PropertyID::ColumnGap));
  771. computed_values.set_row_gap(computed_style.gap_value(CSS::PropertyID::RowGap));
  772. if (auto border_collapse = computed_style.border_collapse(); border_collapse.has_value())
  773. computed_values.set_border_collapse(border_collapse.value());
  774. if (auto table_layout = computed_style.table_layout(); table_layout.has_value())
  775. computed_values.set_table_layout(table_layout.value());
  776. auto const& aspect_ratio = computed_style.property(CSS::PropertyID::AspectRatio);
  777. if (aspect_ratio.is_value_list()) {
  778. auto const& values_list = aspect_ratio.as_value_list().values();
  779. if (values_list.size() == 2
  780. && values_list[0]->is_keyword() && values_list[0]->as_keyword().keyword() == CSS::Keyword::Auto
  781. && values_list[1]->is_ratio()) {
  782. computed_values.set_aspect_ratio({ true, values_list[1]->as_ratio().ratio() });
  783. }
  784. } else if (aspect_ratio.is_keyword() && aspect_ratio.as_keyword().keyword() == CSS::Keyword::Auto) {
  785. computed_values.set_aspect_ratio({ true, {} });
  786. } else if (aspect_ratio.is_ratio()) {
  787. // https://drafts.csswg.org/css-sizing-4/#aspect-ratio
  788. // If the <ratio> is degenerate, the property instead behaves as auto.
  789. if (aspect_ratio.as_ratio().ratio().is_degenerate())
  790. computed_values.set_aspect_ratio({ true, {} });
  791. else
  792. computed_values.set_aspect_ratio({ false, aspect_ratio.as_ratio().ratio() });
  793. }
  794. auto const& math_shift_value = computed_style.property(CSS::PropertyID::MathShift);
  795. if (auto math_shift = keyword_to_math_shift(math_shift_value.to_keyword()); math_shift.has_value())
  796. computed_values.set_math_shift(math_shift.value());
  797. auto const& math_style_value = computed_style.property(CSS::PropertyID::MathStyle);
  798. if (auto math_style = keyword_to_math_style(math_style_value.to_keyword()); math_style.has_value())
  799. computed_values.set_math_style(math_style.value());
  800. computed_values.set_math_depth(computed_style.math_depth());
  801. computed_values.set_quotes(computed_style.quotes());
  802. computed_values.set_counter_increment(computed_style.counter_data(CSS::PropertyID::CounterIncrement));
  803. computed_values.set_counter_reset(computed_style.counter_data(CSS::PropertyID::CounterReset));
  804. computed_values.set_counter_set(computed_style.counter_data(CSS::PropertyID::CounterSet));
  805. if (auto object_fit = computed_style.object_fit(); object_fit.has_value())
  806. computed_values.set_object_fit(object_fit.value());
  807. computed_values.set_object_position(computed_style.object_position());
  808. if (auto direction = computed_style.direction(); direction.has_value())
  809. computed_values.set_direction(direction.value());
  810. if (auto unicode_bidi = computed_style.unicode_bidi(); unicode_bidi.has_value())
  811. computed_values.set_unicode_bidi(unicode_bidi.value());
  812. if (auto scrollbar_width = computed_style.scrollbar_width(); scrollbar_width.has_value())
  813. computed_values.set_scrollbar_width(scrollbar_width.value());
  814. if (auto writing_mode = computed_style.writing_mode(); writing_mode.has_value())
  815. computed_values.set_writing_mode(writing_mode.value());
  816. propagate_style_to_anonymous_wrappers();
  817. }
  818. void NodeWithStyle::propagate_style_to_anonymous_wrappers()
  819. {
  820. // Update the style of any anonymous wrappers that inherit from this node.
  821. // FIXME: This is pretty hackish. It would be nicer if they shared the inherited style
  822. // data structure somehow, so this wasn't necessary.
  823. // If this is a `display:table` box with an anonymous wrapper parent,
  824. // the parent inherits style from *this* node, not the other way around.
  825. if (display().is_table_inside() && is<TableWrapper>(parent())) {
  826. auto& table_wrapper = *static_cast<TableWrapper*>(parent());
  827. static_cast<CSS::MutableComputedValues&>(static_cast<CSS::ComputedValues&>(const_cast<CSS::ImmutableComputedValues&>(table_wrapper.computed_values()))).inherit_from(computed_values());
  828. transfer_table_box_computed_values_to_wrapper_computed_values(table_wrapper.mutable_computed_values());
  829. }
  830. // Propagate style to all anonymous children (except table wrappers!)
  831. for_each_child_of_type<NodeWithStyle>([&](NodeWithStyle& child) {
  832. if (child.is_anonymous() && !is<TableWrapper>(child)) {
  833. auto& child_computed_values = static_cast<CSS::MutableComputedValues&>(static_cast<CSS::ComputedValues&>(const_cast<CSS::ImmutableComputedValues&>(child.computed_values())));
  834. child_computed_values.inherit_from(computed_values());
  835. }
  836. return IterationDecision::Continue;
  837. });
  838. }
  839. bool Node::is_root_element() const
  840. {
  841. if (is_anonymous())
  842. return false;
  843. return is<HTML::HTMLHtmlElement>(*dom_node());
  844. }
  845. String Node::debug_description() const
  846. {
  847. StringBuilder builder;
  848. builder.append(class_name());
  849. if (dom_node()) {
  850. builder.appendff("<{}>", dom_node()->node_name());
  851. if (dom_node()->is_element()) {
  852. auto& element = static_cast<DOM::Element const&>(*dom_node());
  853. if (element.id().has_value())
  854. builder.appendff("#{}", element.id().value());
  855. for (auto const& class_name : element.class_names())
  856. builder.appendff(".{}", class_name);
  857. }
  858. } else {
  859. builder.append("(anonymous)"sv);
  860. }
  861. return MUST(builder.to_string());
  862. }
  863. CSS::Display Node::display() const
  864. {
  865. if (!has_style()) {
  866. // NOTE: No style means this is dumb text content.
  867. return CSS::Display(CSS::DisplayOutside::Inline, CSS::DisplayInside::Flow);
  868. }
  869. return computed_values().display();
  870. }
  871. bool Node::is_inline() const
  872. {
  873. return display().is_inline_outside();
  874. }
  875. bool Node::is_inline_block() const
  876. {
  877. auto display = this->display();
  878. return display.is_inline_outside() && display.is_flow_root_inside();
  879. }
  880. bool Node::is_inline_table() const
  881. {
  882. auto display = this->display();
  883. return display.is_inline_outside() && display.is_table_inside();
  884. }
  885. GC::Ref<NodeWithStyle> NodeWithStyle::create_anonymous_wrapper() const
  886. {
  887. auto wrapper = heap().allocate<BlockContainer>(const_cast<DOM::Document&>(document()), nullptr, computed_values().clone_inherited_values());
  888. wrapper->mutable_computed_values().set_display(CSS::Display(CSS::DisplayOutside::Block, CSS::DisplayInside::Flow));
  889. // NOTE: These properties are not inherited, but we still have to propagate them to anonymous wrappers.
  890. wrapper->mutable_computed_values().set_text_decoration_line(computed_values().text_decoration_line());
  891. wrapper->mutable_computed_values().set_text_decoration_thickness(computed_values().text_decoration_thickness());
  892. wrapper->mutable_computed_values().set_text_decoration_color(computed_values().text_decoration_color());
  893. wrapper->mutable_computed_values().set_text_decoration_style(computed_values().text_decoration_style());
  894. return *wrapper;
  895. }
  896. void NodeWithStyle::reset_table_box_computed_values_used_by_wrapper_to_init_values()
  897. {
  898. VERIFY(this->display().is_table_inside());
  899. auto& mutable_computed_values = this->mutable_computed_values();
  900. mutable_computed_values.set_position(CSS::InitialValues::position());
  901. mutable_computed_values.set_float(CSS::InitialValues::float_());
  902. mutable_computed_values.set_clear(CSS::InitialValues::clear());
  903. mutable_computed_values.set_inset(CSS::InitialValues::inset());
  904. mutable_computed_values.set_margin(CSS::InitialValues::margin());
  905. }
  906. void NodeWithStyle::transfer_table_box_computed_values_to_wrapper_computed_values(CSS::ComputedValues& wrapper_computed_values)
  907. {
  908. // The computed values of properties 'position', 'float', 'margin-*', 'top', 'right', 'bottom', and 'left' on the table element are used on the table wrapper box and not the table box;
  909. // all other values of non-inheritable properties are used on the table box and not the table wrapper box.
  910. // (Where the table element's values are not used on the table and table wrapper boxes, the initial values are used instead.)
  911. auto& mutable_wrapper_computed_values = static_cast<CSS::MutableComputedValues&>(wrapper_computed_values);
  912. if (display().is_inline_outside())
  913. mutable_wrapper_computed_values.set_display(CSS::Display::from_short(CSS::Display::Short::InlineBlock));
  914. else
  915. mutable_wrapper_computed_values.set_display(CSS::Display::from_short(CSS::Display::Short::FlowRoot));
  916. mutable_wrapper_computed_values.set_position(computed_values().position());
  917. mutable_wrapper_computed_values.set_inset(computed_values().inset());
  918. mutable_wrapper_computed_values.set_float(computed_values().float_());
  919. mutable_wrapper_computed_values.set_clear(computed_values().clear());
  920. mutable_wrapper_computed_values.set_margin(computed_values().margin());
  921. reset_table_box_computed_values_used_by_wrapper_to_init_values();
  922. }
  923. bool NodeWithStyle::is_body() const
  924. {
  925. return dom_node() && dom_node() == document().body();
  926. }
  927. static bool overflow_value_makes_box_a_scroll_container(CSS::Overflow overflow)
  928. {
  929. switch (overflow) {
  930. case CSS::Overflow::Clip:
  931. case CSS::Overflow::Visible:
  932. return false;
  933. case CSS::Overflow::Auto:
  934. case CSS::Overflow::Hidden:
  935. case CSS::Overflow::Scroll:
  936. return true;
  937. }
  938. VERIFY_NOT_REACHED();
  939. }
  940. bool NodeWithStyle::is_scroll_container() const
  941. {
  942. // NOTE: This isn't in the spec, but we want the viewport to behave like a scroll container.
  943. if (is_viewport())
  944. return true;
  945. return overflow_value_makes_box_a_scroll_container(computed_values().overflow_x())
  946. || overflow_value_makes_box_a_scroll_container(computed_values().overflow_y());
  947. }
  948. void Node::add_paintable(GC::Ptr<Painting::Paintable> paintable)
  949. {
  950. if (!paintable)
  951. return;
  952. m_paintable.append(*paintable);
  953. }
  954. void Node::clear_paintables()
  955. {
  956. m_paintable.clear();
  957. }
  958. GC::Ptr<Painting::Paintable> Node::create_paintable() const
  959. {
  960. return nullptr;
  961. }
  962. bool Node::is_anonymous() const
  963. {
  964. return m_anonymous;
  965. }
  966. DOM::Node const* Node::dom_node() const
  967. {
  968. if (m_anonymous)
  969. return nullptr;
  970. return m_dom_node.ptr();
  971. }
  972. DOM::Node* Node::dom_node()
  973. {
  974. if (m_anonymous)
  975. return nullptr;
  976. return m_dom_node.ptr();
  977. }
  978. DOM::Element const* Node::pseudo_element_generator() const
  979. {
  980. VERIFY(m_generated_for != GeneratedFor::NotGenerated);
  981. return m_pseudo_element_generator.ptr();
  982. }
  983. DOM::Element* Node::pseudo_element_generator()
  984. {
  985. VERIFY(m_generated_for != GeneratedFor::NotGenerated);
  986. return m_pseudo_element_generator.ptr();
  987. }
  988. DOM::Document& Node::document()
  989. {
  990. return m_dom_node->document();
  991. }
  992. DOM::Document const& Node::document() const
  993. {
  994. return m_dom_node->document();
  995. }
  996. }