jcs.org
Serenity Operating System
1/*
2 * Copyright (c) 2018-2023, Andreas Kling <kling@serenityos.org>
3 *
4 * SPDX-License-Identifier: BSD-2-Clause
5 */
6
7#include <AK/Demangle.h>
8#include <LibWeb/DOM/Document.h>
9#include <LibWeb/Dump.h>
10#include <LibWeb/HTML/BrowsingContext.h>
11#include <LibWeb/HTML/HTMLHtmlElement.h>
12#include <LibWeb/Layout/BlockContainer.h>
13#include <LibWeb/Layout/FormattingContext.h>
14#include <LibWeb/Layout/Node.h>
15#include <LibWeb/Layout/TableBox.h>
16#include <LibWeb/Layout/TextNode.h>
17#include <LibWeb/Layout/Viewport.h>
18#include <LibWeb/Platform/FontPlugin.h>
19
20namespace Web::Layout {
21
22Node::Node(DOM::Document& document, DOM::Node* node)
23 : m_dom_node(node ? *node : document)
24 , m_browsing_context(*document.browsing_context())
25 , m_anonymous(node == nullptr)
26{
27 m_serial_id = document.next_layout_node_serial_id({});
28
29 if (node)
30 node->set_layout_node({}, *this);
31}
32
33Node::~Node() = default;
34
35void Node::visit_edges(Cell::Visitor& visitor)
36{
37 Base::visit_edges(visitor);
38 visitor.visit(m_dom_node);
39 visitor.visit(m_paintable);
40 visitor.visit(m_browsing_context);
41 TreeNode::visit_edges(visitor);
42}
43
44// https://www.w3.org/TR/css-display-3/#out-of-flow
45bool Node::is_out_of_flow(FormattingContext const& formatting_context) const
46{
47 // A layout node is out of flow if either:
48
49 // 1. It is floated (which requires that floating is not inhibited).
50 if (!formatting_context.inhibits_floating() && computed_values().float_() != CSS::Float::None)
51 return true;
52
53 // 2. It is "absolutely positioned".
54 if (is_absolutely_positioned())
55 return true;
56
57 return false;
58}
59
60bool Node::can_contain_boxes_with_position_absolute() const
61{
62 if (computed_values().position() != CSS::Position::Static)
63 return true;
64
65 if (is<Viewport>(*this))
66 return true;
67
68 // https://w3c.github.io/csswg-drafts/css-transforms-1/#propdef-transform
69 // Any computed value other than none for the transform affects containing block and stacking context
70 if (!computed_values().transformations().is_empty())
71 return true;
72
73 return false;
74}
75
76static Box const* nearest_ancestor_capable_of_forming_a_containing_block(Node const& node)
77{
78 for (auto const* ancestor = node.parent(); ancestor; ancestor = ancestor->parent()) {
79 if (ancestor->is_block_container()
80 || ancestor->display().is_flex_inside()
81 || ancestor->display().is_grid_inside()) {
82 return verify_cast<Box>(ancestor);
83 }
84 }
85 return nullptr;
86}
87
88Box const* Node::containing_block() const
89{
90 if (is<TextNode>(*this))
91 return nearest_ancestor_capable_of_forming_a_containing_block(*this);
92
93 auto position = computed_values().position();
94
95 // https://drafts.csswg.org/css-position-3/#absolute-cb
96 if (position == CSS::Position::Absolute) {
97 auto const* ancestor = parent();
98 while (ancestor && !ancestor->can_contain_boxes_with_position_absolute())
99 ancestor = ancestor->parent();
100 while (ancestor && ancestor->is_anonymous())
101 ancestor = nearest_ancestor_capable_of_forming_a_containing_block(*ancestor);
102 return static_cast<Box const*>(ancestor);
103 }
104
105 if (position == CSS::Position::Fixed)
106 return &root();
107
108 return nearest_ancestor_capable_of_forming_a_containing_block(*this);
109}
110
111// https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context
112bool Node::establishes_stacking_context() const
113{
114 // NOTE: While MDN is not authoritative, there isn't a single convenient location
115 // in the CSS specifications where the rules for stacking contexts is described.
116 // That's why the "spec link" here points to MDN.
117
118 if (!has_style())
119 return false;
120 if (is_root_element() || dom_node() == &document().root())
121 return true;
122 auto position = computed_values().position();
123
124 // Element with a position value absolute or relative and z-index value other than auto.
125 if (position == CSS::Position::Absolute || position == CSS::Position::Relative) {
126 if (computed_values().z_index().has_value()) {
127 return true;
128 }
129 }
130
131 // Element with a position value fixed or sticky.
132 if (position == CSS::Position::Fixed || position == CSS::Position::Sticky)
133 return true;
134
135 if (!computed_values().transformations().is_empty())
136 return true;
137
138 // Element that is a child of a flex container, with z-index value other than auto.
139 if (parent() && parent()->display().is_flex_inside() && computed_values().z_index().has_value())
140 return true;
141
142 // Element that is a child of a grid container, with z-index value other than auto.
143 if (parent() && parent()->display().is_grid_inside() && computed_values().z_index().has_value())
144 return true;
145
146 // https://drafts.fxtf.org/filter-effects-2/#backdrop-filter-operation
147 // 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,
148 // unless the element it applies to is a document root element in the current browsing context.
149 // Spec Note: This rule works in the same way as for the filter property.
150 if (!computed_values().backdrop_filter().is_none())
151 return true;
152
153 return computed_values().opacity() < 1.0f;
154}
155
156HTML::BrowsingContext const& Node::browsing_context() const
157{
158 return *m_browsing_context;
159}
160
161HTML::BrowsingContext& Node::browsing_context()
162{
163 return *m_browsing_context;
164}
165
166Viewport const& Node::root() const
167{
168 VERIFY(document().layout_node());
169 return *document().layout_node();
170}
171
172Viewport& Node::root()
173{
174 VERIFY(document().layout_node());
175 return *document().layout_node();
176}
177
178void Node::set_needs_display()
179{
180 auto* containing_block = this->containing_block();
181 if (!containing_block)
182 return;
183 if (!containing_block->paint_box())
184 return;
185 if (!is<Painting::PaintableWithLines>(*containing_block->paint_box()))
186 return;
187 static_cast<Painting::PaintableWithLines const&>(*containing_block->paint_box()).for_each_fragment([&](auto& fragment) {
188 if (&fragment.layout_node() == this || is_ancestor_of(fragment.layout_node())) {
189 browsing_context().set_needs_display(fragment.absolute_rect());
190 }
191 return IterationDecision::Continue;
192 });
193}
194
195CSSPixelPoint Node::box_type_agnostic_position() const
196{
197 if (is<Box>(*this))
198 return verify_cast<Box>(*this).paint_box()->absolute_position();
199 VERIFY(is_inline());
200 CSSPixelPoint position;
201 if (auto* block = containing_block()) {
202 if (is<Painting::PaintableWithLines>(*block)) {
203 static_cast<Painting::PaintableWithLines const&>(*block->paint_box()).for_each_fragment([&](auto& fragment) {
204 if (&fragment.layout_node() == this || is_ancestor_of(fragment.layout_node())) {
205 position = fragment.absolute_rect().location();
206 return IterationDecision::Break;
207 }
208 return IterationDecision::Continue;
209 });
210 }
211 }
212 return position;
213}
214
215bool Node::is_floating() const
216{
217 if (!has_style())
218 return false;
219 // flex-items don't float.
220 if (is_flex_item())
221 return false;
222 return computed_values().float_() != CSS::Float::None;
223}
224
225bool Node::is_positioned() const
226{
227 return has_style() && computed_values().position() != CSS::Position::Static;
228}
229
230bool Node::is_absolutely_positioned() const
231{
232 if (!has_style())
233 return false;
234 auto position = computed_values().position();
235 return position == CSS::Position::Absolute || position == CSS::Position::Fixed;
236}
237
238bool Node::is_fixed_position() const
239{
240 if (!has_style())
241 return false;
242 auto position = computed_values().position();
243 return position == CSS::Position::Fixed;
244}
245
246NodeWithStyle::NodeWithStyle(DOM::Document& document, DOM::Node* node, NonnullRefPtr<CSS::StyleProperties> computed_style)
247 : Node(document, node)
248{
249 m_has_style = true;
250 apply_style(*computed_style);
251}
252
253NodeWithStyle::NodeWithStyle(DOM::Document& document, DOM::Node* node, CSS::ComputedValues computed_values)
254 : Node(document, node)
255 , m_computed_values(move(computed_values))
256{
257 m_has_style = true;
258 m_font = Platform::FontPlugin::the().default_font();
259}
260
261void NodeWithStyle::apply_style(const CSS::StyleProperties& computed_style)
262{
263 auto& computed_values = static_cast<CSS::MutableComputedValues&>(m_computed_values);
264
265 // NOTE: color must be set first to ensure currentColor can be resolved in other properties (e.g. background-color).
266 computed_values.set_color(computed_style.color_or_fallback(CSS::PropertyID::Color, *this, CSS::InitialValues::color()));
267
268 // NOTE: We have to be careful that font-related properties get set in the right order.
269 // m_font is used by Length::to_px() when resolving sizes against this layout node.
270 // That's why it has to be set before everything else.
271 m_font = computed_style.computed_font();
272 computed_values.set_font_size(computed_style.property(CSS::PropertyID::FontSize)->to_length().to_px(*this).value());
273 computed_values.set_font_weight(computed_style.property(CSS::PropertyID::FontWeight)->to_integer());
274 m_line_height = computed_style.line_height(*this);
275
276 computed_values.set_vertical_align(computed_style.vertical_align());
277
278 {
279 auto attachments = computed_style.property(CSS::PropertyID::BackgroundAttachment);
280 auto clips = computed_style.property(CSS::PropertyID::BackgroundClip);
281 auto images = computed_style.property(CSS::PropertyID::BackgroundImage);
282 auto origins = computed_style.property(CSS::PropertyID::BackgroundOrigin);
283 auto positions = computed_style.property(CSS::PropertyID::BackgroundPosition);
284 auto repeats = computed_style.property(CSS::PropertyID::BackgroundRepeat);
285 auto sizes = computed_style.property(CSS::PropertyID::BackgroundSize);
286
287 auto count_layers = [](auto maybe_style_value) -> size_t {
288 if (maybe_style_value->is_value_list())
289 return maybe_style_value->as_value_list().size();
290 else
291 return 1;
292 };
293
294 auto value_for_layer = [](auto& style_value, size_t layer_index) -> RefPtr<CSS::StyleValue const> {
295 if (style_value->is_value_list())
296 return style_value->as_value_list().value_at(layer_index, true);
297 return style_value;
298 };
299
300 size_t layer_count = 1;
301 layer_count = max(layer_count, count_layers(attachments));
302 layer_count = max(layer_count, count_layers(clips));
303 layer_count = max(layer_count, count_layers(images));
304 layer_count = max(layer_count, count_layers(origins));
305 layer_count = max(layer_count, count_layers(positions));
306 layer_count = max(layer_count, count_layers(repeats));
307 layer_count = max(layer_count, count_layers(sizes));
308
309 Vector<CSS::BackgroundLayerData> layers;
310 layers.ensure_capacity(layer_count);
311
312 for (size_t layer_index = 0; layer_index < layer_count; layer_index++) {
313 CSS::BackgroundLayerData layer;
314
315 if (auto image_value = value_for_layer(images, layer_index); image_value) {
316 if (image_value->is_abstract_image()) {
317 layer.background_image = image_value->as_abstract_image();
318 const_cast<CSS::AbstractImageStyleValue&>(*layer.background_image).load_any_resources(document());
319 }
320 }
321
322 if (auto attachment_value = value_for_layer(attachments, layer_index); attachment_value && attachment_value->has_identifier()) {
323 switch (attachment_value->to_identifier()) {
324 case CSS::ValueID::Fixed:
325 layer.attachment = CSS::BackgroundAttachment::Fixed;
326 break;
327 case CSS::ValueID::Local:
328 layer.attachment = CSS::BackgroundAttachment::Local;
329 break;
330 case CSS::ValueID::Scroll:
331 layer.attachment = CSS::BackgroundAttachment::Scroll;
332 break;
333 default:
334 break;
335 }
336 }
337
338 auto as_box = [](auto value_id) {
339 switch (value_id) {
340 case CSS::ValueID::BorderBox:
341 return CSS::BackgroundBox::BorderBox;
342 case CSS::ValueID::ContentBox:
343 return CSS::BackgroundBox::ContentBox;
344 case CSS::ValueID::PaddingBox:
345 return CSS::BackgroundBox::PaddingBox;
346 default:
347 VERIFY_NOT_REACHED();
348 }
349 };
350
351 if (auto origin_value = value_for_layer(origins, layer_index); origin_value && origin_value->has_identifier()) {
352 layer.origin = as_box(origin_value->to_identifier());
353 }
354
355 if (auto clip_value = value_for_layer(clips, layer_index); clip_value && clip_value->has_identifier()) {
356 layer.clip = as_box(clip_value->to_identifier());
357 }
358
359 if (auto position_value = value_for_layer(positions, layer_index); position_value && position_value->is_position()) {
360 auto& position = position_value->as_position();
361 layer.position_edge_x = position.edge_x();
362 layer.position_edge_y = position.edge_y();
363 layer.position_offset_x = position.offset_x();
364 layer.position_offset_y = position.offset_y();
365 }
366
367 if (auto size_value = value_for_layer(sizes, layer_index); size_value) {
368 if (size_value->is_background_size()) {
369 auto& size = size_value->as_background_size();
370 layer.size_type = CSS::BackgroundSize::LengthPercentage;
371 layer.size_x = size.size_x();
372 layer.size_y = size.size_y();
373 } else if (size_value->has_identifier()) {
374 switch (size_value->to_identifier()) {
375 case CSS::ValueID::Contain:
376 layer.size_type = CSS::BackgroundSize::Contain;
377 break;
378 case CSS::ValueID::Cover:
379 layer.size_type = CSS::BackgroundSize::Cover;
380 break;
381 default:
382 break;
383 }
384 }
385 }
386
387 if (auto repeat_value = value_for_layer(repeats, layer_index); repeat_value && repeat_value->is_background_repeat()) {
388 layer.repeat_x = repeat_value->as_background_repeat().repeat_x();
389 layer.repeat_y = repeat_value->as_background_repeat().repeat_y();
390 }
391
392 layers.append(move(layer));
393 }
394
395 computed_values.set_background_layers(move(layers));
396 }
397 computed_values.set_background_color(computed_style.color_or_fallback(CSS::PropertyID::BackgroundColor, *this, CSS::InitialValues::background_color()));
398
399 if (auto box_sizing = computed_style.box_sizing(); box_sizing.has_value())
400 computed_values.set_box_sizing(box_sizing.release_value());
401
402 if (auto maybe_font_variant = computed_style.font_variant(); maybe_font_variant.has_value())
403 computed_values.set_font_variant(maybe_font_variant.release_value());
404
405 // FIXME: BorderXRadius properties are now BorderRadiusStyleValues, so make use of that.
406 auto border_bottom_left_radius = computed_style.property(CSS::PropertyID::BorderBottomLeftRadius);
407 if (border_bottom_left_radius->is_border_radius()) {
408 computed_values.set_border_bottom_left_radius(
409 CSS::BorderRadiusData {
410 border_bottom_left_radius->as_border_radius().horizontal_radius(),
411 border_bottom_left_radius->as_border_radius().vertical_radius() });
412 }
413 auto border_bottom_right_radius = computed_style.property(CSS::PropertyID::BorderBottomRightRadius);
414 if (border_bottom_right_radius->is_border_radius()) {
415 computed_values.set_border_bottom_right_radius(
416 CSS::BorderRadiusData {
417 border_bottom_right_radius->as_border_radius().horizontal_radius(),
418 border_bottom_right_radius->as_border_radius().vertical_radius() });
419 }
420 auto border_top_left_radius = computed_style.property(CSS::PropertyID::BorderTopLeftRadius);
421 if (border_top_left_radius->is_border_radius()) {
422 computed_values.set_border_top_left_radius(
423 CSS::BorderRadiusData {
424 border_top_left_radius->as_border_radius().horizontal_radius(),
425 border_top_left_radius->as_border_radius().vertical_radius() });
426 }
427 auto border_top_right_radius = computed_style.property(CSS::PropertyID::BorderTopRightRadius);
428 if (border_top_right_radius->is_border_radius()) {
429 computed_values.set_border_top_right_radius(
430 CSS::BorderRadiusData {
431 border_top_right_radius->as_border_radius().horizontal_radius(),
432 border_top_right_radius->as_border_radius().vertical_radius() });
433 }
434 computed_values.set_display(computed_style.display());
435
436 auto flex_direction = computed_style.flex_direction();
437 if (flex_direction.has_value())
438 computed_values.set_flex_direction(flex_direction.value());
439
440 auto flex_wrap = computed_style.flex_wrap();
441 if (flex_wrap.has_value())
442 computed_values.set_flex_wrap(flex_wrap.value());
443
444 auto flex_basis = computed_style.flex_basis();
445 if (flex_basis.has_value())
446 computed_values.set_flex_basis(flex_basis.value());
447
448 computed_values.set_flex_grow(computed_style.flex_grow());
449 computed_values.set_flex_shrink(computed_style.flex_shrink());
450 computed_values.set_order(computed_style.order());
451 computed_values.set_clip(computed_style.clip());
452 computed_values.set_backdrop_filter(computed_style.backdrop_filter());
453
454 auto justify_content = computed_style.justify_content();
455 if (justify_content.has_value())
456 computed_values.set_justify_content(justify_content.value());
457
458 auto align_content = computed_style.align_content();
459 if (align_content.has_value())
460 computed_values.set_align_content(align_content.value());
461
462 auto align_items = computed_style.align_items();
463 if (align_items.has_value())
464 computed_values.set_align_items(align_items.value());
465
466 auto align_self = computed_style.align_self();
467 if (align_self.has_value())
468 computed_values.set_align_self(align_self.value());
469
470 auto appearance = computed_style.appearance();
471 if (appearance.has_value())
472 computed_values.set_appearance(appearance.value());
473
474 auto position = computed_style.position();
475 if (position.has_value())
476 computed_values.set_position(position.value());
477
478 auto text_align = computed_style.text_align();
479 if (text_align.has_value())
480 computed_values.set_text_align(text_align.value());
481
482 auto text_justify = computed_style.text_justify();
483 if (text_align.has_value())
484 computed_values.set_text_justify(text_justify.value());
485
486 auto white_space = computed_style.white_space();
487 if (white_space.has_value())
488 computed_values.set_white_space(white_space.value());
489
490 auto float_ = computed_style.float_();
491 if (float_.has_value())
492 computed_values.set_float(float_.value());
493
494 auto clear = computed_style.clear();
495 if (clear.has_value())
496 computed_values.set_clear(clear.value());
497
498 auto overflow_x = computed_style.overflow_x();
499 if (overflow_x.has_value())
500 computed_values.set_overflow_x(overflow_x.value());
501
502 auto overflow_y = computed_style.overflow_y();
503 if (overflow_y.has_value())
504 computed_values.set_overflow_y(overflow_y.value());
505
506 auto cursor = computed_style.cursor();
507 if (cursor.has_value())
508 computed_values.set_cursor(cursor.value());
509
510 auto image_rendering = computed_style.image_rendering();
511 if (image_rendering.has_value())
512 computed_values.set_image_rendering(image_rendering.value());
513
514 auto pointer_events = computed_style.pointer_events();
515 if (pointer_events.has_value())
516 computed_values.set_pointer_events(pointer_events.value());
517
518 computed_values.set_text_decoration_line(computed_style.text_decoration_line());
519
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
524 auto text_transform = computed_style.text_transform();
525 if (text_transform.has_value())
526 computed_values.set_text_transform(text_transform.value());
527
528 if (auto list_style_type = computed_style.list_style_type(); list_style_type.has_value())
529 computed_values.set_list_style_type(list_style_type.value());
530
531 auto list_style_image = computed_style.property(CSS::PropertyID::ListStyleImage);
532 if (list_style_image->is_abstract_image()) {
533 m_list_style_image = list_style_image->as_abstract_image();
534 const_cast<CSS::AbstractImageStyleValue&>(*m_list_style_image).load_any_resources(document());
535 }
536
537 // FIXME: The default text decoration color value is `currentcolor`, but since we can't resolve that easily,
538 // we just manually grab the value from `color`. This makes it dependent on `color` being
539 // specified first, so it's far from ideal.
540 computed_values.set_text_decoration_color(computed_style.color_or_fallback(CSS::PropertyID::TextDecorationColor, *this, computed_values.color()));
541 if (auto maybe_text_decoration_thickness = computed_style.length_percentage(CSS::PropertyID::TextDecorationThickness); maybe_text_decoration_thickness.has_value())
542 computed_values.set_text_decoration_thickness(maybe_text_decoration_thickness.release_value());
543
544 computed_values.set_text_shadow(computed_style.text_shadow());
545
546 computed_values.set_z_index(computed_style.z_index());
547 computed_values.set_opacity(computed_style.opacity());
548
549 if (auto maybe_visibility = computed_style.visibility(); maybe_visibility.has_value())
550 computed_values.set_visibility(maybe_visibility.release_value());
551
552 m_visible = computed_values.opacity() != 0 && computed_values.visibility() == CSS::Visibility::Visible;
553
554 computed_values.set_width(computed_style.size_value(CSS::PropertyID::Width));
555 computed_values.set_min_width(computed_style.size_value(CSS::PropertyID::MinWidth));
556 computed_values.set_max_width(computed_style.size_value(CSS::PropertyID::MaxWidth));
557
558 computed_values.set_height(computed_style.size_value(CSS::PropertyID::Height));
559 computed_values.set_min_height(computed_style.size_value(CSS::PropertyID::MinHeight));
560 computed_values.set_max_height(computed_style.size_value(CSS::PropertyID::MaxHeight));
561
562 computed_values.set_inset(computed_style.length_box(CSS::PropertyID::Left, CSS::PropertyID::Top, CSS::PropertyID::Right, CSS::PropertyID::Bottom, CSS::Length::make_auto()));
563 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)));
564 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)));
565
566 computed_values.set_box_shadow(computed_style.box_shadow());
567
568 computed_values.set_transformations(computed_style.transformations());
569 computed_values.set_transform_origin(computed_style.transform_origin());
570
571 auto do_border_style = [&](CSS::BorderData& border, CSS::PropertyID width_property, CSS::PropertyID color_property, CSS::PropertyID style_property) {
572 // FIXME: The default border color value is `currentcolor`, but since we can't resolve that easily,
573 // we just manually grab the value from `color`. This makes it dependent on `color` being
574 // specified first, so it's far from ideal.
575 border.color = computed_style.color_or_fallback(color_property, *this, computed_values.color());
576 border.line_style = computed_style.line_style(style_property).value_or(CSS::LineStyle::None);
577
578 // https://w3c.github.io/csswg-drafts/css-backgrounds/#border-style
579 // none
580 // 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.
581 // hidden
582 // Same as none, but has different behavior in the border conflict resolution rules for border-collapsed tables [CSS2].
583 if (border.line_style == CSS::LineStyle::None || border.line_style == CSS::LineStyle::Hidden) {
584 border.width = 0;
585 } else {
586 auto resolve_border_width = [&]() {
587 auto value = computed_style.property(width_property);
588 if (value->is_calculated())
589 return CSS::Length::make_calculated(const_cast<CSS::CalculatedStyleValue&>(value->as_calculated())).to_px(*this).value();
590 if (value->has_length())
591 return value->to_length().to_px(*this).value();
592 if (value->is_identifier()) {
593 // https://www.w3.org/TR/css-backgrounds-3/#valdef-line-width-thin
594 switch (value->to_identifier()) {
595 case CSS::ValueID::Thin:
596 return 1.0f;
597 case CSS::ValueID::Medium:
598 return 3.0f;
599 case CSS::ValueID::Thick:
600 return 5.0f;
601 default:
602 VERIFY_NOT_REACHED();
603 }
604 }
605 VERIFY_NOT_REACHED();
606 };
607
608 border.width = resolve_border_width();
609 }
610 };
611
612 do_border_style(computed_values.border_left(), CSS::PropertyID::BorderLeftWidth, CSS::PropertyID::BorderLeftColor, CSS::PropertyID::BorderLeftStyle);
613 do_border_style(computed_values.border_top(), CSS::PropertyID::BorderTopWidth, CSS::PropertyID::BorderTopColor, CSS::PropertyID::BorderTopStyle);
614 do_border_style(computed_values.border_right(), CSS::PropertyID::BorderRightWidth, CSS::PropertyID::BorderRightColor, CSS::PropertyID::BorderRightStyle);
615 do_border_style(computed_values.border_bottom(), CSS::PropertyID::BorderBottomWidth, CSS::PropertyID::BorderBottomColor, CSS::PropertyID::BorderBottomStyle);
616
617 computed_values.set_content(computed_style.content());
618 computed_values.set_grid_template_columns(computed_style.grid_template_columns());
619 computed_values.set_grid_template_rows(computed_style.grid_template_rows());
620 computed_values.set_grid_column_end(computed_style.grid_column_end());
621 computed_values.set_grid_column_start(computed_style.grid_column_start());
622 computed_values.set_grid_row_end(computed_style.grid_row_end());
623 computed_values.set_grid_row_start(computed_style.grid_row_start());
624 computed_values.set_grid_template_areas(computed_style.grid_template_areas());
625
626 if (auto fill = computed_style.property(CSS::PropertyID::Fill); fill->has_color())
627 computed_values.set_fill(fill->to_color(*this));
628 if (auto stroke = computed_style.property(CSS::PropertyID::Stroke); stroke->has_color())
629 computed_values.set_stroke(stroke->to_color(*this));
630 auto stroke_width = computed_style.property(CSS::PropertyID::StrokeWidth);
631 // FIXME: Converting to pixels isn't really correct - values should be in "user units"
632 // https://svgwg.org/svg2-draft/coords.html#TermUserUnits
633 if (stroke_width->is_numeric())
634 computed_values.set_stroke_width(CSS::Length::make_px(stroke_width->to_number()));
635 else
636 computed_values.set_stroke_width(stroke_width->to_length());
637
638 computed_values.set_column_gap(computed_style.size_value(CSS::PropertyID::ColumnGap));
639 computed_values.set_row_gap(computed_style.size_value(CSS::PropertyID::RowGap));
640
641 if (auto border_collapse = computed_style.border_collapse(); border_collapse.has_value())
642 computed_values.set_border_collapse(border_collapse.value());
643}
644
645bool Node::is_root_element() const
646{
647 if (is_anonymous())
648 return false;
649 return is<HTML::HTMLHtmlElement>(*dom_node());
650}
651
652DeprecatedString Node::debug_description() const
653{
654 StringBuilder builder;
655 builder.append(class_name());
656 if (dom_node()) {
657 builder.appendff("<{}>", dom_node()->node_name());
658 if (dom_node()->is_element()) {
659 auto& element = static_cast<DOM::Element const&>(*dom_node());
660 if (auto id = element.get_attribute(HTML::AttributeNames::id); !id.is_null())
661 builder.appendff("#{}", id);
662 for (auto const& class_name : element.class_names())
663 builder.appendff(".{}", class_name);
664 }
665 } else {
666 builder.append("(anonymous)"sv);
667 }
668 return builder.to_deprecated_string();
669}
670
671CSS::Display Node::display() const
672{
673 if (!has_style()) {
674 // NOTE: No style means this is dumb text content.
675 return CSS::Display(CSS::Display::Outside::Inline, CSS::Display::Inside::Flow);
676 }
677
678 return computed_values().display();
679}
680
681bool Node::is_inline() const
682{
683 return display().is_inline_outside();
684}
685
686bool Node::is_inline_block() const
687{
688 auto display = this->display();
689 return display.is_inline_outside() && display.is_flow_root_inside();
690}
691
692bool Node::is_inline_table() const
693{
694 auto display = this->display();
695 return display.is_inline_outside() && display.is_table_inside();
696}
697
698JS::NonnullGCPtr<NodeWithStyle> NodeWithStyle::create_anonymous_wrapper() const
699{
700 auto wrapper = heap().allocate_without_realm<BlockContainer>(const_cast<DOM::Document&>(document()), nullptr, m_computed_values.clone_inherited_values());
701 static_cast<CSS::MutableComputedValues&>(wrapper->m_computed_values).set_display(CSS::Display(CSS::Display::Outside::Block, CSS::Display::Inside::Flow));
702 wrapper->m_font = m_font;
703 wrapper->m_line_height = m_line_height;
704 return *wrapper;
705}
706
707void NodeWithStyle::reset_table_box_computed_values_used_by_wrapper_to_init_values()
708{
709 VERIFY(is<TableBox>(*this));
710
711 CSS::MutableComputedValues& mutable_computed_values = static_cast<CSS::MutableComputedValues&>(m_computed_values);
712 mutable_computed_values.set_position(CSS::Position::Static);
713 mutable_computed_values.set_float(CSS::Float::None);
714 mutable_computed_values.set_clear(CSS::Clear::None);
715 mutable_computed_values.set_inset({ CSS::Length::make_auto(), CSS::Length::make_auto(), CSS::Length::make_auto(), CSS::Length::make_auto() });
716 mutable_computed_values.set_margin({ CSS::Length::make_px(0), CSS::Length::make_px(0), CSS::Length::make_px(0), CSS::Length::make_px(0) });
717}
718
719void Node::set_paintable(JS::GCPtr<Painting::Paintable> paintable)
720{
721 m_paintable = move(paintable);
722}
723
724JS::GCPtr<Painting::Paintable> Node::create_paintable() const
725{
726 return nullptr;
727}
728
729bool Node::is_anonymous() const
730{
731 return m_anonymous;
732}
733
734DOM::Node const* Node::dom_node() const
735{
736 if (m_anonymous)
737 return nullptr;
738 return m_dom_node.ptr();
739}
740
741DOM::Node* Node::dom_node()
742{
743 if (m_anonymous)
744 return nullptr;
745 return m_dom_node.ptr();
746}
747
748DOM::Document& Node::document()
749{
750 return m_dom_node->document();
751}
752
753DOM::Document const& Node::document() const
754{
755 return m_dom_node->document();
756}
757
758}