PaintableBox.cpp 35 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769
  1. /*
  2. * Copyright (c) 2022-2023, Andreas Kling <kling@serenityos.org>
  3. * Copyright (c) 2022, Sam Atkins <atkinssj@serenityos.org>
  4. *
  5. * SPDX-License-Identifier: BSD-2-Clause
  6. */
  7. #include <AK/GenericShorthands.h>
  8. #include <LibUnicode/CharacterTypes.h>
  9. #include <LibWeb/DOM/Document.h>
  10. #include <LibWeb/HTML/HTMLHtmlElement.h>
  11. #include <LibWeb/Layout/BlockContainer.h>
  12. #include <LibWeb/Layout/Viewport.h>
  13. #include <LibWeb/Painting/BackgroundPainting.h>
  14. #include <LibWeb/Painting/FilterPainting.h>
  15. #include <LibWeb/Painting/PaintableBox.h>
  16. #include <LibWeb/Painting/StackingContext.h>
  17. #include <LibWeb/Platform/FontPlugin.h>
  18. namespace Web::Painting {
  19. JS::NonnullGCPtr<PaintableWithLines> PaintableWithLines::create(Layout::BlockContainer const& block_container)
  20. {
  21. return block_container.heap().allocate_without_realm<PaintableWithLines>(block_container);
  22. }
  23. JS::NonnullGCPtr<PaintableBox> PaintableBox::create(Layout::Box const& layout_box)
  24. {
  25. return layout_box.heap().allocate_without_realm<PaintableBox>(layout_box);
  26. }
  27. PaintableBox::PaintableBox(Layout::Box const& layout_box)
  28. : Paintable(layout_box)
  29. {
  30. }
  31. PaintableBox::~PaintableBox()
  32. {
  33. }
  34. void PaintableBox::invalidate_stacking_context()
  35. {
  36. m_stacking_context = nullptr;
  37. }
  38. bool PaintableBox::is_out_of_view(PaintContext& context) const
  39. {
  40. return context.would_be_fully_clipped_by_painter(context.enclosing_device_rect(absolute_paint_rect()));
  41. }
  42. PaintableWithLines::PaintableWithLines(Layout::BlockContainer const& layout_box)
  43. : PaintableBox(layout_box)
  44. {
  45. }
  46. PaintableWithLines::~PaintableWithLines()
  47. {
  48. }
  49. void PaintableBox::set_offset(CSSPixelPoint offset)
  50. {
  51. m_offset = offset;
  52. }
  53. void PaintableBox::set_content_size(CSSPixelSize size)
  54. {
  55. m_content_size = size;
  56. layout_box().did_set_content_size();
  57. }
  58. CSSPixelPoint PaintableBox::effective_offset() const
  59. {
  60. CSSPixelPoint offset;
  61. if (containing_block() && m_containing_line_box_fragment.has_value()) {
  62. auto& paintable_with_lines = *verify_cast<PaintableWithLines>(containing_block()->paintable_box());
  63. auto const& fragment = paintable_with_lines.line_boxes()[m_containing_line_box_fragment->line_box_index].fragments()[m_containing_line_box_fragment->fragment_index];
  64. offset = fragment.offset();
  65. } else {
  66. offset = m_offset;
  67. }
  68. if (layout_box().computed_values().position() == CSS::Position::Relative) {
  69. auto const& inset = layout_box().box_model().inset;
  70. offset.translate_by(inset.left, inset.top);
  71. }
  72. return offset;
  73. }
  74. CSSPixelRect PaintableBox::compute_absolute_rect() const
  75. {
  76. CSSPixelRect rect { effective_offset(), content_size() };
  77. for (auto const* block = containing_block(); block && block->paintable(); block = block->paintable()->containing_block())
  78. rect.translate_by(block->paintable_box()->effective_offset());
  79. return rect;
  80. }
  81. CSSPixelRect PaintableBox::absolute_rect() const
  82. {
  83. if (!m_absolute_rect.has_value())
  84. m_absolute_rect = compute_absolute_rect();
  85. return *m_absolute_rect;
  86. }
  87. CSSPixelRect PaintableBox::compute_absolute_paint_rect() const
  88. {
  89. // FIXME: This likely incomplete:
  90. auto rect = absolute_border_box_rect();
  91. if (has_scrollable_overflow()) {
  92. auto scrollable_overflow_rect = this->scrollable_overflow_rect().value();
  93. if (computed_values().overflow_x() == CSS::Overflow::Visible)
  94. rect.unite_horizontally(scrollable_overflow_rect);
  95. if (computed_values().overflow_y() == CSS::Overflow::Visible)
  96. rect.unite_vertically(scrollable_overflow_rect);
  97. }
  98. auto resolved_box_shadow_data = resolve_box_shadow_data();
  99. for (auto const& shadow : resolved_box_shadow_data) {
  100. if (shadow.placement == ShadowPlacement::Inner)
  101. continue;
  102. auto inflate = shadow.spread_distance + shadow.blur_radius;
  103. auto shadow_rect = rect.inflated(inflate, inflate, inflate, inflate).translated(shadow.offset_x, shadow.offset_y);
  104. rect = rect.united(shadow_rect);
  105. }
  106. return rect;
  107. }
  108. CSSPixelRect PaintableBox::absolute_paint_rect() const
  109. {
  110. if (!m_absolute_paint_rect.has_value())
  111. m_absolute_paint_rect = compute_absolute_paint_rect();
  112. return *m_absolute_paint_rect;
  113. }
  114. void PaintableBox::set_containing_line_box_fragment(Optional<Layout::LineBoxFragmentCoordinate> fragment_coordinate)
  115. {
  116. m_containing_line_box_fragment = move(fragment_coordinate);
  117. }
  118. StackingContext* PaintableBox::enclosing_stacking_context()
  119. {
  120. for (auto* ancestor = layout_box().parent(); ancestor; ancestor = ancestor->parent()) {
  121. if (!is<Layout::Box>(ancestor))
  122. continue;
  123. auto& ancestor_box = static_cast<Layout::Box&>(const_cast<Layout::NodeWithStyle&>(*ancestor));
  124. if (auto* ancestor_paintable_box = ancestor_box.paintable_box(); ancestor_paintable_box && ancestor_paintable_box->stacking_context())
  125. return const_cast<StackingContext*>(ancestor_paintable_box->stacking_context());
  126. }
  127. // We should always reach the Layout::Viewport stacking context.
  128. VERIFY_NOT_REACHED();
  129. }
  130. void PaintableBox::paint(PaintContext& context, PaintPhase phase) const
  131. {
  132. if (!is_visible())
  133. return;
  134. auto clip_rect = computed_values().clip();
  135. auto should_clip_rect = clip_rect.is_rect() && layout_box().is_absolutely_positioned();
  136. if (phase == PaintPhase::Background) {
  137. if (should_clip_rect) {
  138. context.painter().save();
  139. auto border_box = absolute_border_box_rect();
  140. context.painter().add_clip_rect(context.rounded_device_rect(clip_rect.to_rect().resolved(Paintable::layout_node(), border_box.to_type<double>()).to_type<CSSPixels>()).to_type<int>());
  141. }
  142. paint_backdrop_filter(context);
  143. paint_background(context);
  144. paint_box_shadow(context);
  145. }
  146. if (phase == PaintPhase::Border) {
  147. paint_border(context);
  148. }
  149. if (phase == PaintPhase::Outline) {
  150. auto outline_width = computed_values().outline_width().to_px(layout_node());
  151. auto borders_data = borders_data_for_outline(layout_node(), computed_values().outline_color(), computed_values().outline_style(), outline_width);
  152. if (borders_data.has_value()) {
  153. auto outline_offset = computed_values().outline_offset().to_px(layout_node());
  154. auto border_radius_data = normalized_border_radii_data(ShrinkRadiiForBorders::No);
  155. auto borders_rect = absolute_border_box_rect();
  156. auto outline_offset_x = outline_offset;
  157. auto outline_offset_y = outline_offset;
  158. // "Both the height and the width of the outside of the shape drawn by the outline should not
  159. // become smaller than twice the computed value of the outline-width property to make sure
  160. // that an outline can be rendered even with large negative values."
  161. // https://www.w3.org/TR/css-ui-4/#outline-offset
  162. // So, if the horizontal outline offset is > half the borders_rect's width then we set it to that.
  163. // (And the same for y)
  164. if ((borders_rect.width() / 2) + outline_offset_x < 0)
  165. outline_offset_x = -borders_rect.width() / 2;
  166. if ((borders_rect.height() / 2) + outline_offset_y < 0)
  167. outline_offset_y = -borders_rect.height() / 2;
  168. border_radius_data.inflate(outline_width + outline_offset_y, outline_width + outline_offset_x, outline_width + outline_offset_y, outline_width + outline_offset_x);
  169. borders_rect.inflate(outline_width + outline_offset_y, outline_width + outline_offset_x, outline_width + outline_offset_y, outline_width + outline_offset_x);
  170. paint_all_borders(context, borders_rect, border_radius_data, borders_data.value());
  171. }
  172. }
  173. if (phase == PaintPhase::Overlay && should_clip_rect)
  174. context.painter().restore();
  175. if (phase == PaintPhase::Overlay && layout_box().document().inspected_layout_node() == &layout_box()) {
  176. auto content_rect = absolute_rect();
  177. auto margin_box = box_model().margin_box();
  178. CSSPixelRect margin_rect;
  179. margin_rect.set_x(absolute_x() - margin_box.left);
  180. margin_rect.set_width(content_width() + margin_box.left + margin_box.right);
  181. margin_rect.set_y(absolute_y() - margin_box.top);
  182. margin_rect.set_height(content_height() + margin_box.top + margin_box.bottom);
  183. auto border_rect = absolute_border_box_rect();
  184. auto padding_rect = absolute_padding_box_rect();
  185. auto paint_inspector_rect = [&](CSSPixelRect const& rect, Color color) {
  186. auto device_rect = context.enclosing_device_rect(rect).to_type<int>();
  187. context.painter().fill_rect(device_rect, Color(color).with_alpha(100));
  188. context.painter().draw_rect(device_rect, Color(color));
  189. };
  190. paint_inspector_rect(margin_rect, Color::Yellow);
  191. paint_inspector_rect(padding_rect, Color::Cyan);
  192. paint_inspector_rect(border_rect, Color::Green);
  193. paint_inspector_rect(content_rect, Color::Magenta);
  194. auto& font = Platform::FontPlugin::the().default_font();
  195. StringBuilder builder;
  196. if (layout_box().dom_node())
  197. builder.append(layout_box().dom_node()->debug_description());
  198. else
  199. builder.append(layout_box().debug_description());
  200. builder.appendff(" {}x{} @ {},{}", border_rect.width(), border_rect.height(), border_rect.x(), border_rect.y());
  201. auto size_text = builder.to_deprecated_string();
  202. auto size_text_rect = border_rect;
  203. size_text_rect.set_y(border_rect.y() + border_rect.height());
  204. size_text_rect.set_top(size_text_rect.top());
  205. size_text_rect.set_width((float)font.width(size_text) + 4);
  206. size_text_rect.set_height(font.pixel_size() + 4);
  207. auto size_text_device_rect = context.enclosing_device_rect(size_text_rect).to_type<int>();
  208. context.painter().fill_rect(size_text_device_rect, context.palette().color(Gfx::ColorRole::Tooltip));
  209. context.painter().draw_rect(size_text_device_rect, context.palette().threed_shadow1());
  210. context.painter().draw_text(size_text_device_rect, size_text, font, Gfx::TextAlignment::Center, context.palette().color(Gfx::ColorRole::TooltipText));
  211. }
  212. }
  213. BordersData PaintableBox::remove_element_kind_from_borders_data(PaintableBox::BordersDataWithElementKind borders_data)
  214. {
  215. return {
  216. .top = borders_data.top.border_data,
  217. .right = borders_data.right.border_data,
  218. .bottom = borders_data.bottom.border_data,
  219. .left = borders_data.left.border_data,
  220. };
  221. }
  222. void PaintableBox::paint_border(PaintContext& context) const
  223. {
  224. auto borders_data = m_override_borders_data.has_value() ? remove_element_kind_from_borders_data(m_override_borders_data.value()) : BordersData {
  225. .top = box_model().border.top == 0 ? CSS::BorderData() : computed_values().border_top(),
  226. .right = box_model().border.right == 0 ? CSS::BorderData() : computed_values().border_right(),
  227. .bottom = box_model().border.bottom == 0 ? CSS::BorderData() : computed_values().border_bottom(),
  228. .left = box_model().border.left == 0 ? CSS::BorderData() : computed_values().border_left(),
  229. };
  230. paint_all_borders(context, absolute_border_box_rect(), normalized_border_radii_data(), borders_data);
  231. }
  232. void PaintableBox::paint_backdrop_filter(PaintContext& context) const
  233. {
  234. auto& backdrop_filter = computed_values().backdrop_filter();
  235. if (!backdrop_filter.is_none())
  236. apply_backdrop_filter(context, layout_node(), absolute_border_box_rect(), normalized_border_radii_data(), backdrop_filter);
  237. }
  238. void PaintableBox::paint_background(PaintContext& context) const
  239. {
  240. // If the body's background properties were propagated to the root element, do no re-paint the body's background.
  241. if (layout_box().is_body() && document().html_element()->should_use_body_background_properties())
  242. return;
  243. CSSPixelRect background_rect;
  244. Color background_color = computed_values().background_color();
  245. auto* background_layers = &computed_values().background_layers();
  246. if (layout_box().is_root_element()) {
  247. // CSS 2.1 Appendix E.2: If the element is a root element, paint the background over the entire canvas.
  248. background_rect = context.css_viewport_rect();
  249. // Section 2.11.2: If the computed value of background-image on the root element is none and its background-color is transparent,
  250. // user agents must instead propagate the computed values of the background properties from that element’s first HTML BODY child element.
  251. if (document().html_element()->should_use_body_background_properties()) {
  252. background_layers = document().background_layers();
  253. background_color = document().background_color();
  254. }
  255. } else {
  256. background_rect = absolute_padding_box_rect();
  257. }
  258. // HACK: If the Box has a border, use the bordered_rect to paint the background.
  259. // This way if we have a border-radius there will be no gap between the filling and actual border.
  260. if (computed_values().border_top().width != 0 || computed_values().border_right().width != 0 || computed_values().border_bottom().width != 0 || computed_values().border_left().width != 0)
  261. background_rect = absolute_border_box_rect();
  262. Painting::paint_background(context, layout_box(), background_rect, background_color, computed_values().image_rendering(), background_layers, normalized_border_radii_data());
  263. }
  264. Vector<ShadowData> PaintableBox::resolve_box_shadow_data() const
  265. {
  266. auto box_shadow_data = computed_values().box_shadow();
  267. if (box_shadow_data.is_empty())
  268. return {};
  269. Vector<ShadowData> resolved_box_shadow_data;
  270. resolved_box_shadow_data.ensure_capacity(box_shadow_data.size());
  271. for (auto const& layer : box_shadow_data) {
  272. resolved_box_shadow_data.empend(
  273. layer.color,
  274. layer.offset_x.to_px(layout_box()),
  275. layer.offset_y.to_px(layout_box()),
  276. layer.blur_radius.to_px(layout_box()),
  277. layer.spread_distance.to_px(layout_box()),
  278. layer.placement == CSS::ShadowPlacement::Outer ? ShadowPlacement::Outer : ShadowPlacement::Inner);
  279. }
  280. return resolved_box_shadow_data;
  281. }
  282. void PaintableBox::paint_box_shadow(PaintContext& context) const
  283. {
  284. auto resolved_box_shadow_data = resolve_box_shadow_data();
  285. if (resolved_box_shadow_data.is_empty())
  286. return;
  287. auto borders_data = BordersData {
  288. .top = computed_values().border_top(),
  289. .right = computed_values().border_right(),
  290. .bottom = computed_values().border_bottom(),
  291. .left = computed_values().border_left(),
  292. };
  293. Painting::paint_box_shadow(context, absolute_border_box_rect(), absolute_padding_box_rect(),
  294. borders_data, normalized_border_radii_data(), resolved_box_shadow_data);
  295. }
  296. BorderRadiiData PaintableBox::normalized_border_radii_data(ShrinkRadiiForBorders shrink) const
  297. {
  298. auto border_radius_data = Painting::normalized_border_radii_data(layout_box(),
  299. absolute_border_box_rect(),
  300. computed_values().border_top_left_radius(),
  301. computed_values().border_top_right_radius(),
  302. computed_values().border_bottom_right_radius(),
  303. computed_values().border_bottom_left_radius());
  304. if (shrink == ShrinkRadiiForBorders::Yes)
  305. border_radius_data.shrink(computed_values().border_top().width, computed_values().border_right().width, computed_values().border_bottom().width, computed_values().border_left().width);
  306. return border_radius_data;
  307. }
  308. Optional<CSSPixelRect> PaintableBox::calculate_overflow_clipped_rect() const
  309. {
  310. if (!m_clip_rect.has_value()) {
  311. // NOTE: stacking context should not be crossed while aggregating rectangle to
  312. // clip `overflow: hidden` because intersecting rectangles with different
  313. // transforms doesn't make sense
  314. // TODO: figure out if there are cases when stacking context should be
  315. // crossed to calculate correct clip rect
  316. if (!stacking_context() && containing_block() && containing_block()->paintable_box()) {
  317. m_clip_rect = containing_block()->paintable_box()->calculate_overflow_clipped_rect();
  318. }
  319. auto overflow_x = computed_values().overflow_x();
  320. auto overflow_y = computed_values().overflow_y();
  321. if (overflow_x != CSS::Overflow::Visible && overflow_y != CSS::Overflow::Visible) {
  322. if (m_clip_rect.has_value()) {
  323. m_clip_rect->intersect(absolute_padding_box_rect());
  324. } else {
  325. m_clip_rect = absolute_padding_box_rect();
  326. }
  327. }
  328. }
  329. return m_clip_rect;
  330. }
  331. void PaintableBox::apply_clip_overflow_rect(PaintContext& context, PaintPhase phase) const
  332. {
  333. if (!AK::first_is_one_of(phase, PaintPhase::Background, PaintPhase::Border, PaintPhase::Foreground))
  334. return;
  335. // FIXME: Support more overflow variations.
  336. auto clip_rect = this->calculate_overflow_clipped_rect();
  337. auto overflow_x = computed_values().overflow_x();
  338. auto overflow_y = computed_values().overflow_y();
  339. if (!clip_rect.has_value())
  340. return;
  341. if (!m_clipping_overflow) {
  342. context.painter().save();
  343. context.painter().add_clip_rect(context.enclosing_device_rect(*clip_rect).to_type<int>());
  344. m_clipping_overflow = true;
  345. }
  346. if (!clip_rect->is_empty() && overflow_y == CSS::Overflow::Hidden && overflow_x == CSS::Overflow::Hidden) {
  347. auto border_radii_data = normalized_border_radii_data(ShrinkRadiiForBorders::Yes);
  348. if (border_radii_data.has_any_radius()) {
  349. auto corner_clipper = BorderRadiusCornerClipper::create(context, context.rounded_device_rect(*clip_rect), border_radii_data, CornerClip::Outside, BorderRadiusCornerClipper::UseCachedBitmap::No);
  350. if (corner_clipper.is_error()) {
  351. dbgln("Failed to create overflow border-radius corner clipper: {}", corner_clipper.error());
  352. return;
  353. }
  354. m_overflow_corner_radius_clipper = corner_clipper.release_value();
  355. m_overflow_corner_radius_clipper->sample_under_corners(context.painter());
  356. }
  357. }
  358. }
  359. void PaintableBox::clear_clip_overflow_rect(PaintContext& context, PaintPhase phase) const
  360. {
  361. if (!AK::first_is_one_of(phase, PaintPhase::Background, PaintPhase::Border, PaintPhase::Foreground))
  362. return;
  363. // FIXME: Support more overflow variations.
  364. if (m_clipping_overflow) {
  365. context.painter().restore();
  366. m_clipping_overflow = false;
  367. }
  368. if (m_overflow_corner_radius_clipper.has_value()) {
  369. m_overflow_corner_radius_clipper->blit_corner_clipping(context.painter());
  370. m_overflow_corner_radius_clipper = {};
  371. }
  372. }
  373. static void paint_cursor_if_needed(PaintContext& context, Layout::TextNode const& text_node, Layout::LineBoxFragment const& fragment)
  374. {
  375. auto const& browsing_context = text_node.browsing_context();
  376. if (!browsing_context.is_focused_context())
  377. return;
  378. if (!browsing_context.cursor_blink_state())
  379. return;
  380. if (browsing_context.cursor_position().node() != &text_node.dom_node())
  381. return;
  382. // NOTE: This checks if the cursor is before the start or after the end of the fragment. If it is at the end, after all text, it should still be painted.
  383. if (browsing_context.cursor_position().offset() < (unsigned)fragment.start() || browsing_context.cursor_position().offset() > (unsigned)(fragment.start() + fragment.length()))
  384. return;
  385. if (!fragment.layout_node().dom_node() || !fragment.layout_node().dom_node()->is_editable())
  386. return;
  387. auto fragment_rect = fragment.absolute_rect();
  388. CSSPixelRect cursor_rect {
  389. fragment_rect.x() + text_node.font().width(fragment.text().substring_view(0, text_node.browsing_context().cursor_position().offset() - fragment.start())),
  390. fragment_rect.top(),
  391. 1,
  392. fragment_rect.height()
  393. };
  394. auto cursor_device_rect = context.rounded_device_rect(cursor_rect).to_type<int>();
  395. context.painter().draw_rect(cursor_device_rect, text_node.computed_values().color());
  396. }
  397. static void paint_text_decoration(PaintContext& context, Gfx::Painter& painter, Layout::Node const& text_node, Layout::LineBoxFragment const& fragment)
  398. {
  399. auto& font = fragment.layout_node().font();
  400. auto fragment_box = fragment.absolute_rect();
  401. CSSPixels glyph_height = font.pixel_size();
  402. auto baseline = fragment_box.height() / 2 - (glyph_height + 4) / 2 + glyph_height;
  403. auto line_color = text_node.computed_values().text_decoration_color();
  404. CSSPixels css_line_thickness = [&] {
  405. CSS::Length computed_thickness = text_node.computed_values().text_decoration_thickness().resolved(text_node, CSS::Length(1, CSS::Length::Type::Em));
  406. if (computed_thickness.is_auto())
  407. return max(glyph_height * 0.1, 1.);
  408. return computed_thickness.to_px(text_node).to_double();
  409. }();
  410. auto device_line_thickness = context.rounded_device_pixels(css_line_thickness);
  411. auto text_decoration_lines = text_node.computed_values().text_decoration_line();
  412. for (auto line : text_decoration_lines) {
  413. DevicePixelPoint line_start_point {};
  414. DevicePixelPoint line_end_point {};
  415. switch (line) {
  416. case CSS::TextDecorationLine::None:
  417. return;
  418. case CSS::TextDecorationLine::Underline:
  419. line_start_point = context.rounded_device_point(fragment_box.top_left().translated(0, baseline + 2));
  420. line_end_point = context.rounded_device_point(fragment_box.top_right().translated(-1, baseline + 2));
  421. break;
  422. case CSS::TextDecorationLine::Overline:
  423. line_start_point = context.rounded_device_point(fragment_box.top_left().translated(0, baseline - glyph_height));
  424. line_end_point = context.rounded_device_point(fragment_box.top_right().translated(-1, baseline - glyph_height));
  425. break;
  426. case CSS::TextDecorationLine::LineThrough: {
  427. auto x_height = font.x_height();
  428. line_start_point = context.rounded_device_point(fragment_box.top_left().translated(0, baseline - x_height * 0.5f));
  429. line_end_point = context.rounded_device_point(fragment_box.top_right().translated(-1, baseline - x_height * 0.5f));
  430. break;
  431. }
  432. case CSS::TextDecorationLine::Blink:
  433. // Conforming user agents may simply not blink the text
  434. return;
  435. }
  436. switch (text_node.computed_values().text_decoration_style()) {
  437. case CSS::TextDecorationStyle::Solid:
  438. painter.draw_line(line_start_point.to_type<int>(), line_end_point.to_type<int>(), line_color, device_line_thickness.value(), Gfx::Painter::LineStyle::Solid);
  439. break;
  440. case CSS::TextDecorationStyle::Double:
  441. switch (line) {
  442. case CSS::TextDecorationLine::Underline:
  443. break;
  444. case CSS::TextDecorationLine::Overline:
  445. line_start_point.translate_by(0, -device_line_thickness - context.rounded_device_pixels(1));
  446. line_end_point.translate_by(0, -device_line_thickness - context.rounded_device_pixels(1));
  447. break;
  448. case CSS::TextDecorationLine::LineThrough:
  449. line_start_point.translate_by(0, -device_line_thickness / 2);
  450. line_end_point.translate_by(0, -device_line_thickness / 2);
  451. break;
  452. default:
  453. VERIFY_NOT_REACHED();
  454. }
  455. painter.draw_line(line_start_point.to_type<int>(), line_end_point.to_type<int>(), line_color, device_line_thickness.value());
  456. painter.draw_line(line_start_point.translated(0, device_line_thickness + 1).to_type<int>(), line_end_point.translated(0, device_line_thickness + 1).to_type<int>(), line_color, device_line_thickness.value());
  457. break;
  458. case CSS::TextDecorationStyle::Dashed:
  459. painter.draw_line(line_start_point.to_type<int>(), line_end_point.to_type<int>(), line_color, device_line_thickness.value(), Gfx::Painter::LineStyle::Dashed);
  460. break;
  461. case CSS::TextDecorationStyle::Dotted:
  462. painter.draw_line(line_start_point.to_type<int>(), line_end_point.to_type<int>(), line_color, device_line_thickness.value(), Gfx::Painter::LineStyle::Dotted);
  463. break;
  464. case CSS::TextDecorationStyle::Wavy:
  465. painter.draw_triangle_wave(line_start_point.to_type<int>(), line_end_point.to_type<int>(), line_color, device_line_thickness.value() + 1, device_line_thickness.value());
  466. break;
  467. }
  468. }
  469. }
  470. static void paint_text_fragment(PaintContext& context, Layout::TextNode const& text_node, Layout::LineBoxFragment const& fragment, PaintPhase phase)
  471. {
  472. auto& painter = context.painter();
  473. if (phase == PaintPhase::Foreground) {
  474. auto fragment_absolute_rect = fragment.absolute_rect();
  475. auto fragment_absolute_device_rect = context.enclosing_device_rect(fragment_absolute_rect);
  476. if (text_node.document().inspected_layout_node() == &text_node)
  477. context.painter().draw_rect(fragment_absolute_device_rect.to_type<int>(), Color::Magenta);
  478. auto text = text_node.text_for_rendering();
  479. DevicePixelPoint baseline_start { fragment_absolute_device_rect.x(), fragment_absolute_device_rect.y() + context.rounded_device_pixels(fragment.baseline()) };
  480. Utf8View view { text.substring_view(fragment.start(), fragment.length()) };
  481. auto& scaled_font = fragment.layout_node().scaled_font(context);
  482. painter.draw_text_run(baseline_start.to_type<int>(), view, scaled_font, text_node.computed_values().color());
  483. auto selection_rect = context.enclosing_device_rect(fragment.selection_rect(text_node.font())).to_type<int>();
  484. if (!selection_rect.is_empty()) {
  485. painter.fill_rect(selection_rect, context.palette().selection());
  486. Gfx::PainterStateSaver saver(painter);
  487. painter.add_clip_rect(selection_rect);
  488. painter.draw_text_run(baseline_start.to_type<int>(), view, scaled_font, context.palette().selection_text());
  489. }
  490. paint_text_decoration(context, painter, text_node, fragment);
  491. paint_cursor_if_needed(context, text_node, fragment);
  492. }
  493. }
  494. void PaintableWithLines::paint(PaintContext& context, PaintPhase phase) const
  495. {
  496. if (!is_visible())
  497. return;
  498. PaintableBox::paint(context, phase);
  499. if (m_line_boxes.is_empty())
  500. return;
  501. bool should_clip_overflow = computed_values().overflow_x() != CSS::Overflow::Visible && computed_values().overflow_y() != CSS::Overflow::Visible;
  502. Optional<BorderRadiusCornerClipper> corner_clipper;
  503. if (should_clip_overflow) {
  504. context.painter().save();
  505. // FIXME: Handle overflow-x and overflow-y being different values.
  506. auto clip_box = context.rounded_device_rect(absolute_padding_box_rect());
  507. context.painter().add_clip_rect(clip_box.to_type<int>());
  508. auto scroll_offset = context.rounded_device_point(static_cast<Layout::BlockContainer const&>(layout_box()).scroll_offset());
  509. context.painter().translate(-scroll_offset.to_type<int>());
  510. auto border_radii = normalized_border_radii_data(ShrinkRadiiForBorders::Yes);
  511. if (border_radii.has_any_radius()) {
  512. auto clipper = BorderRadiusCornerClipper::create(context, clip_box, border_radii);
  513. if (!clipper.is_error()) {
  514. corner_clipper = clipper.release_value();
  515. corner_clipper->sample_under_corners(context.painter());
  516. }
  517. }
  518. }
  519. // Text shadows
  520. // This is yet another loop, but done here because all shadows should appear under all text.
  521. // So, we paint the shadows before painting any text.
  522. // FIXME: Find a smarter way to do this?
  523. if (phase == PaintPhase::Foreground) {
  524. for (auto& line_box : m_line_boxes) {
  525. for (auto& fragment : line_box.fragments()) {
  526. if (is<Layout::TextNode>(fragment.layout_node())) {
  527. auto& text_shadow = fragment.layout_node().computed_values().text_shadow();
  528. if (!text_shadow.is_empty()) {
  529. Vector<ShadowData> resolved_shadow_data;
  530. resolved_shadow_data.ensure_capacity(text_shadow.size());
  531. for (auto const& layer : text_shadow) {
  532. resolved_shadow_data.empend(
  533. layer.color,
  534. layer.offset_x.to_px(layout_box()),
  535. layer.offset_y.to_px(layout_box()),
  536. layer.blur_radius.to_px(layout_box()),
  537. layer.spread_distance.to_px(layout_box()),
  538. ShadowPlacement::Outer);
  539. }
  540. context.painter().set_font(fragment.layout_node().font());
  541. paint_text_shadow(context, fragment, resolved_shadow_data);
  542. }
  543. }
  544. }
  545. }
  546. }
  547. for (auto& line_box : m_line_boxes) {
  548. for (auto& fragment : line_box.fragments()) {
  549. auto fragment_absolute_rect = fragment.absolute_rect();
  550. auto fragment_absolute_device_rect = context.enclosing_device_rect(fragment_absolute_rect);
  551. if (context.would_be_fully_clipped_by_painter(fragment_absolute_device_rect))
  552. continue;
  553. if (context.should_show_line_box_borders()) {
  554. context.painter().draw_rect(fragment_absolute_device_rect.to_type<int>(), Color::Green);
  555. context.painter().draw_line(
  556. context.rounded_device_point(fragment_absolute_rect.top_left().translated(0, fragment.baseline())).to_type<int>(),
  557. context.rounded_device_point(fragment_absolute_rect.top_right().translated(-1, fragment.baseline())).to_type<int>(), Color::Red);
  558. }
  559. if (is<Layout::TextNode>(fragment.layout_node()))
  560. paint_text_fragment(context, static_cast<Layout::TextNode const&>(fragment.layout_node()), fragment, phase);
  561. }
  562. }
  563. if (should_clip_overflow) {
  564. context.painter().restore();
  565. if (corner_clipper.has_value())
  566. corner_clipper->blit_corner_clipping(context.painter());
  567. }
  568. }
  569. bool PaintableBox::handle_mousewheel(Badge<EventHandler>, CSSPixelPoint, unsigned, unsigned, int wheel_delta_x, int wheel_delta_y)
  570. {
  571. if (!layout_box().is_scrollable())
  572. return false;
  573. auto max_x_offset = scrollable_overflow_rect()->width() - content_size().width();
  574. auto max_y_offset = scrollable_overflow_rect()->height() - content_size().height();
  575. auto current_offset = layout_box().scroll_offset();
  576. auto new_offset_x = clamp(current_offset.x() + wheel_delta_x, 0, max_x_offset);
  577. auto new_offset_y = clamp(current_offset.y() + wheel_delta_y, 0, max_y_offset);
  578. layout_box().set_scroll_offset({ new_offset_x, new_offset_y });
  579. return true;
  580. }
  581. Layout::BlockContainer const& PaintableWithLines::layout_box() const
  582. {
  583. return static_cast<Layout::BlockContainer const&>(PaintableBox::layout_box());
  584. }
  585. Layout::BlockContainer& PaintableWithLines::layout_box()
  586. {
  587. return static_cast<Layout::BlockContainer&>(PaintableBox::layout_box());
  588. }
  589. void PaintableBox::set_stacking_context(NonnullOwnPtr<StackingContext> stacking_context)
  590. {
  591. m_stacking_context = move(stacking_context);
  592. }
  593. Optional<HitTestResult> PaintableBox::hit_test(CSSPixelPoint position, HitTestType type) const
  594. {
  595. if (!is_visible())
  596. return {};
  597. if (layout_box().is_viewport()) {
  598. const_cast<Layout::Viewport&>(static_cast<Layout::Viewport const&>(layout_box())).build_stacking_context_tree_if_needed();
  599. return stacking_context()->hit_test(position, type);
  600. }
  601. if (!absolute_border_box_rect().contains(position.x(), position.y()))
  602. return {};
  603. for (auto* child = first_child(); child; child = child->next_sibling()) {
  604. auto result = child->hit_test(position, type);
  605. if (!result.has_value())
  606. continue;
  607. if (!result->paintable->visible_for_hit_testing())
  608. continue;
  609. return result;
  610. }
  611. if (!visible_for_hit_testing())
  612. return {};
  613. return HitTestResult { const_cast<PaintableBox&>(*this) };
  614. }
  615. Optional<HitTestResult> PaintableWithLines::hit_test(CSSPixelPoint position, HitTestType type) const
  616. {
  617. if (!layout_box().children_are_inline())
  618. return PaintableBox::hit_test(position, type);
  619. Optional<HitTestResult> last_good_candidate;
  620. for (auto& line_box : m_line_boxes) {
  621. for (auto& fragment : line_box.fragments()) {
  622. if (is<Layout::Box>(fragment.layout_node()) && static_cast<Layout::Box const&>(fragment.layout_node()).paintable_box()->stacking_context())
  623. continue;
  624. if (!fragment.layout_node().containing_block()) {
  625. dbgln("FIXME: PaintableWithLines::hit_test(): Missing containing block on {}", fragment.layout_node().debug_description());
  626. continue;
  627. }
  628. auto fragment_absolute_rect = fragment.absolute_rect();
  629. if (fragment_absolute_rect.contains(position)) {
  630. if (is<Layout::BlockContainer>(fragment.layout_node()) && fragment.layout_node().paintable())
  631. return fragment.layout_node().paintable()->hit_test(position, type);
  632. return HitTestResult { const_cast<Paintable&>(const_cast<Paintable&>(*fragment.layout_node().paintable())), fragment.text_index_at(position.x()) };
  633. }
  634. // If we reached this point, the position is not within the fragment. However, the fragment start or end might be the place to place the cursor.
  635. // This determines whether the fragment is a good candidate for the position. The last such good fragment is chosen.
  636. // The best candidate is either the end of the line above, the beginning of the line below, or the beginning or end of the current line.
  637. // We arbitrarily choose to consider the end of the line above and ignore the beginning of the line below.
  638. // If we knew the direction of selection, we could make a better choice.
  639. if (fragment_absolute_rect.bottom() - 1 <= position.y()) { // fully below the fragment
  640. last_good_candidate = HitTestResult { const_cast<Paintable&>(*fragment.layout_node().paintable()), fragment.start() + fragment.length() };
  641. } else if (fragment_absolute_rect.top() <= position.y()) { // vertically within the fragment
  642. if (position.x() < fragment_absolute_rect.left()) { // left of the fragment
  643. if (!last_good_candidate.has_value()) { // first fragment of the line
  644. last_good_candidate = HitTestResult { const_cast<Paintable&>(*fragment.layout_node().paintable()), fragment.start() };
  645. }
  646. } else { // right of the fragment
  647. last_good_candidate = HitTestResult { const_cast<Paintable&>(*fragment.layout_node().paintable()), fragment.start() + fragment.length() };
  648. }
  649. }
  650. }
  651. }
  652. if (type == HitTestType::TextCursor && last_good_candidate.has_value())
  653. return last_good_candidate;
  654. if (is_visible() && absolute_border_box_rect().contains(position.x(), position.y()))
  655. return HitTestResult { const_cast<PaintableWithLines&>(*this) };
  656. return {};
  657. }
  658. }