ViewportPaintable.cpp 23 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443
  1. /*
  2. * Copyright (c) 2023, Andreas Kling <kling@serenityos.org>
  3. *
  4. * SPDX-License-Identifier: BSD-2-Clause
  5. */
  6. #include <LibWeb/Layout/Viewport.h>
  7. #include <LibWeb/Painting/SVGPaintable.h>
  8. #include <LibWeb/Painting/SVGSVGPaintable.h>
  9. #include <LibWeb/Painting/StackingContext.h>
  10. #include <LibWeb/Painting/ViewportPaintable.h>
  11. namespace Web::Painting {
  12. JS::NonnullGCPtr<ViewportPaintable> ViewportPaintable::create(Layout::Viewport const& layout_viewport)
  13. {
  14. return layout_viewport.heap().allocate_without_realm<ViewportPaintable>(layout_viewport);
  15. }
  16. ViewportPaintable::ViewportPaintable(Layout::Viewport const& layout_viewport)
  17. : PaintableWithLines(layout_viewport)
  18. {
  19. }
  20. ViewportPaintable::~ViewportPaintable() = default;
  21. void ViewportPaintable::build_stacking_context_tree_if_needed()
  22. {
  23. if (stacking_context())
  24. return;
  25. build_stacking_context_tree();
  26. }
  27. void ViewportPaintable::build_stacking_context_tree()
  28. {
  29. set_stacking_context(make<StackingContext>(*this, nullptr, 0));
  30. size_t index_in_tree_order = 1;
  31. for_each_in_subtree([&](Paintable const& paintable) {
  32. const_cast<Paintable&>(paintable).invalidate_stacking_context();
  33. auto* parent_context = const_cast<Paintable&>(paintable).enclosing_stacking_context();
  34. auto establishes_stacking_context = paintable.layout_node().establishes_stacking_context();
  35. if ((paintable.is_positioned() || establishes_stacking_context) && paintable.computed_values().z_index().value_or(0) == 0)
  36. parent_context->m_positioned_descendants_with_stack_level_0_and_stacking_contexts.append(paintable);
  37. if (!paintable.is_positioned() && paintable.is_floating())
  38. parent_context->m_non_positioned_floating_descendants.append(paintable);
  39. if (!establishes_stacking_context) {
  40. VERIFY(!paintable.stacking_context());
  41. return TraversalDecision::Continue;
  42. }
  43. VERIFY(parent_context);
  44. const_cast<Paintable&>(paintable).set_stacking_context(make<Painting::StackingContext>(const_cast<Paintable&>(paintable), parent_context, index_in_tree_order++));
  45. return TraversalDecision::Continue;
  46. });
  47. stacking_context()->sort();
  48. }
  49. void ViewportPaintable::paint_all_phases(PaintContext& context)
  50. {
  51. build_stacking_context_tree_if_needed();
  52. context.recording_painter().translate(-context.device_viewport_rect().location().to_type<int>());
  53. stacking_context()->paint(context);
  54. }
  55. void ViewportPaintable::assign_scroll_frames()
  56. {
  57. int next_id = 0;
  58. for_each_in_subtree_of_type<PaintableBox>([&](auto const& paintable_box) {
  59. if (paintable_box.has_scrollable_overflow()) {
  60. auto scroll_frame = adopt_ref(*new ScrollFrame());
  61. scroll_frame->id = next_id++;
  62. scroll_state.set(&paintable_box, move(scroll_frame));
  63. }
  64. return TraversalDecision::Continue;
  65. });
  66. for_each_in_subtree([&](auto const& paintable) {
  67. for (auto block = paintable.containing_block(); block; block = block->containing_block()) {
  68. if (auto scroll_frame = scroll_state.get(block); scroll_frame.has_value()) {
  69. if (paintable.is_paintable_box()) {
  70. auto const& paintable_box = static_cast<PaintableBox const&>(paintable);
  71. const_cast<PaintableBox&>(paintable_box).set_enclosing_scroll_frame(scroll_frame.value());
  72. } else if (paintable.is_inline_paintable()) {
  73. auto const& inline_paintable = static_cast<InlinePaintable const&>(paintable);
  74. const_cast<InlinePaintable&>(inline_paintable).set_enclosing_scroll_frame(scroll_frame.value());
  75. }
  76. break;
  77. }
  78. }
  79. return TraversalDecision::Continue;
  80. });
  81. }
  82. void ViewportPaintable::assign_clip_frames()
  83. {
  84. for_each_in_subtree_of_type<PaintableBox>([&](auto const& paintable_box) {
  85. auto overflow_x = paintable_box.computed_values().overflow_x();
  86. auto overflow_y = paintable_box.computed_values().overflow_y();
  87. auto has_hidden_overflow = overflow_x != CSS::Overflow::Visible && overflow_y != CSS::Overflow::Visible;
  88. if (has_hidden_overflow || paintable_box.get_clip_rect().has_value()) {
  89. auto clip_frame = adopt_ref(*new ClipFrame());
  90. clip_state.set(&paintable_box, move(clip_frame));
  91. }
  92. return TraversalDecision::Continue;
  93. });
  94. for_each_in_subtree([&](auto const& paintable) {
  95. for (auto block = paintable.containing_block(); block; block = block->containing_block()) {
  96. if (auto clip_frame = clip_state.get(block); clip_frame.has_value()) {
  97. if (paintable.is_paintable_box()) {
  98. auto const& paintable_box = static_cast<PaintableBox const&>(paintable);
  99. const_cast<PaintableBox&>(paintable_box).set_enclosing_clip_frame(clip_frame.value());
  100. } else if (paintable.is_inline_paintable()) {
  101. auto const& inline_paintable = static_cast<InlinePaintable const&>(paintable);
  102. const_cast<InlinePaintable&>(inline_paintable).set_enclosing_clip_frame(clip_frame.value());
  103. }
  104. break;
  105. }
  106. }
  107. return TraversalDecision::Continue;
  108. });
  109. }
  110. void ViewportPaintable::refresh_scroll_state()
  111. {
  112. for (auto& it : scroll_state) {
  113. auto const& paintable_box = *it.key;
  114. auto& scroll_frame = *it.value;
  115. CSSPixelPoint offset;
  116. for (auto const* block = &paintable_box.layout_box(); block; block = block->containing_block()) {
  117. auto const& block_paintable_box = *block->paintable_box();
  118. offset.translate_by(block_paintable_box.scroll_offset());
  119. }
  120. scroll_frame.offset = -offset;
  121. }
  122. }
  123. void ViewportPaintable::refresh_clip_state()
  124. {
  125. for (auto& it : clip_state) {
  126. auto const& paintable_box = *it.key;
  127. auto& clip_frame = *it.value;
  128. auto overflow_x = paintable_box.computed_values().overflow_x();
  129. auto overflow_y = paintable_box.computed_values().overflow_y();
  130. // Start from CSS clip property if it exists.
  131. Optional<CSSPixelRect> clip_rect = paintable_box.get_clip_rect();
  132. clip_frame.clear_border_radii_clips();
  133. if (overflow_x != CSS::Overflow::Visible && overflow_y != CSS::Overflow::Visible) {
  134. auto overflow_clip_rect = paintable_box.compute_absolute_padding_rect_with_css_transform_applied();
  135. for (auto const* block = &paintable_box.layout_box(); !block->is_viewport(); block = block->containing_block()) {
  136. auto const& block_paintable_box = *block->paintable_box();
  137. auto block_overflow_x = block_paintable_box.computed_values().overflow_x();
  138. auto block_overflow_y = block_paintable_box.computed_values().overflow_y();
  139. if (block_overflow_x != CSS::Overflow::Visible && block_overflow_y != CSS::Overflow::Visible) {
  140. auto rect = block_paintable_box.compute_absolute_padding_rect_with_css_transform_applied();
  141. overflow_clip_rect.intersect(rect);
  142. auto border_radii_data = block_paintable_box.normalized_border_radii_data(ShrinkRadiiForBorders::Yes);
  143. if (border_radii_data.has_any_radius()) {
  144. BorderRadiiClip border_radii_clip { .rect = rect, .radii = border_radii_data };
  145. clip_frame.add_border_radii_clip(border_radii_clip);
  146. }
  147. }
  148. if (auto css_clip_property_rect = block->paintable_box()->get_clip_rect(); css_clip_property_rect.has_value())
  149. overflow_clip_rect.intersect(css_clip_property_rect.value());
  150. }
  151. clip_rect = overflow_clip_rect;
  152. }
  153. clip_frame.set_rect(*clip_rect);
  154. }
  155. }
  156. static Painting::BorderRadiiData normalize_border_radii_data(Layout::Node const& node, CSSPixelRect const& rect, CSS::BorderRadiusData top_left_radius, CSS::BorderRadiusData top_right_radius, CSS::BorderRadiusData bottom_right_radius, CSS::BorderRadiusData bottom_left_radius)
  157. {
  158. Painting::BorderRadiusData bottom_left_radius_px {};
  159. Painting::BorderRadiusData bottom_right_radius_px {};
  160. Painting::BorderRadiusData top_left_radius_px {};
  161. Painting::BorderRadiusData top_right_radius_px {};
  162. bottom_left_radius_px.horizontal_radius = bottom_left_radius.horizontal_radius.to_px(node, rect.width());
  163. bottom_right_radius_px.horizontal_radius = bottom_right_radius.horizontal_radius.to_px(node, rect.width());
  164. top_left_radius_px.horizontal_radius = top_left_radius.horizontal_radius.to_px(node, rect.width());
  165. top_right_radius_px.horizontal_radius = top_right_radius.horizontal_radius.to_px(node, rect.width());
  166. bottom_left_radius_px.vertical_radius = bottom_left_radius.vertical_radius.to_px(node, rect.height());
  167. bottom_right_radius_px.vertical_radius = bottom_right_radius.vertical_radius.to_px(node, rect.height());
  168. top_left_radius_px.vertical_radius = top_left_radius.vertical_radius.to_px(node, rect.height());
  169. top_right_radius_px.vertical_radius = top_right_radius.vertical_radius.to_px(node, rect.height());
  170. // Scale overlapping curves according to https://www.w3.org/TR/css-backgrounds-3/#corner-overlap
  171. // Let f = min(Li/Si), where i ∈ {top, right, bottom, left},
  172. // Si is the sum of the two corresponding radii of the corners on side i,
  173. // and Ltop = Lbottom = the width of the box, and Lleft = Lright = the height of the box.
  174. auto l_top = rect.width();
  175. auto l_bottom = l_top;
  176. auto l_left = rect.height();
  177. auto l_right = l_left;
  178. auto s_top = (top_left_radius_px.horizontal_radius + top_right_radius_px.horizontal_radius);
  179. auto s_right = (top_right_radius_px.vertical_radius + bottom_right_radius_px.vertical_radius);
  180. auto s_bottom = (bottom_left_radius_px.horizontal_radius + bottom_right_radius_px.horizontal_radius);
  181. auto s_left = (top_left_radius_px.vertical_radius + bottom_left_radius_px.vertical_radius);
  182. CSSPixelFraction f = 1;
  183. f = (s_top != 0) ? min(f, l_top / s_top) : f;
  184. f = (s_right != 0) ? min(f, l_right / s_right) : f;
  185. f = (s_bottom != 0) ? min(f, l_bottom / s_bottom) : f;
  186. f = (s_left != 0) ? min(f, l_left / s_left) : f;
  187. // If f < 1, then all corner radii are reduced by multiplying them by f.
  188. if (f < 1) {
  189. top_left_radius_px.horizontal_radius *= f;
  190. top_left_radius_px.vertical_radius *= f;
  191. top_right_radius_px.horizontal_radius *= f;
  192. top_right_radius_px.vertical_radius *= f;
  193. bottom_right_radius_px.horizontal_radius *= f;
  194. bottom_right_radius_px.vertical_radius *= f;
  195. bottom_left_radius_px.horizontal_radius *= f;
  196. bottom_left_radius_px.vertical_radius *= f;
  197. }
  198. return Painting::BorderRadiiData { top_left_radius_px, top_right_radius_px, bottom_right_radius_px, bottom_left_radius_px };
  199. }
  200. void ViewportPaintable::resolve_paint_only_properties()
  201. {
  202. // Resolves layout-dependent properties not handled during layout and stores them in the paint tree.
  203. // Properties resolved include:
  204. // - Border radii
  205. // - Box shadows
  206. // - Text shadows
  207. // - Transforms
  208. // - Transform origins
  209. // - Outlines
  210. for_each_in_inclusive_subtree([&](Paintable& paintable) {
  211. auto& node = paintable.layout_node();
  212. auto const is_inline_paintable = paintable.is_inline_paintable();
  213. auto const is_paintable_box = paintable.is_paintable_box();
  214. auto const is_paintable_with_lines = paintable.is_paintable_with_lines();
  215. // Border radii
  216. if (is_inline_paintable) {
  217. auto& inline_paintable = static_cast<Painting::InlinePaintable&>(paintable);
  218. auto& fragments = inline_paintable.fragments();
  219. auto const& top_left_border_radius = inline_paintable.computed_values().border_top_left_radius();
  220. auto const& top_right_border_radius = inline_paintable.computed_values().border_top_right_radius();
  221. auto const& bottom_right_border_radius = inline_paintable.computed_values().border_bottom_right_radius();
  222. auto const& bottom_left_border_radius = inline_paintable.computed_values().border_bottom_left_radius();
  223. auto containing_block_position_in_absolute_coordinates = inline_paintable.containing_block()->absolute_position();
  224. for (size_t i = 0; i < fragments.size(); ++i) {
  225. auto is_first_fragment = i == 0;
  226. auto is_last_fragment = i == fragments.size() - 1;
  227. auto& fragment = fragments[i];
  228. CSSPixelRect absolute_fragment_rect {
  229. containing_block_position_in_absolute_coordinates.translated(fragment.offset()),
  230. fragment.size()
  231. };
  232. if (is_first_fragment) {
  233. auto extra_start_width = inline_paintable.box_model().padding.left;
  234. absolute_fragment_rect.translate_by(-extra_start_width, 0);
  235. absolute_fragment_rect.set_width(absolute_fragment_rect.width() + extra_start_width);
  236. }
  237. if (is_last_fragment) {
  238. auto extra_end_width = inline_paintable.box_model().padding.right;
  239. absolute_fragment_rect.set_width(absolute_fragment_rect.width() + extra_end_width);
  240. }
  241. auto border_radii_data = normalize_border_radii_data(inline_paintable.layout_node(),
  242. absolute_fragment_rect, top_left_border_radius,
  243. top_right_border_radius,
  244. bottom_right_border_radius,
  245. bottom_left_border_radius);
  246. fragment.set_border_radii_data(border_radii_data);
  247. }
  248. }
  249. // Border radii
  250. if (is_paintable_box) {
  251. auto& paintable_box = static_cast<Painting::PaintableBox&>(paintable);
  252. CSSPixelRect const border_rect { 0, 0, paintable_box.border_box_width(), paintable_box.border_box_height() };
  253. auto const& border_top_left_radius = node.computed_values().border_top_left_radius();
  254. auto const& border_top_right_radius = node.computed_values().border_top_right_radius();
  255. auto const& border_bottom_right_radius = node.computed_values().border_bottom_right_radius();
  256. auto const& border_bottom_left_radius = node.computed_values().border_bottom_left_radius();
  257. auto radii_data = normalize_border_radii_data(node, border_rect, border_top_left_radius,
  258. border_top_right_radius, border_bottom_right_radius,
  259. border_bottom_left_radius);
  260. paintable_box.set_border_radii_data(radii_data);
  261. }
  262. // Box shadows
  263. auto const& box_shadow_data = node.computed_values().box_shadow();
  264. if (!box_shadow_data.is_empty()) {
  265. Vector<Painting::ShadowData> resolved_box_shadow_data;
  266. resolved_box_shadow_data.ensure_capacity(box_shadow_data.size());
  267. for (auto const& layer : box_shadow_data) {
  268. resolved_box_shadow_data.empend(
  269. layer.color,
  270. layer.offset_x.to_px(node),
  271. layer.offset_y.to_px(node),
  272. layer.blur_radius.to_px(node),
  273. layer.spread_distance.to_px(node),
  274. layer.placement == CSS::ShadowPlacement::Outer ? Painting::ShadowPlacement::Outer
  275. : Painting::ShadowPlacement::Inner);
  276. }
  277. if (is<Painting::PaintableBox>(paintable)) {
  278. auto& paintable_box = static_cast<Painting::PaintableBox&>(paintable);
  279. paintable_box.set_box_shadow_data(move(resolved_box_shadow_data));
  280. } else if (is<Painting::InlinePaintable>(paintable)) {
  281. auto& inline_paintable = static_cast<Painting::InlinePaintable&>(paintable);
  282. inline_paintable.set_box_shadow_data(move(resolved_box_shadow_data));
  283. }
  284. }
  285. // Text shadows
  286. if (is_paintable_with_lines) {
  287. auto const& paintable_with_lines = static_cast<Painting::PaintableWithLines const&>(paintable);
  288. for (auto const& fragment : paintable_with_lines.fragments()) {
  289. auto const& text_shadow = fragment.m_layout_node->computed_values().text_shadow();
  290. if (!text_shadow.is_empty()) {
  291. Vector<Painting::ShadowData> resolved_shadow_data;
  292. resolved_shadow_data.ensure_capacity(text_shadow.size());
  293. for (auto const& layer : text_shadow) {
  294. resolved_shadow_data.empend(
  295. layer.color,
  296. layer.offset_x.to_px(paintable_with_lines.layout_node()),
  297. layer.offset_y.to_px(paintable_with_lines.layout_node()),
  298. layer.blur_radius.to_px(paintable_with_lines.layout_node()),
  299. layer.spread_distance.to_px(paintable_with_lines.layout_node()),
  300. Painting::ShadowPlacement::Outer);
  301. }
  302. const_cast<Painting::PaintableFragment&>(fragment).set_shadows(move(resolved_shadow_data));
  303. }
  304. }
  305. }
  306. // Transform and transform origin
  307. if (is_paintable_box) {
  308. auto& paintable_box = static_cast<Painting::PaintableBox&>(paintable);
  309. auto const& transformations = paintable_box.computed_values().transformations();
  310. if (!transformations.is_empty()) {
  311. auto matrix = Gfx::FloatMatrix4x4::identity();
  312. for (auto const& transform : transformations)
  313. matrix = matrix * transform.to_matrix(paintable_box).release_value();
  314. paintable_box.set_transform(matrix);
  315. }
  316. auto const& transform_origin = paintable_box.computed_values().transform_origin();
  317. // https://www.w3.org/TR/css-transforms-1/#transform-box
  318. auto transform_box = paintable_box.computed_values().transform_box();
  319. // For SVG elements without associated CSS layout box, the used value for content-box is fill-box and for
  320. // border-box is stroke-box.
  321. // FIXME: This currently detects any SVG element except the <svg> one. Is that correct?
  322. // And is it correct to use `else` below?
  323. if (is<Painting::SVGPaintable>(paintable_box)) {
  324. switch (transform_box) {
  325. case CSS::TransformBox::ContentBox:
  326. transform_box = CSS::TransformBox::FillBox;
  327. break;
  328. case CSS::TransformBox::BorderBox:
  329. transform_box = CSS::TransformBox::StrokeBox;
  330. break;
  331. default:
  332. break;
  333. }
  334. }
  335. // For elements with associated CSS layout box, the used value for fill-box is content-box and for
  336. // stroke-box and view-box is border-box.
  337. else {
  338. switch (transform_box) {
  339. case CSS::TransformBox::FillBox:
  340. transform_box = CSS::TransformBox::ContentBox;
  341. break;
  342. case CSS::TransformBox::StrokeBox:
  343. case CSS::TransformBox::ViewBox:
  344. transform_box = CSS::TransformBox::BorderBox;
  345. break;
  346. default:
  347. break;
  348. }
  349. }
  350. CSSPixelRect reference_box = [&]() {
  351. switch (transform_box) {
  352. case CSS::TransformBox::ContentBox:
  353. // Uses the content box as reference box.
  354. // FIXME: The reference box of a table is the border box of its table wrapper box, not its table box.
  355. return paintable_box.absolute_rect();
  356. case CSS::TransformBox::BorderBox:
  357. // Uses the border box as reference box.
  358. // FIXME: The reference box of a table is the border box of its table wrapper box, not its table box.
  359. return paintable_box.absolute_border_box_rect();
  360. case CSS::TransformBox::FillBox:
  361. // Uses the object bounding box as reference box.
  362. // FIXME: For now we're using the content rect as an approximation.
  363. return paintable_box.absolute_rect();
  364. case CSS::TransformBox::StrokeBox:
  365. // Uses the stroke bounding box as reference box.
  366. // FIXME: For now we're using the border rect as an approximation.
  367. return paintable_box.absolute_border_box_rect();
  368. case CSS::TransformBox::ViewBox:
  369. // Uses the nearest SVG viewport as reference box.
  370. // FIXME: If a viewBox attribute is specified for the SVG viewport creating element:
  371. // - The reference box is positioned at the origin of the coordinate system established by the viewBox attribute.
  372. // - The dimension of the reference box is set to the width and height values of the viewBox attribute.
  373. auto* svg_paintable = paintable_box.first_ancestor_of_type<Painting::SVGSVGPaintable>();
  374. if (!svg_paintable)
  375. return paintable_box.absolute_border_box_rect();
  376. return svg_paintable->absolute_rect();
  377. }
  378. VERIFY_NOT_REACHED();
  379. }();
  380. auto x = reference_box.left() + transform_origin.x.to_px(node, reference_box.width());
  381. auto y = reference_box.top() + transform_origin.y.to_px(node, reference_box.height());
  382. paintable_box.set_transform_origin({ x, y });
  383. paintable_box.set_transform_origin({ x, y });
  384. }
  385. // Outlines
  386. auto const& computed_values = node.computed_values();
  387. auto outline_width = computed_values.outline_width().to_px(node);
  388. auto outline_data = borders_data_for_outline(node, computed_values.outline_color(), computed_values.outline_style(), outline_width);
  389. auto outline_offset = computed_values.outline_offset().to_px(node);
  390. if (is_paintable_box) {
  391. auto& paintable_box = static_cast<Painting::PaintableBox&>(paintable);
  392. paintable_box.set_outline_data(outline_data);
  393. paintable_box.set_outline_offset(outline_offset);
  394. } else if (is_inline_paintable) {
  395. auto& inline_paintable = static_cast<Painting::InlinePaintable&>(paintable);
  396. inline_paintable.set_outline_data(outline_data);
  397. inline_paintable.set_outline_offset(outline_offset);
  398. }
  399. return TraversalDecision::Continue;
  400. });
  401. }
  402. }