Node.cpp 53 KB

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