Node.cpp 44 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008
  1. /*
  2. * Copyright (c) 2018-2023, Andreas Kling <kling@serenityos.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/EdgeStyleValue.h>
  13. #include <LibWeb/CSS/StyleValues/IdentifierStyleValue.h>
  14. #include <LibWeb/CSS/StyleValues/IntegerStyleValue.h>
  15. #include <LibWeb/CSS/StyleValues/LengthStyleValue.h>
  16. #include <LibWeb/CSS/StyleValues/MathDepthStyleValue.h>
  17. #include <LibWeb/CSS/StyleValues/NumberStyleValue.h>
  18. #include <LibWeb/CSS/StyleValues/PercentageStyleValue.h>
  19. #include <LibWeb/CSS/StyleValues/RatioStyleValue.h>
  20. #include <LibWeb/CSS/StyleValues/StyleValueList.h>
  21. #include <LibWeb/CSS/StyleValues/TimeStyleValue.h>
  22. #include <LibWeb/CSS/StyleValues/URLStyleValue.h>
  23. #include <LibWeb/DOM/Document.h>
  24. #include <LibWeb/Dump.h>
  25. #include <LibWeb/HTML/BrowsingContext.h>
  26. #include <LibWeb/HTML/HTMLHtmlElement.h>
  27. #include <LibWeb/Layout/BlockContainer.h>
  28. #include <LibWeb/Layout/FormattingContext.h>
  29. #include <LibWeb/Layout/Node.h>
  30. #include <LibWeb/Layout/TableWrapper.h>
  31. #include <LibWeb/Layout/TextNode.h>
  32. #include <LibWeb/Layout/Viewport.h>
  33. #include <LibWeb/Page/Page.h>
  34. #include <LibWeb/Painting/InlinePaintable.h>
  35. #include <LibWeb/Platform/FontPlugin.h>
  36. namespace Web::Layout {
  37. Node::Node(DOM::Document& document, DOM::Node* node)
  38. : m_dom_node(node ? *node : document)
  39. , m_browsing_context(*document.browsing_context())
  40. , m_anonymous(node == nullptr)
  41. {
  42. if (node)
  43. node->set_layout_node({}, *this);
  44. }
  45. Node::~Node() = default;
  46. void Node::visit_edges(Cell::Visitor& visitor)
  47. {
  48. Base::visit_edges(visitor);
  49. visitor.visit(m_dom_node);
  50. visitor.visit(m_paintable);
  51. visitor.visit(m_pseudo_element_generator);
  52. visitor.visit(m_browsing_context);
  53. TreeNode::visit_edges(visitor);
  54. }
  55. // https://www.w3.org/TR/css-display-3/#out-of-flow
  56. bool Node::is_out_of_flow(FormattingContext const& formatting_context) const
  57. {
  58. // A layout node is out of flow if either:
  59. // 1. It is floated (which requires that floating is not inhibited).
  60. if (!formatting_context.inhibits_floating() && computed_values().float_() != CSS::Float::None)
  61. return true;
  62. // 2. It is "absolutely positioned".
  63. if (is_absolutely_positioned())
  64. return true;
  65. return false;
  66. }
  67. bool Node::can_contain_boxes_with_position_absolute() const
  68. {
  69. if (computed_values().position() != CSS::Positioning::Static)
  70. return true;
  71. if (is<Viewport>(*this))
  72. return true;
  73. // https://w3c.github.io/csswg-drafts/css-transforms-1/#propdef-transform
  74. // Any computed value other than none for the transform affects containing block and stacking context
  75. if (!computed_values().transformations().is_empty())
  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::non_anonymous_containing_block() const
  110. {
  111. auto nearest_ancestor_box = containing_block();
  112. VERIFY(nearest_ancestor_box);
  113. while (nearest_ancestor_box->is_anonymous()) {
  114. nearest_ancestor_box = nearest_ancestor_box->containing_block();
  115. VERIFY(nearest_ancestor_box);
  116. }
  117. return nearest_ancestor_box;
  118. }
  119. // https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context
  120. bool Node::establishes_stacking_context() const
  121. {
  122. // NOTE: While MDN is not authoritative, there isn't a single convenient location
  123. // in the CSS specifications where the rules for stacking contexts is described.
  124. // That's why the "spec link" here points to MDN.
  125. if (!has_style())
  126. return false;
  127. // We make a stacking context for the viewport. Painting and hit testing starts from here.
  128. if (is_viewport())
  129. return true;
  130. // Root element of the document (<html>).
  131. if (is_root_element())
  132. return true;
  133. auto position = computed_values().position();
  134. // Element with a position value absolute or relative and z-index value other than auto.
  135. if (position == CSS::Positioning::Absolute || position == CSS::Positioning::Relative) {
  136. if (computed_values().z_index().has_value()) {
  137. return true;
  138. }
  139. }
  140. // Element with a position value fixed or sticky.
  141. if (position == CSS::Positioning::Fixed || position == CSS::Positioning::Sticky)
  142. return true;
  143. if (!computed_values().transformations().is_empty())
  144. return true;
  145. // Element that is a child of a flex container, with z-index value other than auto.
  146. if (parent() && parent()->display().is_flex_inside() && computed_values().z_index().has_value())
  147. return true;
  148. // Element that is a child of a grid container, with z-index value other than auto.
  149. if (parent() && parent()->display().is_grid_inside() && computed_values().z_index().has_value())
  150. return true;
  151. // https://drafts.fxtf.org/filter-effects-2/#backdrop-filter-operation
  152. // A computed value of other than none results in the creation of both a stacking context [CSS21] and a Containing Block for absolute and fixed position descendants,
  153. // unless the element it applies to is a document root element in the current browsing context.
  154. // Spec Note: This rule works in the same way as for the filter property.
  155. if (!computed_values().backdrop_filter().is_none())
  156. return true;
  157. // Element with any of the following properties with value other than none:
  158. // - transform
  159. // - filter
  160. // - backdrop-filter
  161. // - perspective
  162. // - clip-path
  163. // - mask / mask-image / mask-border
  164. if (computed_values().mask().has_value())
  165. return true;
  166. return computed_values().opacity() < 1.0f;
  167. }
  168. HTML::BrowsingContext const& Node::browsing_context() const
  169. {
  170. return *m_browsing_context;
  171. }
  172. HTML::BrowsingContext& Node::browsing_context()
  173. {
  174. return *m_browsing_context;
  175. }
  176. JS::GCPtr<HTML::Navigable> Node::navigable() const
  177. {
  178. return document().navigable();
  179. }
  180. Viewport const& Node::root() const
  181. {
  182. VERIFY(document().layout_node());
  183. return *document().layout_node();
  184. }
  185. Viewport& Node::root()
  186. {
  187. VERIFY(document().layout_node());
  188. return *document().layout_node();
  189. }
  190. bool Node::is_floating() const
  191. {
  192. if (!has_style())
  193. return false;
  194. // flex-items don't float.
  195. if (is_flex_item())
  196. return false;
  197. return computed_values().float_() != CSS::Float::None;
  198. }
  199. bool Node::is_positioned() const
  200. {
  201. return has_style() && computed_values().position() != CSS::Positioning::Static;
  202. }
  203. bool Node::is_absolutely_positioned() const
  204. {
  205. if (!has_style())
  206. return false;
  207. auto position = computed_values().position();
  208. return position == CSS::Positioning::Absolute || position == CSS::Positioning::Fixed;
  209. }
  210. bool Node::is_fixed_position() const
  211. {
  212. if (!has_style())
  213. return false;
  214. auto position = computed_values().position();
  215. return position == CSS::Positioning::Fixed;
  216. }
  217. NodeWithStyle::NodeWithStyle(DOM::Document& document, DOM::Node* node, NonnullRefPtr<CSS::StyleProperties> computed_style)
  218. : Node(document, node)
  219. , m_computed_values(make<CSS::ComputedValues>())
  220. {
  221. m_has_style = true;
  222. apply_style(*computed_style);
  223. }
  224. NodeWithStyle::NodeWithStyle(DOM::Document& document, DOM::Node* node, NonnullOwnPtr<CSS::ComputedValues> computed_values)
  225. : Node(document, node)
  226. , m_computed_values(move(computed_values))
  227. {
  228. m_has_style = true;
  229. }
  230. void NodeWithStyle::visit_edges(Visitor& visitor)
  231. {
  232. Base::visit_edges(visitor);
  233. for (auto& layer : computed_values().background_layers()) {
  234. if (layer.background_image && layer.background_image->is_image())
  235. layer.background_image->as_image().visit_edges(visitor);
  236. }
  237. if (m_list_style_image && m_list_style_image->is_image())
  238. m_list_style_image->as_image().visit_edges(visitor);
  239. }
  240. // https://www.w3.org/TR/css-values-4/#snap-a-length-as-a-border-width
  241. static CSSPixels snap_a_length_as_a_border_width(double device_pixels_per_css_pixel, CSSPixels length)
  242. {
  243. // 1. Assert: len is non-negative.
  244. VERIFY(length >= 0);
  245. // 2. If len is an integer number of device pixels, do nothing.
  246. auto device_pixels = length.to_double() * device_pixels_per_css_pixel;
  247. if (device_pixels == trunc(device_pixels))
  248. return length;
  249. // 3. If len is greater than zero, but less than 1 device pixel, round len up to 1 device pixel.
  250. if (device_pixels > 0 && device_pixels < 1)
  251. return CSSPixels::nearest_value_for(1 / device_pixels_per_css_pixel);
  252. // 4. If len is greater than 1 device pixel, round it down to the nearest integer number of device pixels.
  253. if (device_pixels > 1)
  254. return CSSPixels::nearest_value_for(floor(device_pixels) / device_pixels_per_css_pixel);
  255. return length;
  256. }
  257. void NodeWithStyle::apply_style(const CSS::StyleProperties& computed_style)
  258. {
  259. auto& computed_values = mutable_computed_values();
  260. // NOTE: color must be set first to ensure currentColor can be resolved in other properties (e.g. background-color).
  261. computed_values.set_color(computed_style.color_or_fallback(CSS::PropertyID::Color, *this, CSS::InitialValues::color()));
  262. // NOTE: We have to be careful that font-related properties get set in the right order.
  263. // m_font is used by Length::to_px() when resolving sizes against this layout node.
  264. // That's why it has to be set before everything else.
  265. computed_values.set_font_list(computed_style.computed_font_list());
  266. computed_values.set_font_size(computed_style.property(CSS::PropertyID::FontSize)->as_length().length().to_px(*this));
  267. computed_values.set_font_weight(round_to<int>(computed_style.property(CSS::PropertyID::FontWeight)->as_number().number()));
  268. computed_values.set_line_height(computed_style.line_height());
  269. computed_values.set_vertical_align(computed_style.vertical_align());
  270. {
  271. auto attachments = computed_style.property(CSS::PropertyID::BackgroundAttachment);
  272. auto clips = computed_style.property(CSS::PropertyID::BackgroundClip);
  273. auto images = computed_style.property(CSS::PropertyID::BackgroundImage);
  274. auto origins = computed_style.property(CSS::PropertyID::BackgroundOrigin);
  275. auto x_positions = computed_style.property(CSS::PropertyID::BackgroundPositionX);
  276. auto y_positions = computed_style.property(CSS::PropertyID::BackgroundPositionY);
  277. auto repeats = computed_style.property(CSS::PropertyID::BackgroundRepeat);
  278. auto sizes = computed_style.property(CSS::PropertyID::BackgroundSize);
  279. auto count_layers = [](auto maybe_style_value) -> size_t {
  280. if (maybe_style_value->is_value_list())
  281. return maybe_style_value->as_value_list().size();
  282. else
  283. return 1;
  284. };
  285. auto value_for_layer = [](auto& style_value, size_t layer_index) -> RefPtr<CSS::StyleValue const> {
  286. if (style_value->is_value_list())
  287. return style_value->as_value_list().value_at(layer_index, true);
  288. return style_value;
  289. };
  290. size_t layer_count = 1;
  291. layer_count = max(layer_count, count_layers(attachments));
  292. layer_count = max(layer_count, count_layers(clips));
  293. layer_count = max(layer_count, count_layers(images));
  294. layer_count = max(layer_count, count_layers(origins));
  295. layer_count = max(layer_count, count_layers(x_positions));
  296. layer_count = max(layer_count, count_layers(y_positions));
  297. layer_count = max(layer_count, count_layers(repeats));
  298. layer_count = max(layer_count, count_layers(sizes));
  299. Vector<CSS::BackgroundLayerData> layers;
  300. layers.ensure_capacity(layer_count);
  301. for (size_t layer_index = 0; layer_index < layer_count; layer_index++) {
  302. CSS::BackgroundLayerData layer;
  303. if (auto image_value = value_for_layer(images, layer_index); image_value) {
  304. if (image_value->is_abstract_image()) {
  305. layer.background_image = image_value->as_abstract_image();
  306. const_cast<CSS::AbstractImageStyleValue&>(*layer.background_image).load_any_resources(document());
  307. }
  308. }
  309. if (auto attachment_value = value_for_layer(attachments, layer_index); attachment_value && attachment_value->is_identifier()) {
  310. switch (attachment_value->to_identifier()) {
  311. case CSS::ValueID::Fixed:
  312. layer.attachment = CSS::BackgroundAttachment::Fixed;
  313. break;
  314. case CSS::ValueID::Local:
  315. layer.attachment = CSS::BackgroundAttachment::Local;
  316. break;
  317. case CSS::ValueID::Scroll:
  318. layer.attachment = CSS::BackgroundAttachment::Scroll;
  319. break;
  320. default:
  321. break;
  322. }
  323. }
  324. auto as_box = [](auto value_id) {
  325. switch (value_id) {
  326. case CSS::ValueID::BorderBox:
  327. return CSS::BackgroundBox::BorderBox;
  328. case CSS::ValueID::ContentBox:
  329. return CSS::BackgroundBox::ContentBox;
  330. case CSS::ValueID::PaddingBox:
  331. return CSS::BackgroundBox::PaddingBox;
  332. default:
  333. VERIFY_NOT_REACHED();
  334. }
  335. };
  336. if (auto origin_value = value_for_layer(origins, layer_index); origin_value && origin_value->is_identifier()) {
  337. layer.origin = as_box(origin_value->to_identifier());
  338. }
  339. if (auto clip_value = value_for_layer(clips, layer_index); clip_value && clip_value->is_identifier()) {
  340. layer.clip = as_box(clip_value->to_identifier());
  341. }
  342. if (auto position_value = value_for_layer(x_positions, layer_index); position_value && position_value->is_edge()) {
  343. auto& position = position_value->as_edge();
  344. layer.position_edge_x = position.edge();
  345. layer.position_offset_x = position.offset();
  346. }
  347. if (auto position_value = value_for_layer(y_positions, layer_index); position_value && position_value->is_edge()) {
  348. auto& position = position_value->as_edge();
  349. layer.position_edge_y = position.edge();
  350. layer.position_offset_y = position.offset();
  351. };
  352. if (auto size_value = value_for_layer(sizes, layer_index); size_value) {
  353. if (size_value->is_background_size()) {
  354. auto& size = size_value->as_background_size();
  355. layer.size_type = CSS::BackgroundSize::LengthPercentage;
  356. layer.size_x = size.size_x();
  357. layer.size_y = size.size_y();
  358. } else if (size_value->is_identifier()) {
  359. switch (size_value->to_identifier()) {
  360. case CSS::ValueID::Contain:
  361. layer.size_type = CSS::BackgroundSize::Contain;
  362. break;
  363. case CSS::ValueID::Cover:
  364. layer.size_type = CSS::BackgroundSize::Cover;
  365. break;
  366. default:
  367. break;
  368. }
  369. }
  370. }
  371. if (auto repeat_value = value_for_layer(repeats, layer_index); repeat_value && repeat_value->is_background_repeat()) {
  372. layer.repeat_x = repeat_value->as_background_repeat().repeat_x();
  373. layer.repeat_y = repeat_value->as_background_repeat().repeat_y();
  374. }
  375. layers.append(move(layer));
  376. }
  377. computed_values.set_background_layers(move(layers));
  378. }
  379. computed_values.set_background_color(computed_style.color_or_fallback(CSS::PropertyID::BackgroundColor, *this, CSS::InitialValues::background_color()));
  380. if (auto box_sizing = computed_style.box_sizing(); box_sizing.has_value())
  381. computed_values.set_box_sizing(box_sizing.release_value());
  382. if (auto maybe_font_variant = computed_style.font_variant(); maybe_font_variant.has_value())
  383. computed_values.set_font_variant(maybe_font_variant.release_value());
  384. // FIXME: BorderXRadius properties are now BorderRadiusStyleValues, so make use of that.
  385. auto border_bottom_left_radius = computed_style.property(CSS::PropertyID::BorderBottomLeftRadius);
  386. if (border_bottom_left_radius->is_border_radius()) {
  387. computed_values.set_border_bottom_left_radius(
  388. CSS::BorderRadiusData {
  389. border_bottom_left_radius->as_border_radius().horizontal_radius(),
  390. border_bottom_left_radius->as_border_radius().vertical_radius() });
  391. }
  392. auto border_bottom_right_radius = computed_style.property(CSS::PropertyID::BorderBottomRightRadius);
  393. if (border_bottom_right_radius->is_border_radius()) {
  394. computed_values.set_border_bottom_right_radius(
  395. CSS::BorderRadiusData {
  396. border_bottom_right_radius->as_border_radius().horizontal_radius(),
  397. border_bottom_right_radius->as_border_radius().vertical_radius() });
  398. }
  399. auto border_top_left_radius = computed_style.property(CSS::PropertyID::BorderTopLeftRadius);
  400. if (border_top_left_radius->is_border_radius()) {
  401. computed_values.set_border_top_left_radius(
  402. CSS::BorderRadiusData {
  403. border_top_left_radius->as_border_radius().horizontal_radius(),
  404. border_top_left_radius->as_border_radius().vertical_radius() });
  405. }
  406. auto border_top_right_radius = computed_style.property(CSS::PropertyID::BorderTopRightRadius);
  407. if (border_top_right_radius->is_border_radius()) {
  408. computed_values.set_border_top_right_radius(
  409. CSS::BorderRadiusData {
  410. border_top_right_radius->as_border_radius().horizontal_radius(),
  411. border_top_right_radius->as_border_radius().vertical_radius() });
  412. }
  413. computed_values.set_display(computed_style.display());
  414. auto flex_direction = computed_style.flex_direction();
  415. if (flex_direction.has_value())
  416. computed_values.set_flex_direction(flex_direction.value());
  417. auto flex_wrap = computed_style.flex_wrap();
  418. if (flex_wrap.has_value())
  419. computed_values.set_flex_wrap(flex_wrap.value());
  420. auto flex_basis = computed_style.flex_basis();
  421. if (flex_basis.has_value())
  422. computed_values.set_flex_basis(flex_basis.value());
  423. computed_values.set_flex_grow(computed_style.flex_grow());
  424. computed_values.set_flex_shrink(computed_style.flex_shrink());
  425. computed_values.set_order(computed_style.order());
  426. computed_values.set_clip(computed_style.clip());
  427. if (computed_style.backdrop_filter().has_filters()) {
  428. CSS::ResolvedBackdropFilter resolved_backdrop_filter;
  429. for (auto& filter : computed_style.backdrop_filter().filters()) {
  430. filter.visit(
  431. [&](CSS::Filter::Blur const& blur) {
  432. resolved_backdrop_filter.filters.append(CSS::ResolvedBackdropFilter::Blur {
  433. .radius = blur.resolved_radius(*this) });
  434. },
  435. [&](CSS::Filter::DropShadow const& drop_shadow) {
  436. // The default value for omitted values is missing length values set to 0
  437. // and the missing used color is taken from the color property.
  438. resolved_backdrop_filter.filters.append(CSS::ResolvedBackdropFilter::DropShadow {
  439. .offset_x = drop_shadow.offset_x.to_px(*this).to_double(),
  440. .offset_y = drop_shadow.offset_y.to_px(*this).to_double(),
  441. .radius = drop_shadow.radius.has_value() ? drop_shadow.radius->to_px(*this).to_double() : 0.0,
  442. .color = drop_shadow.color.has_value() ? *drop_shadow.color : this->computed_values().color() });
  443. },
  444. [&](CSS::Filter::Color const& color_operation) {
  445. resolved_backdrop_filter.filters.append(CSS::ResolvedBackdropFilter::ColorOperation {
  446. .operation = color_operation.operation,
  447. .amount = color_operation.resolved_amount() });
  448. },
  449. [&](CSS::Filter::HueRotate const& hue_rotate) {
  450. resolved_backdrop_filter.filters.append(CSS::ResolvedBackdropFilter::HueRotate { .angle_degrees = hue_rotate.angle_degrees() });
  451. });
  452. }
  453. computed_values.set_backdrop_filter(resolved_backdrop_filter);
  454. }
  455. auto justify_content = computed_style.justify_content();
  456. if (justify_content.has_value())
  457. computed_values.set_justify_content(justify_content.value());
  458. auto justify_items = computed_style.justify_items();
  459. if (justify_items.has_value())
  460. computed_values.set_justify_items(justify_items.value());
  461. auto justify_self = computed_style.justify_self();
  462. if (justify_self.has_value())
  463. computed_values.set_justify_self(justify_self.value());
  464. auto accent_color = computed_style.accent_color(*this);
  465. if (accent_color.has_value())
  466. computed_values.set_accent_color(accent_color.value());
  467. auto align_content = computed_style.align_content();
  468. if (align_content.has_value())
  469. computed_values.set_align_content(align_content.value());
  470. auto align_items = computed_style.align_items();
  471. if (align_items.has_value())
  472. computed_values.set_align_items(align_items.value());
  473. auto align_self = computed_style.align_self();
  474. if (align_self.has_value())
  475. computed_values.set_align_self(align_self.value());
  476. auto appearance = computed_style.appearance();
  477. if (appearance.has_value())
  478. computed_values.set_appearance(appearance.value());
  479. auto position = computed_style.position();
  480. if (position.has_value())
  481. computed_values.set_position(position.value());
  482. auto text_align = computed_style.text_align();
  483. if (text_align.has_value())
  484. computed_values.set_text_align(text_align.value());
  485. auto text_justify = computed_style.text_justify();
  486. if (text_align.has_value())
  487. computed_values.set_text_justify(text_justify.value());
  488. if (auto text_indent = computed_style.length_percentage(CSS::PropertyID::TextIndent); text_indent.has_value())
  489. computed_values.set_text_indent(text_indent.release_value());
  490. auto white_space = computed_style.white_space();
  491. if (white_space.has_value())
  492. computed_values.set_white_space(white_space.value());
  493. auto float_ = computed_style.float_();
  494. if (float_.has_value())
  495. computed_values.set_float(float_.value());
  496. computed_values.set_border_spacing_horizontal(computed_style.border_spacing_horizontal());
  497. computed_values.set_border_spacing_vertical(computed_style.border_spacing_vertical());
  498. auto caption_side = computed_style.caption_side();
  499. if (caption_side.has_value())
  500. computed_values.set_caption_side(caption_side.value());
  501. auto clear = computed_style.clear();
  502. if (clear.has_value())
  503. computed_values.set_clear(clear.value());
  504. auto overflow_x = computed_style.overflow_x();
  505. if (overflow_x.has_value())
  506. computed_values.set_overflow_x(overflow_x.value());
  507. auto overflow_y = computed_style.overflow_y();
  508. if (overflow_y.has_value())
  509. computed_values.set_overflow_y(overflow_y.value());
  510. auto cursor = computed_style.cursor();
  511. if (cursor.has_value())
  512. computed_values.set_cursor(cursor.value());
  513. auto image_rendering = computed_style.image_rendering();
  514. if (image_rendering.has_value())
  515. computed_values.set_image_rendering(image_rendering.value());
  516. auto pointer_events = computed_style.pointer_events();
  517. if (pointer_events.has_value())
  518. computed_values.set_pointer_events(pointer_events.value());
  519. computed_values.set_text_decoration_line(computed_style.text_decoration_line());
  520. auto text_decoration_style = computed_style.text_decoration_style();
  521. if (text_decoration_style.has_value())
  522. computed_values.set_text_decoration_style(text_decoration_style.value());
  523. auto text_transform = computed_style.text_transform();
  524. if (text_transform.has_value())
  525. computed_values.set_text_transform(text_transform.value());
  526. if (auto list_style_type = computed_style.list_style_type(); list_style_type.has_value())
  527. computed_values.set_list_style_type(list_style_type.value());
  528. auto list_style_image = computed_style.property(CSS::PropertyID::ListStyleImage);
  529. if (list_style_image->is_abstract_image()) {
  530. m_list_style_image = list_style_image->as_abstract_image();
  531. const_cast<CSS::AbstractImageStyleValue&>(*m_list_style_image).load_any_resources(document());
  532. }
  533. if (auto list_style_position = computed_style.list_style_position(); list_style_position.has_value())
  534. computed_values.set_list_style_position(list_style_position.value());
  535. // FIXME: The default text decoration color value is `currentcolor`, but since we can't resolve that easily,
  536. // we just manually grab the value from `color`. This makes it dependent on `color` being
  537. // specified first, so it's far from ideal.
  538. computed_values.set_text_decoration_color(computed_style.color_or_fallback(CSS::PropertyID::TextDecorationColor, *this, computed_values.color()));
  539. if (auto maybe_text_decoration_thickness = computed_style.length_percentage(CSS::PropertyID::TextDecorationThickness); maybe_text_decoration_thickness.has_value())
  540. computed_values.set_text_decoration_thickness(maybe_text_decoration_thickness.release_value());
  541. computed_values.set_text_shadow(computed_style.text_shadow(*this));
  542. computed_values.set_z_index(computed_style.z_index());
  543. computed_values.set_opacity(computed_style.opacity());
  544. if (auto maybe_visibility = computed_style.visibility(); maybe_visibility.has_value())
  545. computed_values.set_visibility(maybe_visibility.release_value());
  546. computed_values.set_width(computed_style.size_value(CSS::PropertyID::Width));
  547. computed_values.set_min_width(computed_style.size_value(CSS::PropertyID::MinWidth));
  548. computed_values.set_max_width(computed_style.size_value(CSS::PropertyID::MaxWidth));
  549. computed_values.set_height(computed_style.size_value(CSS::PropertyID::Height));
  550. computed_values.set_min_height(computed_style.size_value(CSS::PropertyID::MinHeight));
  551. computed_values.set_max_height(computed_style.size_value(CSS::PropertyID::MaxHeight));
  552. computed_values.set_inset(computed_style.length_box(CSS::PropertyID::Left, CSS::PropertyID::Top, CSS::PropertyID::Right, CSS::PropertyID::Bottom, CSS::Length::make_auto()));
  553. 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)));
  554. 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)));
  555. computed_values.set_box_shadow(computed_style.box_shadow(*this));
  556. computed_values.set_transformations(computed_style.transformations());
  557. if (auto transform_box = computed_style.transform_box(); transform_box.has_value())
  558. computed_values.set_transform_box(transform_box.value());
  559. computed_values.set_transform_origin(computed_style.transform_origin());
  560. auto transition_delay_property = computed_style.property(CSS::PropertyID::TransitionDelay);
  561. if (transition_delay_property->is_time()) {
  562. auto& transition_delay = transition_delay_property->as_time();
  563. computed_values.set_transition_delay(transition_delay.time());
  564. } else if (transition_delay_property->is_calculated()) {
  565. auto& transition_delay = transition_delay_property->as_calculated();
  566. computed_values.set_transition_delay(transition_delay.resolve_time().value());
  567. }
  568. auto do_border_style = [&](CSS::BorderData& border, CSS::PropertyID width_property, CSS::PropertyID color_property, CSS::PropertyID style_property) {
  569. // FIXME: The default border color value is `currentcolor`, but since we can't resolve that easily,
  570. // we just manually grab the value from `color`. This makes it dependent on `color` being
  571. // specified first, so it's far from ideal.
  572. border.color = computed_style.color_or_fallback(color_property, *this, computed_values.color());
  573. border.line_style = computed_style.line_style(style_property).value_or(CSS::LineStyle::None);
  574. // https://w3c.github.io/csswg-drafts/css-backgrounds/#border-style
  575. // none
  576. // 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.
  577. // hidden
  578. // Same as none, but has different behavior in the border conflict resolution rules for border-collapsed tables [CSS2].
  579. if (border.line_style == CSS::LineStyle::None || border.line_style == CSS::LineStyle::Hidden) {
  580. border.width = 0;
  581. } else {
  582. auto resolve_border_width = [&]() -> CSSPixels {
  583. auto value = computed_style.property(width_property);
  584. if (value->is_calculated())
  585. return max(CSSPixels { 0 }, value->as_calculated().resolve_length(*this)->to_px(*this));
  586. if (value->is_length())
  587. return value->as_length().length().to_px(*this);
  588. if (value->is_identifier()) {
  589. // https://www.w3.org/TR/css-backgrounds-3/#valdef-line-width-thin
  590. switch (value->to_identifier()) {
  591. case CSS::ValueID::Thin:
  592. return 1;
  593. case CSS::ValueID::Medium:
  594. return 3;
  595. case CSS::ValueID::Thick:
  596. return 5;
  597. default:
  598. VERIFY_NOT_REACHED();
  599. }
  600. }
  601. VERIFY_NOT_REACHED();
  602. };
  603. border.width = snap_a_length_as_a_border_width(document().page().client().device_pixels_per_css_pixel(), resolve_border_width());
  604. }
  605. };
  606. do_border_style(computed_values.border_left(), CSS::PropertyID::BorderLeftWidth, CSS::PropertyID::BorderLeftColor, CSS::PropertyID::BorderLeftStyle);
  607. do_border_style(computed_values.border_top(), CSS::PropertyID::BorderTopWidth, CSS::PropertyID::BorderTopColor, CSS::PropertyID::BorderTopStyle);
  608. do_border_style(computed_values.border_right(), CSS::PropertyID::BorderRightWidth, CSS::PropertyID::BorderRightColor, CSS::PropertyID::BorderRightStyle);
  609. do_border_style(computed_values.border_bottom(), CSS::PropertyID::BorderBottomWidth, CSS::PropertyID::BorderBottomColor, CSS::PropertyID::BorderBottomStyle);
  610. if (auto outline_color = computed_style.property(CSS::PropertyID::OutlineColor); outline_color->has_color())
  611. computed_values.set_outline_color(outline_color->to_color(*this));
  612. if (auto outline_offset = computed_style.property(CSS::PropertyID::OutlineOffset); outline_offset->is_length())
  613. computed_values.set_outline_offset(outline_offset->as_length().length());
  614. if (auto outline_style = computed_style.outline_style(); outline_style.has_value())
  615. computed_values.set_outline_style(outline_style.value());
  616. if (auto outline_width = computed_style.property(CSS::PropertyID::OutlineWidth); outline_width->is_length())
  617. computed_values.set_outline_width(outline_width->as_length().length());
  618. // FIXME: Stop generating the content twice. (First time is in TreeBuilder.)
  619. computed_values.set_content(computed_style.content(initial_quote_nesting_level()).content_data);
  620. computed_values.set_grid_auto_columns(computed_style.grid_auto_columns());
  621. computed_values.set_grid_auto_rows(computed_style.grid_auto_rows());
  622. computed_values.set_grid_template_columns(computed_style.grid_template_columns());
  623. computed_values.set_grid_template_rows(computed_style.grid_template_rows());
  624. computed_values.set_grid_column_end(computed_style.grid_column_end());
  625. computed_values.set_grid_column_start(computed_style.grid_column_start());
  626. computed_values.set_grid_row_end(computed_style.grid_row_end());
  627. computed_values.set_grid_row_start(computed_style.grid_row_start());
  628. computed_values.set_grid_template_areas(computed_style.grid_template_areas());
  629. computed_values.set_grid_auto_flow(computed_style.grid_auto_flow());
  630. if (auto x_value = computed_style.length_percentage(CSS::PropertyID::X); x_value.has_value())
  631. computed_values.set_x(*x_value);
  632. if (auto y_value = computed_style.length_percentage(CSS::PropertyID::Y); y_value.has_value())
  633. computed_values.set_y(*y_value);
  634. auto fill = computed_style.property(CSS::PropertyID::Fill);
  635. if (fill->has_color())
  636. computed_values.set_fill(fill->to_color(*this));
  637. else if (fill->is_url())
  638. computed_values.set_fill(fill->as_url().url());
  639. auto stroke = computed_style.property(CSS::PropertyID::Stroke);
  640. if (stroke->has_color())
  641. computed_values.set_stroke(stroke->to_color(*this));
  642. else if (stroke->is_url())
  643. computed_values.set_stroke(stroke->as_url().url());
  644. if (auto stop_color = computed_style.property(CSS::PropertyID::StopColor); stop_color->has_color())
  645. computed_values.set_stop_color(stop_color->to_color(*this));
  646. auto stroke_width = computed_style.property(CSS::PropertyID::StrokeWidth);
  647. // FIXME: Converting to pixels isn't really correct - values should be in "user units"
  648. // https://svgwg.org/svg2-draft/coords.html#TermUserUnits
  649. if (stroke_width->is_number())
  650. computed_values.set_stroke_width(CSS::Length::make_px(CSSPixels::nearest_value_for(stroke_width->as_number().number())));
  651. else if (stroke_width->is_length())
  652. computed_values.set_stroke_width(stroke_width->as_length().length());
  653. else if (stroke_width->is_percentage())
  654. computed_values.set_stroke_width(CSS::LengthPercentage { stroke_width->as_percentage().percentage() });
  655. if (auto mask_type = computed_style.mask_type(); mask_type.has_value())
  656. computed_values.set_mask_type(*mask_type);
  657. if (auto mask = computed_style.property(CSS::PropertyID::Mask); mask->is_url())
  658. computed_values.set_mask(mask->as_url().url());
  659. if (auto fill_rule = computed_style.fill_rule(); fill_rule.has_value())
  660. computed_values.set_fill_rule(*fill_rule);
  661. computed_values.set_fill_opacity(computed_style.fill_opacity());
  662. computed_values.set_stroke_opacity(computed_style.stroke_opacity());
  663. computed_values.set_stop_opacity(computed_style.stop_opacity());
  664. if (auto text_anchor = computed_style.text_anchor(); text_anchor.has_value())
  665. computed_values.set_text_anchor(*text_anchor);
  666. if (auto column_count = computed_style.property(CSS::PropertyID::ColumnCount); column_count->is_integer())
  667. computed_values.set_column_count(CSS::ColumnCount::make_integer(column_count->as_integer().integer()));
  668. computed_values.set_column_gap(computed_style.size_value(CSS::PropertyID::ColumnGap));
  669. computed_values.set_row_gap(computed_style.size_value(CSS::PropertyID::RowGap));
  670. if (auto border_collapse = computed_style.border_collapse(); border_collapse.has_value())
  671. computed_values.set_border_collapse(border_collapse.value());
  672. if (auto table_layout = computed_style.table_layout(); table_layout.has_value())
  673. computed_values.set_table_layout(table_layout.value());
  674. auto aspect_ratio = computed_style.property(CSS::PropertyID::AspectRatio);
  675. if (aspect_ratio->is_value_list()) {
  676. auto& values_list = aspect_ratio->as_value_list().values();
  677. if (values_list.size() == 2
  678. && values_list[0]->is_identifier() && values_list[0]->as_identifier().id() == CSS::ValueID::Auto
  679. && values_list[1]->is_ratio()) {
  680. computed_values.set_aspect_ratio({ true, values_list[1]->as_ratio().ratio() });
  681. }
  682. } else if (aspect_ratio->is_identifier() && aspect_ratio->as_identifier().id() == CSS::ValueID::Auto) {
  683. computed_values.set_aspect_ratio({ true, {} });
  684. } else if (aspect_ratio->is_ratio()) {
  685. computed_values.set_aspect_ratio({ false, aspect_ratio->as_ratio().ratio() });
  686. }
  687. auto math_shift_value = computed_style.property(CSS::PropertyID::MathShift);
  688. if (auto math_shift = value_id_to_math_shift(math_shift_value->to_identifier()); math_shift.has_value())
  689. computed_values.set_math_shift(math_shift.value());
  690. auto math_style_value = computed_style.property(CSS::PropertyID::MathStyle);
  691. if (auto math_style = value_id_to_math_style(math_style_value->to_identifier()); math_style.has_value())
  692. computed_values.set_math_style(math_style.value());
  693. computed_values.set_math_depth(computed_style.math_depth());
  694. computed_values.set_quotes(computed_style.quotes());
  695. if (auto object_fit = computed_style.object_fit(); object_fit.has_value())
  696. computed_values.set_object_fit(object_fit.value());
  697. computed_values.set_object_position(computed_style.object_position());
  698. if (auto scrollbar_width = computed_style.scrollbar_width(); scrollbar_width.has_value())
  699. computed_values.set_scrollbar_width(scrollbar_width.value());
  700. propagate_style_to_anonymous_wrappers();
  701. }
  702. void NodeWithStyle::propagate_style_to_anonymous_wrappers()
  703. {
  704. // Update the style of any anonymous wrappers that inherit from this node.
  705. // FIXME: This is pretty hackish. It would be nicer if they shared the inherited style
  706. // data structure somehow, so this wasn't necessary.
  707. // If this is a `display:table` box with an anonymous wrapper parent,
  708. // the parent inherits style from *this* node, not the other way around.
  709. if (display().is_table_inside() && is<TableWrapper>(parent())) {
  710. auto& table_wrapper = *static_cast<TableWrapper*>(parent());
  711. static_cast<CSS::MutableComputedValues&>(static_cast<CSS::ComputedValues&>(const_cast<CSS::ImmutableComputedValues&>(table_wrapper.computed_values()))).inherit_from(computed_values());
  712. transfer_table_box_computed_values_to_wrapper_computed_values(table_wrapper.mutable_computed_values());
  713. }
  714. // Propagate style to all anonymous children (except table wrappers!)
  715. for_each_child_of_type<NodeWithStyle>([&](NodeWithStyle& child) {
  716. if (child.is_anonymous() && !is<TableWrapper>(child)) {
  717. auto& child_computed_values = static_cast<CSS::MutableComputedValues&>(static_cast<CSS::ComputedValues&>(const_cast<CSS::ImmutableComputedValues&>(child.computed_values())));
  718. child_computed_values.inherit_from(computed_values());
  719. }
  720. });
  721. }
  722. bool Node::is_root_element() const
  723. {
  724. if (is_anonymous())
  725. return false;
  726. return is<HTML::HTMLHtmlElement>(*dom_node());
  727. }
  728. ByteString Node::debug_description() const
  729. {
  730. StringBuilder builder;
  731. builder.append(class_name());
  732. if (dom_node()) {
  733. builder.appendff("<{}>", dom_node()->node_name());
  734. if (dom_node()->is_element()) {
  735. auto& element = static_cast<DOM::Element const&>(*dom_node());
  736. if (element.id().has_value())
  737. builder.appendff("#{}", element.id().value());
  738. for (auto const& class_name : element.class_names())
  739. builder.appendff(".{}", class_name);
  740. }
  741. } else {
  742. builder.append("(anonymous)"sv);
  743. }
  744. return builder.to_byte_string();
  745. }
  746. CSS::Display Node::display() const
  747. {
  748. if (!has_style()) {
  749. // NOTE: No style means this is dumb text content.
  750. return CSS::Display(CSS::DisplayOutside::Inline, CSS::DisplayInside::Flow);
  751. }
  752. return computed_values().display();
  753. }
  754. bool Node::is_inline() const
  755. {
  756. return display().is_inline_outside();
  757. }
  758. bool Node::is_inline_block() const
  759. {
  760. auto display = this->display();
  761. return display.is_inline_outside() && display.is_flow_root_inside();
  762. }
  763. bool Node::is_inline_table() const
  764. {
  765. auto display = this->display();
  766. return display.is_inline_outside() && display.is_table_inside();
  767. }
  768. JS::NonnullGCPtr<NodeWithStyle> NodeWithStyle::create_anonymous_wrapper() const
  769. {
  770. auto wrapper = heap().allocate_without_realm<BlockContainer>(const_cast<DOM::Document&>(document()), nullptr, computed_values().clone_inherited_values());
  771. wrapper->mutable_computed_values().set_display(CSS::Display(CSS::DisplayOutside::Block, CSS::DisplayInside::Flow));
  772. return *wrapper;
  773. }
  774. void NodeWithStyle::reset_table_box_computed_values_used_by_wrapper_to_init_values()
  775. {
  776. VERIFY(this->display().is_table_inside());
  777. auto& mutable_computed_values = this->mutable_computed_values();
  778. mutable_computed_values.set_position(CSS::InitialValues::position());
  779. mutable_computed_values.set_float(CSS::InitialValues::float_());
  780. mutable_computed_values.set_clear(CSS::InitialValues::clear());
  781. mutable_computed_values.set_inset(CSS::InitialValues::inset());
  782. mutable_computed_values.set_margin(CSS::InitialValues::margin());
  783. }
  784. void NodeWithStyle::transfer_table_box_computed_values_to_wrapper_computed_values(CSS::ComputedValues& wrapper_computed_values)
  785. {
  786. // 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;
  787. // all other values of non-inheritable properties are used on the table box and not the table wrapper box.
  788. // (Where the table element's values are not used on the table and table wrapper boxes, the initial values are used instead.)
  789. auto& mutable_wrapper_computed_values = static_cast<CSS::MutableComputedValues&>(wrapper_computed_values);
  790. if (display().is_inline_outside())
  791. mutable_wrapper_computed_values.set_display(CSS::Display::from_short(CSS::Display::Short::InlineBlock));
  792. else
  793. mutable_wrapper_computed_values.set_display(CSS::Display::from_short(CSS::Display::Short::FlowRoot));
  794. mutable_wrapper_computed_values.set_position(computed_values().position());
  795. mutable_wrapper_computed_values.set_inset(computed_values().inset());
  796. mutable_wrapper_computed_values.set_float(computed_values().float_());
  797. mutable_wrapper_computed_values.set_clear(computed_values().clear());
  798. mutable_wrapper_computed_values.set_margin(computed_values().margin());
  799. reset_table_box_computed_values_used_by_wrapper_to_init_values();
  800. }
  801. void Node::set_paintable(JS::GCPtr<Painting::Paintable> paintable)
  802. {
  803. m_paintable = move(paintable);
  804. }
  805. JS::GCPtr<Painting::Paintable> Node::create_paintable() const
  806. {
  807. return nullptr;
  808. }
  809. bool Node::is_anonymous() const
  810. {
  811. return m_anonymous;
  812. }
  813. DOM::Node const* Node::dom_node() const
  814. {
  815. if (m_anonymous)
  816. return nullptr;
  817. return m_dom_node.ptr();
  818. }
  819. DOM::Node* Node::dom_node()
  820. {
  821. if (m_anonymous)
  822. return nullptr;
  823. return m_dom_node.ptr();
  824. }
  825. DOM::Element const* Node::pseudo_element_generator() const
  826. {
  827. VERIFY(m_generated_for != GeneratedFor::NotGenerated);
  828. return m_pseudo_element_generator.ptr();
  829. }
  830. DOM::Element* Node::pseudo_element_generator()
  831. {
  832. VERIFY(m_generated_for != GeneratedFor::NotGenerated);
  833. return m_pseudo_element_generator.ptr();
  834. }
  835. DOM::Document& Node::document()
  836. {
  837. return m_dom_node->document();
  838. }
  839. DOM::Document const& Node::document() const
  840. {
  841. return m_dom_node->document();
  842. }
  843. }