PaintableBox.cpp 54 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175
  1. /*
  2. * Copyright (c) 2022-2023, Andreas Kling <kling@serenityos.org>
  3. * Copyright (c) 2022-2023, Sam Atkins <atkinssj@serenityos.org>
  4. *
  5. * SPDX-License-Identifier: BSD-2-Clause
  6. */
  7. #include <AK/GenericShorthands.h>
  8. #include <LibGfx/Font/ScaledFont.h>
  9. #include <LibGfx/Painter.h>
  10. #include <LibUnicode/CharacterTypes.h>
  11. #include <LibWeb/CSS/SystemColor.h>
  12. #include <LibWeb/DOM/Document.h>
  13. #include <LibWeb/HTML/HTMLHtmlElement.h>
  14. #include <LibWeb/HTML/Window.h>
  15. #include <LibWeb/Layout/BlockContainer.h>
  16. #include <LibWeb/Layout/Viewport.h>
  17. #include <LibWeb/Painting/BackgroundPainting.h>
  18. #include <LibWeb/Painting/PaintableBox.h>
  19. #include <LibWeb/Painting/SVGPaintable.h>
  20. #include <LibWeb/Painting/SVGSVGPaintable.h>
  21. #include <LibWeb/Painting/StackingContext.h>
  22. #include <LibWeb/Painting/TableBordersPainting.h>
  23. #include <LibWeb/Painting/TextPaintable.h>
  24. #include <LibWeb/Painting/ViewportPaintable.h>
  25. #include <LibWeb/Platform/FontPlugin.h>
  26. namespace Web::Painting {
  27. JS::NonnullGCPtr<PaintableWithLines> PaintableWithLines::create(Layout::BlockContainer const& block_container)
  28. {
  29. return block_container.heap().allocate_without_realm<PaintableWithLines>(block_container);
  30. }
  31. JS::NonnullGCPtr<PaintableBox> PaintableBox::create(Layout::Box const& layout_box)
  32. {
  33. return layout_box.heap().allocate_without_realm<PaintableBox>(layout_box);
  34. }
  35. PaintableBox::PaintableBox(Layout::Box const& layout_box)
  36. : Paintable(layout_box)
  37. {
  38. }
  39. PaintableBox::~PaintableBox()
  40. {
  41. }
  42. PaintableWithLines::PaintableWithLines(Layout::BlockContainer const& layout_box)
  43. : PaintableBox(layout_box)
  44. {
  45. }
  46. PaintableWithLines::~PaintableWithLines()
  47. {
  48. }
  49. CSSPixelPoint PaintableBox::scroll_offset() const
  50. {
  51. if (is_viewport()) {
  52. auto navigable = document().navigable();
  53. VERIFY(navigable);
  54. return navigable->viewport_scroll_offset();
  55. }
  56. auto const& node = layout_node();
  57. if (node.is_generated_for_before_pseudo_element())
  58. return node.pseudo_element_generator()->scroll_offset(DOM::Element::ScrollOffsetFor::PseudoBefore);
  59. if (node.is_generated_for_after_pseudo_element())
  60. return node.pseudo_element_generator()->scroll_offset(DOM::Element::ScrollOffsetFor::PseudoAfter);
  61. if (!(dom_node() && is<DOM::Element>(*dom_node())))
  62. return {};
  63. return static_cast<DOM::Element const*>(dom_node())->scroll_offset(DOM::Element::ScrollOffsetFor::Self);
  64. }
  65. void PaintableBox::set_scroll_offset(CSSPixelPoint offset)
  66. {
  67. auto scrollable_overflow_rect = this->scrollable_overflow_rect();
  68. if (!scrollable_overflow_rect.has_value())
  69. return;
  70. document().set_needs_to_refresh_clip_state(true);
  71. document().set_needs_to_refresh_scroll_state(true);
  72. auto padding_rect = absolute_padding_box_rect();
  73. auto max_x_offset = max(scrollable_overflow_rect->width() - padding_rect.width(), 0);
  74. auto max_y_offset = max(scrollable_overflow_rect->height() - padding_rect.height(), 0);
  75. offset.set_x(clamp(offset.x(), 0, max_x_offset));
  76. offset.set_y(clamp(offset.y(), 0, max_y_offset));
  77. // FIXME: If there is horizontal and vertical scroll ignore only part of the new offset
  78. if (offset.y() < 0 || scroll_offset() == offset)
  79. return;
  80. auto& node = layout_node();
  81. if (node.is_generated_for_before_pseudo_element()) {
  82. node.pseudo_element_generator()->set_scroll_offset(DOM::Element::ScrollOffsetFor::PseudoBefore, offset);
  83. } else if (node.is_generated_for_after_pseudo_element()) {
  84. node.pseudo_element_generator()->set_scroll_offset(DOM::Element::ScrollOffsetFor::PseudoAfter, offset);
  85. } else if (is<DOM::Element>(*dom_node())) {
  86. static_cast<DOM::Element*>(dom_node())->set_scroll_offset(DOM::Element::ScrollOffsetFor::Self, offset);
  87. } else {
  88. return;
  89. }
  90. // https://drafts.csswg.org/cssom-view-1/#scrolling-events
  91. // Whenever an element gets scrolled (whether in response to user interaction or by an API),
  92. // the user agent must run these steps:
  93. // 1. Let doc be the element’s node document.
  94. auto& document = layout_box().document();
  95. // FIXME: 2. If the element is a snap container, run the steps to update snapchanging targets for the element with
  96. // the element’s eventual snap target in the block axis as newBlockTarget and the element’s eventual snap
  97. // target in the inline axis as newInlineTarget.
  98. JS::NonnullGCPtr<DOM::EventTarget> const event_target = *dom_node();
  99. // 3. If the element is already in doc’s pending scroll event targets, abort these steps.
  100. if (document.pending_scroll_event_targets().contains_slow(event_target))
  101. return;
  102. // 4. Append the element to doc’s pending scroll event targets.
  103. document.pending_scroll_event_targets().append(*layout_box().dom_node());
  104. set_needs_display();
  105. }
  106. void PaintableBox::scroll_by(int delta_x, int delta_y)
  107. {
  108. set_scroll_offset(scroll_offset().translated(delta_x, delta_y));
  109. }
  110. void PaintableBox::set_offset(CSSPixelPoint offset)
  111. {
  112. m_offset = offset;
  113. }
  114. void PaintableBox::set_content_size(CSSPixelSize size)
  115. {
  116. m_content_size = size;
  117. layout_box().did_set_content_size();
  118. }
  119. CSSPixelPoint PaintableBox::offset() const
  120. {
  121. return m_offset;
  122. }
  123. CSSPixelRect PaintableBox::compute_absolute_rect() const
  124. {
  125. CSSPixelRect rect { offset(), content_size() };
  126. for (auto const* block = containing_block(); block; block = block->containing_block())
  127. rect.translate_by(block->offset());
  128. return rect;
  129. }
  130. CSSPixelRect PaintableBox::compute_absolute_padding_rect_with_css_transform_applied() const
  131. {
  132. auto rect = absolute_rect();
  133. auto scroll_offset = this->enclosing_scroll_frame_offset();
  134. if (scroll_offset.has_value())
  135. rect.translate_by(scroll_offset.value());
  136. rect.translate_by(combined_css_transform().translation().to_type<CSSPixels>());
  137. CSSPixelRect padding_rect;
  138. padding_rect.set_x(rect.x() - box_model().padding.left);
  139. padding_rect.set_width(content_width() + box_model().padding.left + box_model().padding.right);
  140. padding_rect.set_y(rect.y() - box_model().padding.top);
  141. padding_rect.set_height(content_height() + box_model().padding.top + box_model().padding.bottom);
  142. return padding_rect;
  143. }
  144. CSSPixelRect PaintableBox::absolute_rect() const
  145. {
  146. if (!m_absolute_rect.has_value())
  147. m_absolute_rect = compute_absolute_rect();
  148. return *m_absolute_rect;
  149. }
  150. CSSPixelRect PaintableBox::compute_absolute_paint_rect() const
  151. {
  152. // FIXME: This likely incomplete:
  153. auto rect = absolute_border_box_rect();
  154. if (has_scrollable_overflow()) {
  155. auto scrollable_overflow_rect = this->scrollable_overflow_rect().value();
  156. if (computed_values().overflow_x() == CSS::Overflow::Visible)
  157. rect.unite_horizontally(scrollable_overflow_rect);
  158. if (computed_values().overflow_y() == CSS::Overflow::Visible)
  159. rect.unite_vertically(scrollable_overflow_rect);
  160. }
  161. for (auto const& shadow : box_shadow_data()) {
  162. if (shadow.placement == ShadowPlacement::Inner)
  163. continue;
  164. auto inflate = shadow.spread_distance + shadow.blur_radius;
  165. auto shadow_rect = rect.inflated(inflate, inflate, inflate, inflate).translated(shadow.offset_x, shadow.offset_y);
  166. rect = rect.united(shadow_rect);
  167. }
  168. return rect;
  169. }
  170. CSSPixelRect PaintableBox::absolute_paint_rect() const
  171. {
  172. if (!m_absolute_paint_rect.has_value())
  173. m_absolute_paint_rect = compute_absolute_paint_rect();
  174. return *m_absolute_paint_rect;
  175. }
  176. Optional<CSSPixelRect> PaintableBox::get_clip_rect() const
  177. {
  178. auto clip = computed_values().clip();
  179. if (clip.is_rect() && layout_box().is_absolutely_positioned()) {
  180. auto border_box = absolute_border_box_rect();
  181. return clip.to_rect().resolved(layout_node(), border_box);
  182. }
  183. return {};
  184. }
  185. bool PaintableBox::wants_mouse_events() const
  186. {
  187. if (scroll_thumb_rect(ScrollDirection::Vertical).has_value())
  188. return true;
  189. if (scroll_thumb_rect(ScrollDirection::Horizontal).has_value())
  190. return true;
  191. return false;
  192. }
  193. void PaintableBox::before_paint(PaintContext& context, [[maybe_unused]] PaintPhase phase) const
  194. {
  195. if (!is_visible())
  196. return;
  197. apply_clip_overflow_rect(context, phase);
  198. apply_scroll_offset(context, phase);
  199. }
  200. void PaintableBox::after_paint(PaintContext& context, [[maybe_unused]] PaintPhase phase) const
  201. {
  202. if (!is_visible())
  203. return;
  204. reset_scroll_offset(context, phase);
  205. clear_clip_overflow_rect(context, phase);
  206. }
  207. bool PaintableBox::is_scrollable(ScrollDirection direction) const
  208. {
  209. auto overflow = direction == ScrollDirection::Horizontal ? computed_values().overflow_x() : computed_values().overflow_y();
  210. auto scrollable_overflow_size = direction == ScrollDirection::Horizontal ? scrollable_overflow_rect()->width() : scrollable_overflow_rect()->height();
  211. auto scrollport_size = direction == ScrollDirection::Horizontal ? absolute_padding_box_rect().width() : absolute_padding_box_rect().height();
  212. if (is_viewport() || overflow == CSS::Overflow::Auto)
  213. return scrollable_overflow_size > scrollport_size;
  214. return overflow == CSS::Overflow::Scroll;
  215. }
  216. static constexpr CSSPixels scrollbar_thumb_thickness = 8;
  217. Optional<CSSPixelRect> PaintableBox::scroll_thumb_rect(ScrollDirection direction) const
  218. {
  219. if (!is_scrollable(direction))
  220. return {};
  221. auto padding_rect = absolute_padding_box_rect();
  222. auto scrollable_overflow_rect = this->scrollable_overflow_rect().value();
  223. auto scroll_overflow_size = direction == ScrollDirection::Horizontal ? scrollable_overflow_rect.width() : scrollable_overflow_rect.height();
  224. auto scrollport_size = direction == ScrollDirection::Horizontal ? padding_rect.width() : padding_rect.height();
  225. auto scroll_offset = direction == ScrollDirection::Horizontal ? this->scroll_offset().x() : this->scroll_offset().y();
  226. if (scroll_overflow_size == 0)
  227. return {};
  228. auto thumb_size = scrollport_size * (scrollport_size / scroll_overflow_size);
  229. CSSPixels thumb_position = 0;
  230. if (scroll_overflow_size > scrollport_size)
  231. thumb_position = scroll_offset * (scrollport_size - thumb_size) / (scroll_overflow_size - scrollport_size);
  232. CSSPixelRect thumb_rect;
  233. if (direction == ScrollDirection::Horizontal) {
  234. thumb_rect = {
  235. padding_rect.left() + thumb_position,
  236. padding_rect.bottom() - scrollbar_thumb_thickness,
  237. thumb_size,
  238. scrollbar_thumb_thickness
  239. };
  240. } else {
  241. thumb_rect = {
  242. padding_rect.right() - scrollbar_thumb_thickness,
  243. padding_rect.top() + thumb_position,
  244. scrollbar_thumb_thickness,
  245. thumb_size
  246. };
  247. }
  248. if (is_viewport())
  249. thumb_rect.translate_by(this->scroll_offset());
  250. return thumb_rect;
  251. }
  252. void PaintableBox::paint(PaintContext& context, PaintPhase phase) const
  253. {
  254. if (!is_visible())
  255. return;
  256. if (phase == PaintPhase::Background) {
  257. paint_backdrop_filter(context);
  258. paint_background(context);
  259. paint_box_shadow(context);
  260. }
  261. auto const is_table_with_collapsed_borders = display().is_table_inside() && computed_values().border_collapse() == CSS::BorderCollapse::Collapse;
  262. if (!display().is_table_cell() && !is_table_with_collapsed_borders && phase == PaintPhase::Border) {
  263. paint_border(context);
  264. }
  265. if ((display().is_table_inside() || computed_values().border_collapse() == CSS::BorderCollapse::Collapse) && phase == PaintPhase::TableCollapsedBorder) {
  266. paint_table_borders(context, *this);
  267. }
  268. if (phase == PaintPhase::Outline) {
  269. auto const& outline_data = this->outline_data();
  270. if (outline_data.has_value()) {
  271. auto outline_offset = this->outline_offset();
  272. auto border_radius_data = normalized_border_radii_data(ShrinkRadiiForBorders::No);
  273. auto borders_rect = absolute_border_box_rect();
  274. auto outline_offset_x = outline_offset;
  275. auto outline_offset_y = outline_offset;
  276. // "Both the height and the width of the outside of the shape drawn by the outline should not
  277. // become smaller than twice the computed value of the outline-width property to make sure
  278. // that an outline can be rendered even with large negative values."
  279. // https://www.w3.org/TR/css-ui-4/#outline-offset
  280. // So, if the horizontal outline offset is > half the borders_rect's width then we set it to that.
  281. // (And the same for y)
  282. if ((borders_rect.width() / 2) + outline_offset_x < 0)
  283. outline_offset_x = -borders_rect.width() / 2;
  284. if ((borders_rect.height() / 2) + outline_offset_y < 0)
  285. outline_offset_y = -borders_rect.height() / 2;
  286. border_radius_data.inflate(outline_data->top.width + outline_offset_y, outline_data->right.width + outline_offset_x, outline_data->bottom.width + outline_offset_y, outline_data->left.width + outline_offset_x);
  287. borders_rect.inflate(outline_data->top.width + outline_offset_y, outline_data->right.width + outline_offset_x, outline_data->bottom.width + outline_offset_y, outline_data->left.width + outline_offset_x);
  288. paint_all_borders(context.display_list_recorder(), context.rounded_device_rect(borders_rect), border_radius_data.as_corners(context), outline_data->to_device_pixels(context));
  289. }
  290. }
  291. auto scrollbar_width = computed_values().scrollbar_width();
  292. if (phase == PaintPhase::Overlay && scrollbar_width != CSS::ScrollbarWidth::None) {
  293. auto color = Color(Color::NamedColor::DarkGray).with_alpha(128);
  294. auto border_color = Color(Color::NamedColor::LightGray).with_alpha(128);
  295. auto borders_data = BordersDataDevicePixels {
  296. .top = BorderDataDevicePixels { border_color, CSS::LineStyle::Solid, 1 },
  297. .right = BorderDataDevicePixels { border_color, CSS::LineStyle::Solid, 1 },
  298. .bottom = BorderDataDevicePixels { border_color, CSS::LineStyle::Solid, 1 },
  299. .left = BorderDataDevicePixels { border_color, CSS::LineStyle::Solid, 1 },
  300. };
  301. int thumb_corner_radius = static_cast<int>(context.rounded_device_pixels(scrollbar_thumb_thickness / 2));
  302. CornerRadii corner_radii = {
  303. .top_left = Gfx::AntiAliasingPainter::CornerRadius { thumb_corner_radius, thumb_corner_radius },
  304. .top_right = Gfx::AntiAliasingPainter::CornerRadius { thumb_corner_radius, thumb_corner_radius },
  305. .bottom_right = Gfx::AntiAliasingPainter::CornerRadius { thumb_corner_radius, thumb_corner_radius },
  306. .bottom_left = Gfx::AntiAliasingPainter::CornerRadius { thumb_corner_radius, thumb_corner_radius },
  307. };
  308. if (auto thumb_rect = scroll_thumb_rect(ScrollDirection::Horizontal); thumb_rect.has_value()) {
  309. auto thumb_device_rect = context.enclosing_device_rect(thumb_rect.value());
  310. paint_all_borders(context.display_list_recorder(), thumb_device_rect, corner_radii, borders_data);
  311. context.display_list_recorder().fill_rect_with_rounded_corners(thumb_device_rect.to_type<int>(), color, thumb_corner_radius);
  312. }
  313. if (auto thumb_rect = scroll_thumb_rect(ScrollDirection::Vertical); thumb_rect.has_value()) {
  314. auto thumb_device_rect = context.enclosing_device_rect(thumb_rect.value());
  315. paint_all_borders(context.display_list_recorder(), thumb_device_rect, corner_radii, borders_data);
  316. context.display_list_recorder().fill_rect_with_rounded_corners(thumb_device_rect.to_type<int>(), color, thumb_corner_radius);
  317. }
  318. }
  319. if (phase == PaintPhase::Overlay && layout_box().document().inspected_layout_node() == &layout_box()) {
  320. auto content_rect = absolute_rect();
  321. auto margin_box = box_model().margin_box();
  322. CSSPixelRect margin_rect;
  323. margin_rect.set_x(absolute_x() - margin_box.left);
  324. margin_rect.set_width(content_width() + margin_box.left + margin_box.right);
  325. margin_rect.set_y(absolute_y() - margin_box.top);
  326. margin_rect.set_height(content_height() + margin_box.top + margin_box.bottom);
  327. auto border_rect = absolute_border_box_rect();
  328. auto padding_rect = absolute_padding_box_rect();
  329. auto paint_inspector_rect = [&](CSSPixelRect const& rect, Color color) {
  330. auto device_rect = context.enclosing_device_rect(rect).to_type<int>();
  331. context.display_list_recorder().fill_rect(device_rect, Color(color).with_alpha(100));
  332. context.display_list_recorder().draw_rect(device_rect, Color(color));
  333. };
  334. paint_inspector_rect(margin_rect, Color::Yellow);
  335. paint_inspector_rect(padding_rect, Color::Cyan);
  336. paint_inspector_rect(border_rect, Color::Green);
  337. paint_inspector_rect(content_rect, Color::Magenta);
  338. auto& font = Platform::FontPlugin::the().default_font();
  339. StringBuilder builder;
  340. if (layout_box().dom_node())
  341. builder.append(layout_box().dom_node()->debug_description());
  342. else
  343. builder.append(layout_box().debug_description());
  344. builder.appendff(" {}x{} @ {},{}", border_rect.width(), border_rect.height(), border_rect.x(), border_rect.y());
  345. auto size_text = MUST(builder.to_string());
  346. auto size_text_rect = border_rect;
  347. size_text_rect.set_y(border_rect.y() + border_rect.height());
  348. size_text_rect.set_top(size_text_rect.top());
  349. size_text_rect.set_width(CSSPixels::nearest_value_for(font.width(size_text)) + 4);
  350. size_text_rect.set_height(CSSPixels::nearest_value_for(font.pixel_size()) + 4);
  351. auto size_text_device_rect = context.enclosing_device_rect(size_text_rect).to_type<int>();
  352. context.display_list_recorder().fill_rect(size_text_device_rect, context.palette().color(Gfx::ColorRole::Tooltip));
  353. context.display_list_recorder().draw_rect(size_text_device_rect, context.palette().threed_shadow1());
  354. context.display_list_recorder().draw_text(size_text_device_rect, size_text, font, Gfx::TextAlignment::Center, context.palette().color(Gfx::ColorRole::TooltipText));
  355. }
  356. }
  357. BordersData PaintableBox::remove_element_kind_from_borders_data(PaintableBox::BordersDataWithElementKind borders_data)
  358. {
  359. return {
  360. .top = borders_data.top.border_data,
  361. .right = borders_data.right.border_data,
  362. .bottom = borders_data.bottom.border_data,
  363. .left = borders_data.left.border_data,
  364. };
  365. }
  366. void PaintableBox::paint_border(PaintContext& context) const
  367. {
  368. auto borders_data = m_override_borders_data.has_value() ? remove_element_kind_from_borders_data(m_override_borders_data.value()) : BordersData {
  369. .top = box_model().border.top == 0 ? CSS::BorderData() : computed_values().border_top(),
  370. .right = box_model().border.right == 0 ? CSS::BorderData() : computed_values().border_right(),
  371. .bottom = box_model().border.bottom == 0 ? CSS::BorderData() : computed_values().border_bottom(),
  372. .left = box_model().border.left == 0 ? CSS::BorderData() : computed_values().border_left(),
  373. };
  374. paint_all_borders(context.display_list_recorder(), context.rounded_device_rect(absolute_border_box_rect()), normalized_border_radii_data().as_corners(context), borders_data.to_device_pixels(context));
  375. }
  376. void PaintableBox::paint_backdrop_filter(PaintContext& context) const
  377. {
  378. auto const& backdrop_filter = computed_values().backdrop_filter();
  379. if (backdrop_filter.is_none()) {
  380. return;
  381. }
  382. auto backdrop_region = context.rounded_device_rect(absolute_border_box_rect());
  383. auto border_radii_data = normalized_border_radii_data();
  384. ScopedCornerRadiusClip corner_clipper { context, backdrop_region, border_radii_data };
  385. context.display_list_recorder().apply_backdrop_filter(backdrop_region.to_type<int>(), border_radii_data, backdrop_filter);
  386. }
  387. void PaintableBox::paint_background(PaintContext& context) const
  388. {
  389. // If the body's background properties were propagated to the root element, do no re-paint the body's background.
  390. if (layout_box().is_body() && document().html_element()->should_use_body_background_properties())
  391. return;
  392. CSSPixelRect background_rect;
  393. Color background_color = computed_values().background_color();
  394. auto* background_layers = &computed_values().background_layers();
  395. if (layout_box().is_root_element()) {
  396. // CSS 2.1 Appendix E.2: If the element is a root element, paint the background over the entire canvas.
  397. background_rect = context.css_viewport_rect();
  398. // Section 2.11.2: If the computed value of background-image on the root element is none and its background-color is transparent,
  399. // user agents must instead propagate the computed values of the background properties from that element’s first HTML BODY child element.
  400. if (document().html_element()->should_use_body_background_properties()) {
  401. background_layers = document().background_layers();
  402. background_color = document().background_color();
  403. }
  404. } else {
  405. background_rect = absolute_padding_box_rect();
  406. }
  407. // HACK: If the Box has a border, use the bordered_rect to paint the background.
  408. // This way if we have a border-radius there will be no gap between the filling and actual border.
  409. 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)
  410. background_rect = absolute_border_box_rect();
  411. Painting::paint_background(context, layout_box(), background_rect, background_color, computed_values().image_rendering(), background_layers, normalized_border_radii_data());
  412. }
  413. void PaintableBox::paint_box_shadow(PaintContext& context) const
  414. {
  415. auto const& resolved_box_shadow_data = box_shadow_data();
  416. if (resolved_box_shadow_data.is_empty())
  417. return;
  418. auto borders_data = BordersData {
  419. .top = computed_values().border_top(),
  420. .right = computed_values().border_right(),
  421. .bottom = computed_values().border_bottom(),
  422. .left = computed_values().border_left(),
  423. };
  424. Painting::paint_box_shadow(context, absolute_border_box_rect(), absolute_padding_box_rect(),
  425. borders_data, normalized_border_radii_data(), resolved_box_shadow_data);
  426. }
  427. BorderRadiiData PaintableBox::normalized_border_radii_data(ShrinkRadiiForBorders shrink) const
  428. {
  429. auto border_radii_data = this->border_radii_data();
  430. if (shrink == ShrinkRadiiForBorders::Yes)
  431. border_radii_data.shrink(computed_values().border_top().width, computed_values().border_right().width, computed_values().border_bottom().width, computed_values().border_left().width);
  432. return border_radii_data;
  433. }
  434. void PaintableBox::apply_scroll_offset(PaintContext& context, PaintPhase) const
  435. {
  436. if (scroll_frame_id().has_value()) {
  437. context.display_list_recorder().save();
  438. context.display_list_recorder().set_scroll_frame_id(scroll_frame_id().value());
  439. }
  440. }
  441. void PaintableBox::reset_scroll_offset(PaintContext& context, PaintPhase) const
  442. {
  443. if (scroll_frame_id().has_value())
  444. context.display_list_recorder().restore();
  445. }
  446. void PaintableBox::apply_clip_overflow_rect(PaintContext& context, PaintPhase phase) const
  447. {
  448. if (!AK::first_is_one_of(phase, PaintPhase::Background, PaintPhase::Border, PaintPhase::TableCollapsedBorder, PaintPhase::Foreground, PaintPhase::Outline))
  449. return;
  450. if (clip_rect().has_value()) {
  451. auto overflow_clip_rect = clip_rect().value();
  452. context.display_list_recorder().save();
  453. context.display_list_recorder().add_clip_rect(context.enclosing_device_rect(overflow_clip_rect).to_type<int>());
  454. auto const& border_radii_clips = this->border_radii_clips();
  455. auto const& combined_transform = combined_css_transform();
  456. for (size_t corner_clip_index = 0; corner_clip_index < border_radii_clips.size(); ++corner_clip_index) {
  457. auto const& corner_clip = border_radii_clips[corner_clip_index];
  458. auto corners = corner_clip.radii.as_corners(context);
  459. if (!corners.has_any_radius())
  460. continue;
  461. auto rect = corner_clip.rect.translated(-combined_transform.translation().to_type<CSSPixels>());
  462. context.display_list_recorder().add_rounded_rect_clip(corner_clip.radii.as_corners(context), context.rounded_device_rect(rect).to_type<int>(), CornerClip::Outside);
  463. }
  464. }
  465. }
  466. void PaintableBox::clear_clip_overflow_rect(PaintContext& context, PaintPhase phase) const
  467. {
  468. if (!AK::first_is_one_of(phase, PaintPhase::Background, PaintPhase::Border, PaintPhase::TableCollapsedBorder, PaintPhase::Foreground, PaintPhase::Outline))
  469. return;
  470. if (clip_rect().has_value()) {
  471. context.display_list_recorder().restore();
  472. }
  473. }
  474. void paint_cursor_if_needed(PaintContext& context, TextPaintable const& paintable, PaintableFragment const& fragment)
  475. {
  476. auto const& navigable = *paintable.navigable();
  477. if (!navigable.is_focused())
  478. return;
  479. if (!navigable.cursor_blink_state())
  480. return;
  481. if (navigable.cursor_position()->node() != paintable.dom_node())
  482. return;
  483. // 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.
  484. if (navigable.cursor_position()->offset() < (unsigned)fragment.start() || navigable.cursor_position()->offset() > (unsigned)(fragment.start() + fragment.length()))
  485. return;
  486. if (!fragment.layout_node().dom_node() || !fragment.layout_node().dom_node()->is_editable())
  487. return;
  488. auto fragment_rect = fragment.absolute_rect();
  489. auto text = fragment.string_view();
  490. CSSPixelRect cursor_rect {
  491. fragment_rect.x() + CSSPixels::nearest_value_for(paintable.layout_node().first_available_font().width(text.substring_view(0, navigable.cursor_position()->offset() - fragment.start()))),
  492. fragment_rect.top(),
  493. 1,
  494. fragment_rect.height()
  495. };
  496. auto cursor_device_rect = context.rounded_device_rect(cursor_rect).to_type<int>();
  497. context.display_list_recorder().draw_rect(cursor_device_rect, paintable.computed_values().color());
  498. }
  499. void paint_text_decoration(PaintContext& context, TextPaintable const& paintable, PaintableFragment const& fragment)
  500. {
  501. auto& painter = context.display_list_recorder();
  502. auto& font = fragment.layout_node().first_available_font();
  503. auto fragment_box = fragment.absolute_rect();
  504. CSSPixels glyph_height = CSSPixels::nearest_value_for(font.pixel_size());
  505. auto baseline = fragment.baseline();
  506. auto line_color = paintable.computed_values().text_decoration_color();
  507. auto const& text_paintable = static_cast<TextPaintable const&>(fragment.paintable());
  508. auto device_line_thickness = context.rounded_device_pixels(text_paintable.text_decoration_thickness());
  509. auto text_decoration_lines = paintable.computed_values().text_decoration_line();
  510. for (auto line : text_decoration_lines) {
  511. DevicePixelPoint line_start_point {};
  512. DevicePixelPoint line_end_point {};
  513. switch (line) {
  514. case CSS::TextDecorationLine::None:
  515. return;
  516. case CSS::TextDecorationLine::Underline:
  517. line_start_point = context.rounded_device_point(fragment_box.top_left().translated(0, baseline + 2));
  518. line_end_point = context.rounded_device_point(fragment_box.top_right().translated(-1, baseline + 2));
  519. break;
  520. case CSS::TextDecorationLine::Overline:
  521. line_start_point = context.rounded_device_point(fragment_box.top_left().translated(0, baseline - glyph_height));
  522. line_end_point = context.rounded_device_point(fragment_box.top_right().translated(-1, baseline - glyph_height));
  523. break;
  524. case CSS::TextDecorationLine::LineThrough: {
  525. auto x_height = font.x_height();
  526. line_start_point = context.rounded_device_point(fragment_box.top_left().translated(0, baseline - x_height * CSSPixels(0.5f)));
  527. line_end_point = context.rounded_device_point(fragment_box.top_right().translated(-1, baseline - x_height * CSSPixels(0.5f)));
  528. break;
  529. }
  530. case CSS::TextDecorationLine::Blink:
  531. // Conforming user agents may simply not blink the text
  532. return;
  533. }
  534. switch (paintable.computed_values().text_decoration_style()) {
  535. case CSS::TextDecorationStyle::Solid:
  536. painter.draw_line(line_start_point.to_type<int>(), line_end_point.to_type<int>(), line_color, device_line_thickness.value(), Gfx::LineStyle::Solid);
  537. break;
  538. case CSS::TextDecorationStyle::Double:
  539. switch (line) {
  540. case CSS::TextDecorationLine::Underline:
  541. break;
  542. case CSS::TextDecorationLine::Overline:
  543. line_start_point.translate_by(0, -device_line_thickness - context.rounded_device_pixels(1));
  544. line_end_point.translate_by(0, -device_line_thickness - context.rounded_device_pixels(1));
  545. break;
  546. case CSS::TextDecorationLine::LineThrough:
  547. line_start_point.translate_by(0, -device_line_thickness / 2);
  548. line_end_point.translate_by(0, -device_line_thickness / 2);
  549. break;
  550. default:
  551. VERIFY_NOT_REACHED();
  552. }
  553. painter.draw_line(line_start_point.to_type<int>(), line_end_point.to_type<int>(), line_color, device_line_thickness.value());
  554. 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());
  555. break;
  556. case CSS::TextDecorationStyle::Dashed:
  557. painter.draw_line(line_start_point.to_type<int>(), line_end_point.to_type<int>(), line_color, device_line_thickness.value(), Gfx::LineStyle::Dashed);
  558. break;
  559. case CSS::TextDecorationStyle::Dotted:
  560. painter.draw_line(line_start_point.to_type<int>(), line_end_point.to_type<int>(), line_color, device_line_thickness.value(), Gfx::LineStyle::Dotted);
  561. break;
  562. case CSS::TextDecorationStyle::Wavy:
  563. 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());
  564. break;
  565. }
  566. }
  567. }
  568. void paint_text_fragment(PaintContext& context, TextPaintable const& paintable, PaintableFragment const& fragment, PaintPhase phase)
  569. {
  570. auto& painter = context.display_list_recorder();
  571. if (phase == PaintPhase::Foreground) {
  572. auto fragment_absolute_rect = fragment.absolute_rect();
  573. auto fragment_absolute_device_rect = context.enclosing_device_rect(fragment_absolute_rect);
  574. if (paintable.document().inspected_layout_node() == &paintable.layout_node())
  575. context.display_list_recorder().draw_rect(fragment_absolute_device_rect.to_type<int>(), Color::Magenta);
  576. auto text = paintable.text_for_rendering();
  577. auto glyph_run = fragment.glyph_run();
  578. if (!glyph_run)
  579. return;
  580. DevicePixelPoint baseline_start { fragment_absolute_device_rect.x(), fragment_absolute_device_rect.y() + context.rounded_device_pixels(fragment.baseline()) };
  581. auto scale = context.device_pixels_per_css_pixel();
  582. painter.draw_text_run(baseline_start.to_type<int>(), *glyph_run, paintable.computed_values().webkit_text_fill_color(), fragment_absolute_device_rect.to_type<int>(), scale);
  583. auto selection_rect = context.enclosing_device_rect(fragment.selection_rect(paintable.layout_node().first_available_font())).to_type<int>();
  584. if (!selection_rect.is_empty()) {
  585. painter.fill_rect(selection_rect, CSS::SystemColor::highlight());
  586. DisplayListRecorderStateSaver saver(painter);
  587. painter.add_clip_rect(selection_rect);
  588. painter.draw_text_run(baseline_start.to_type<int>(), *glyph_run, CSS::SystemColor::highlight_text(), fragment_absolute_device_rect.to_type<int>(), scale);
  589. }
  590. paint_text_decoration(context, paintable, fragment);
  591. paint_cursor_if_needed(context, paintable, fragment);
  592. }
  593. }
  594. void PaintableWithLines::paint(PaintContext& context, PaintPhase phase) const
  595. {
  596. if (!is_visible())
  597. return;
  598. PaintableBox::paint(context, phase);
  599. if (fragments().is_empty())
  600. return;
  601. bool should_clip_overflow = computed_values().overflow_x() != CSS::Overflow::Visible && computed_values().overflow_y() != CSS::Overflow::Visible;
  602. Optional<u32> corner_clip_id;
  603. auto clip_box = absolute_padding_box_rect();
  604. if (get_clip_rect().has_value()) {
  605. clip_box.intersect(get_clip_rect().value());
  606. should_clip_overflow = true;
  607. }
  608. if (should_clip_overflow) {
  609. context.display_list_recorder().save();
  610. // FIXME: Handle overflow-x and overflow-y being different values.
  611. auto clip_box_with_enclosing_scroll_frame_offset = clip_box;
  612. if (enclosing_scroll_frame_offset().has_value())
  613. clip_box_with_enclosing_scroll_frame_offset.translate_by(enclosing_scroll_frame_offset().value());
  614. context.display_list_recorder().add_clip_rect(context.rounded_device_rect(clip_box_with_enclosing_scroll_frame_offset).to_type<int>());
  615. auto border_radii = normalized_border_radii_data(ShrinkRadiiForBorders::Yes);
  616. CornerRadii corner_radii {
  617. .top_left = border_radii.top_left.as_corner(context),
  618. .top_right = border_radii.top_right.as_corner(context),
  619. .bottom_right = border_radii.bottom_right.as_corner(context),
  620. .bottom_left = border_radii.bottom_left.as_corner(context)
  621. };
  622. if (corner_radii.has_any_radius()) {
  623. context.display_list_recorder().add_rounded_rect_clip(corner_radii, context.rounded_device_rect(clip_box).to_type<int>(), CornerClip::Outside);
  624. }
  625. context.display_list_recorder().save();
  626. auto scroll_offset = context.rounded_device_point(this->scroll_offset());
  627. context.display_list_recorder().translate(-scroll_offset.to_type<int>());
  628. }
  629. // Text shadows
  630. // This is yet another loop, but done here because all shadows should appear under all text.
  631. // So, we paint the shadows before painting any text.
  632. // FIXME: Find a smarter way to do this?
  633. if (phase == PaintPhase::Foreground) {
  634. for (auto& fragment : fragments()) {
  635. paint_text_shadow(context, fragment, fragment.shadows());
  636. }
  637. }
  638. for (auto const& fragment : m_fragments) {
  639. auto fragment_absolute_rect = fragment.absolute_rect();
  640. auto fragment_absolute_device_rect = context.enclosing_device_rect(fragment_absolute_rect);
  641. if (context.should_show_line_box_borders()) {
  642. context.display_list_recorder().draw_rect(fragment_absolute_device_rect.to_type<int>(), Color::Green);
  643. context.display_list_recorder().draw_line(
  644. context.rounded_device_point(fragment_absolute_rect.top_left().translated(0, fragment.baseline())).to_type<int>(),
  645. context.rounded_device_point(fragment_absolute_rect.top_right().translated(-1, fragment.baseline())).to_type<int>(), Color::Red);
  646. }
  647. if (is<TextPaintable>(fragment.paintable()))
  648. paint_text_fragment(context, static_cast<TextPaintable const&>(fragment.paintable()), fragment, phase);
  649. }
  650. if (should_clip_overflow) {
  651. context.display_list_recorder().restore();
  652. context.display_list_recorder().restore();
  653. }
  654. }
  655. Paintable::DispatchEventOfSameName PaintableBox::handle_mousedown(Badge<EventHandler>, CSSPixelPoint position, unsigned, unsigned)
  656. {
  657. auto vertical_scroll_thumb_rect = scroll_thumb_rect(ScrollDirection::Vertical);
  658. auto horizontal_scroll_thumb_rect = scroll_thumb_rect(ScrollDirection::Horizontal);
  659. if (vertical_scroll_thumb_rect.has_value() && vertical_scroll_thumb_rect.value().contains(position)) {
  660. if (is_viewport())
  661. position.translate_by(-scroll_offset());
  662. m_last_mouse_tracking_position = position;
  663. m_scroll_thumb_dragging_direction = ScrollDirection::Vertical;
  664. const_cast<HTML::Navigable&>(*navigable()).event_handler().set_mouse_event_tracking_paintable(this);
  665. } else if (horizontal_scroll_thumb_rect.has_value() && horizontal_scroll_thumb_rect.value().contains(position)) {
  666. if (is_viewport())
  667. position.translate_by(-scroll_offset());
  668. m_last_mouse_tracking_position = position;
  669. m_scroll_thumb_dragging_direction = ScrollDirection::Horizontal;
  670. const_cast<HTML::Navigable&>(*navigable()).event_handler().set_mouse_event_tracking_paintable(this);
  671. }
  672. return Paintable::DispatchEventOfSameName::Yes;
  673. }
  674. Paintable::DispatchEventOfSameName PaintableBox::handle_mouseup(Badge<EventHandler>, CSSPixelPoint, unsigned, unsigned)
  675. {
  676. if (m_last_mouse_tracking_position.has_value()) {
  677. m_last_mouse_tracking_position.clear();
  678. m_scroll_thumb_dragging_direction.clear();
  679. const_cast<HTML::Navigable&>(*navigable()).event_handler().set_mouse_event_tracking_paintable(nullptr);
  680. }
  681. return Paintable::DispatchEventOfSameName::Yes;
  682. }
  683. Paintable::DispatchEventOfSameName PaintableBox::handle_mousemove(Badge<EventHandler>, CSSPixelPoint position, unsigned, unsigned)
  684. {
  685. if (m_last_mouse_tracking_position.has_value()) {
  686. if (is_viewport())
  687. position.translate_by(-scroll_offset());
  688. Gfx::Point<double> scroll_delta;
  689. if (m_scroll_thumb_dragging_direction == ScrollDirection::Horizontal)
  690. scroll_delta.set_x((position.x() - m_last_mouse_tracking_position->x()).to_double());
  691. else
  692. scroll_delta.set_y((position.y() - m_last_mouse_tracking_position->y()).to_double());
  693. auto padding_rect = absolute_padding_box_rect();
  694. auto scrollable_overflow_rect = this->scrollable_overflow_rect().value();
  695. auto scroll_overflow_size = m_scroll_thumb_dragging_direction == ScrollDirection::Horizontal ? scrollable_overflow_rect.width() : scrollable_overflow_rect.height();
  696. auto scrollport_size = m_scroll_thumb_dragging_direction == ScrollDirection::Horizontal ? padding_rect.width() : padding_rect.height();
  697. auto scroll_px_per_mouse_position_delta_px = scroll_overflow_size.to_double() / scrollport_size.to_double();
  698. scroll_delta *= scroll_px_per_mouse_position_delta_px;
  699. if (is_viewport()) {
  700. document().window()->scroll_by(scroll_delta.x(), scroll_delta.y());
  701. } else {
  702. scroll_by(scroll_delta.x(), scroll_delta.y());
  703. }
  704. m_last_mouse_tracking_position = position;
  705. return Paintable::DispatchEventOfSameName::No;
  706. }
  707. return Paintable::DispatchEventOfSameName::Yes;
  708. }
  709. bool PaintableBox::handle_mousewheel(Badge<EventHandler>, CSSPixelPoint, unsigned, unsigned, int wheel_delta_x, int wheel_delta_y)
  710. {
  711. if (!layout_box().is_user_scrollable())
  712. return false;
  713. // TODO: Vertical and horizontal scroll overflow should be handled seperately.
  714. if (!has_scrollable_overflow())
  715. return false;
  716. scroll_by(wheel_delta_x, wheel_delta_y);
  717. return true;
  718. }
  719. Layout::BlockContainer const& PaintableWithLines::layout_box() const
  720. {
  721. return static_cast<Layout::BlockContainer const&>(PaintableBox::layout_box());
  722. }
  723. Layout::BlockContainer& PaintableWithLines::layout_box()
  724. {
  725. return static_cast<Layout::BlockContainer&>(PaintableBox::layout_box());
  726. }
  727. TraversalDecision PaintableBox::hit_test_scrollbars(CSSPixelPoint position, Function<TraversalDecision(HitTestResult)> const& callback) const
  728. {
  729. auto vertical_scroll_thumb_rect = scroll_thumb_rect(ScrollDirection::Vertical);
  730. if (vertical_scroll_thumb_rect.has_value() && vertical_scroll_thumb_rect.value().contains(position))
  731. return callback(HitTestResult { const_cast<PaintableBox&>(*this) });
  732. auto horizontal_scroll_thumb_rect = scroll_thumb_rect(ScrollDirection::Horizontal);
  733. if (horizontal_scroll_thumb_rect.has_value() && horizontal_scroll_thumb_rect.value().contains(position))
  734. return callback(HitTestResult { const_cast<PaintableBox&>(*this) });
  735. return TraversalDecision::Continue;
  736. }
  737. TraversalDecision PaintableBox::hit_test(CSSPixelPoint position, HitTestType type, Function<TraversalDecision(HitTestResult)> const& callback) const
  738. {
  739. if (clip_rect().has_value() && !clip_rect()->contains(position))
  740. return TraversalDecision::Continue;
  741. auto position_adjusted_by_scroll_offset = position;
  742. if (enclosing_scroll_frame_offset().has_value())
  743. position_adjusted_by_scroll_offset.translate_by(-enclosing_scroll_frame_offset().value());
  744. if (!is_visible())
  745. return TraversalDecision::Continue;
  746. if (hit_test_scrollbars(position_adjusted_by_scroll_offset, callback) == TraversalDecision::Break)
  747. return TraversalDecision::Break;
  748. if (layout_box().is_viewport()) {
  749. auto& viewport_paintable = const_cast<ViewportPaintable&>(static_cast<ViewportPaintable const&>(*this));
  750. viewport_paintable.build_stacking_context_tree_if_needed();
  751. viewport_paintable.document().update_paint_and_hit_testing_properties_if_needed();
  752. viewport_paintable.refresh_scroll_state();
  753. viewport_paintable.refresh_clip_state();
  754. return stacking_context()->hit_test(position, type, callback);
  755. }
  756. for (auto const* child = last_child(); child; child = child->previous_sibling()) {
  757. auto z_index = child->computed_values().z_index();
  758. if (child->layout_node().is_positioned() && z_index.value_or(0) == 0)
  759. continue;
  760. if (child->hit_test(position, type, callback) == TraversalDecision::Break)
  761. return TraversalDecision::Break;
  762. }
  763. if (!absolute_border_box_rect().contains(position_adjusted_by_scroll_offset.x(), position_adjusted_by_scroll_offset.y()))
  764. return TraversalDecision::Continue;
  765. if (!visible_for_hit_testing())
  766. return TraversalDecision::Continue;
  767. return callback(HitTestResult { const_cast<PaintableBox&>(*this) });
  768. }
  769. Optional<HitTestResult> PaintableBox::hit_test(CSSPixelPoint position, HitTestType type) const
  770. {
  771. Optional<HitTestResult> result;
  772. (void)PaintableBox::hit_test(position, type, [&](HitTestResult candidate) {
  773. VERIFY(!result.has_value());
  774. if (!candidate.paintable->visible_for_hit_testing())
  775. return TraversalDecision::Continue;
  776. result = move(candidate);
  777. return TraversalDecision::Break;
  778. });
  779. return result;
  780. }
  781. TraversalDecision PaintableWithLines::hit_test(CSSPixelPoint position, HitTestType type, Function<TraversalDecision(HitTestResult)> const& callback) const
  782. {
  783. if (clip_rect().has_value() && !clip_rect()->contains(position))
  784. return TraversalDecision::Continue;
  785. auto position_adjusted_by_scroll_offset = position;
  786. if (enclosing_scroll_frame_offset().has_value())
  787. position_adjusted_by_scroll_offset.translate_by(-enclosing_scroll_frame_offset().value());
  788. if (!layout_box().children_are_inline() || m_fragments.is_empty()) {
  789. return PaintableBox::hit_test(position, type, callback);
  790. }
  791. if (hit_test_scrollbars(position_adjusted_by_scroll_offset, callback) == TraversalDecision::Break)
  792. return TraversalDecision::Break;
  793. for (auto const* child = last_child(); child; child = child->previous_sibling()) {
  794. if (child->hit_test(position, type, callback) == TraversalDecision::Break)
  795. return TraversalDecision::Break;
  796. }
  797. Optional<HitTestResult> last_good_candidate;
  798. for (auto const& fragment : fragments()) {
  799. if (fragment.paintable().stacking_context())
  800. continue;
  801. auto fragment_absolute_rect = fragment.absolute_rect();
  802. if (fragment_absolute_rect.contains(position_adjusted_by_scroll_offset)) {
  803. if (fragment.paintable().hit_test(position, type, callback) == TraversalDecision::Break)
  804. return TraversalDecision::Break;
  805. HitTestResult hit_test_result { const_cast<Paintable&>(fragment.paintable()), fragment.text_index_at(position_adjusted_by_scroll_offset.x()) };
  806. if (callback(hit_test_result) == TraversalDecision::Break)
  807. return TraversalDecision::Break;
  808. }
  809. // 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.
  810. // This determines whether the fragment is a good candidate for the position. The last such good fragment is chosen.
  811. // 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.
  812. // We arbitrarily choose to consider the end of the line above and ignore the beginning of the line below.
  813. // If we knew the direction of selection, we could make a better choice.
  814. if (fragment_absolute_rect.bottom() - 1 <= position_adjusted_by_scroll_offset.y()) { // fully below the fragment
  815. last_good_candidate = HitTestResult { const_cast<Paintable&>(fragment.paintable()), fragment.start() + fragment.length() };
  816. } else if (fragment_absolute_rect.top() <= position_adjusted_by_scroll_offset.y()) { // vertically within the fragment
  817. if (position_adjusted_by_scroll_offset.x() < fragment_absolute_rect.left()) { // left of the fragment
  818. if (!last_good_candidate.has_value()) { // first fragment of the line
  819. last_good_candidate = HitTestResult { const_cast<Paintable&>(fragment.paintable()), fragment.start() };
  820. }
  821. } else { // right of the fragment
  822. last_good_candidate = HitTestResult { const_cast<Paintable&>(fragment.paintable()), fragment.start() + fragment.length() };
  823. }
  824. }
  825. }
  826. if (type == HitTestType::TextCursor && last_good_candidate.has_value()) {
  827. if (callback(last_good_candidate.value()) == TraversalDecision::Break)
  828. return TraversalDecision::Break;
  829. }
  830. if (!stacking_context() && is_visible() && absolute_border_box_rect().contains(position_adjusted_by_scroll_offset.x(), position_adjusted_by_scroll_offset.y())) {
  831. if (callback(HitTestResult { const_cast<PaintableWithLines&>(*this) }) == TraversalDecision::Break)
  832. return TraversalDecision::Break;
  833. }
  834. return TraversalDecision::Continue;
  835. }
  836. void PaintableBox::set_needs_display() const
  837. {
  838. if (auto navigable = this->navigable())
  839. navigable->set_needs_display(absolute_rect());
  840. }
  841. Optional<CSSPixelRect> PaintableBox::get_masking_area() const
  842. {
  843. // FIXME: Support clip-paths with transforms.
  844. if (!combined_css_transform().is_identity_or_translation())
  845. return {};
  846. auto clip_path = computed_values().clip_path();
  847. // FIXME: Support other clip sources.
  848. if (!clip_path.has_value() || !clip_path->is_basic_shape())
  849. return {};
  850. // FIXME: Support other geometry boxes. See: https://drafts.fxtf.org/css-masking/#typedef-geometry-box
  851. return absolute_border_box_rect();
  852. }
  853. Optional<Gfx::Bitmap::MaskKind> PaintableBox::get_mask_type() const
  854. {
  855. // Always an alpha mask as only basic shapes are supported right now.
  856. return Gfx::Bitmap::MaskKind::Alpha;
  857. }
  858. RefPtr<Gfx::Bitmap> PaintableBox::calculate_mask(PaintContext& context, CSSPixelRect const& masking_area) const
  859. {
  860. VERIFY(computed_values().clip_path()->is_basic_shape());
  861. auto const& basic_shape = computed_values().clip_path()->basic_shape();
  862. auto path = basic_shape.to_path(masking_area, layout_node());
  863. auto device_pixel_scale = context.device_pixels_per_css_pixel();
  864. path = path.copy_transformed(Gfx::AffineTransform {}.set_scale(device_pixel_scale, device_pixel_scale));
  865. auto mask_rect = context.enclosing_device_rect(masking_area);
  866. auto maybe_bitmap = Gfx::Bitmap::create(Gfx::BitmapFormat::BGRA8888, mask_rect.size().to_type<int>());
  867. if (maybe_bitmap.is_error())
  868. return {};
  869. auto bitmap = maybe_bitmap.release_value();
  870. Gfx::Painter painter(*bitmap);
  871. Gfx::AntiAliasingPainter aa_painter(painter);
  872. aa_painter.fill_path(path, Color::Black);
  873. return bitmap;
  874. }
  875. void PaintableBox::resolve_paint_properties()
  876. {
  877. auto const& computed_values = this->computed_values();
  878. auto const& layout_node = this->layout_node();
  879. // Border radii
  880. CSSPixelRect const border_rect { 0, 0, border_box_width(), border_box_height() };
  881. auto const& border_top_left_radius = computed_values.border_top_left_radius();
  882. auto const& border_top_right_radius = computed_values.border_top_right_radius();
  883. auto const& border_bottom_right_radius = computed_values.border_bottom_right_radius();
  884. auto const& border_bottom_left_radius = computed_values.border_bottom_left_radius();
  885. auto radii_data = normalize_border_radii_data(layout_node, border_rect, border_top_left_radius,
  886. border_top_right_radius, border_bottom_right_radius,
  887. border_bottom_left_radius);
  888. set_border_radii_data(radii_data);
  889. // Box shadows
  890. auto const& box_shadow_data = computed_values.box_shadow();
  891. Vector<Painting::ShadowData> resolved_box_shadow_data;
  892. resolved_box_shadow_data.ensure_capacity(box_shadow_data.size());
  893. for (auto const& layer : box_shadow_data) {
  894. resolved_box_shadow_data.empend(
  895. layer.color,
  896. layer.offset_x.to_px(layout_node),
  897. layer.offset_y.to_px(layout_node),
  898. layer.blur_radius.to_px(layout_node),
  899. layer.spread_distance.to_px(layout_node),
  900. layer.placement == CSS::ShadowPlacement::Outer ? Painting::ShadowPlacement::Outer
  901. : Painting::ShadowPlacement::Inner);
  902. }
  903. set_box_shadow_data(move(resolved_box_shadow_data));
  904. auto const& transformations = computed_values.transformations();
  905. if (!transformations.is_empty()) {
  906. auto matrix = Gfx::FloatMatrix4x4::identity();
  907. for (auto const& transform : transformations)
  908. matrix = matrix * transform.to_matrix(*this).release_value();
  909. set_transform(matrix);
  910. }
  911. auto const& transform_origin = computed_values.transform_origin();
  912. // https://www.w3.org/TR/css-transforms-1/#transform-box
  913. auto transform_box = computed_values.transform_box();
  914. // For SVG elements without associated CSS layout box, the used value for content-box is fill-box and for
  915. // border-box is stroke-box.
  916. // FIXME: This currently detects any SVG element except the <svg> one. Is that correct?
  917. // And is it correct to use `else` below?
  918. if (is<Painting::SVGPaintable>(*this)) {
  919. switch (transform_box) {
  920. case CSS::TransformBox::ContentBox:
  921. transform_box = CSS::TransformBox::FillBox;
  922. break;
  923. case CSS::TransformBox::BorderBox:
  924. transform_box = CSS::TransformBox::StrokeBox;
  925. break;
  926. default:
  927. break;
  928. }
  929. }
  930. // For elements with associated CSS layout box, the used value for fill-box is content-box and for
  931. // stroke-box and view-box is border-box.
  932. else {
  933. switch (transform_box) {
  934. case CSS::TransformBox::FillBox:
  935. transform_box = CSS::TransformBox::ContentBox;
  936. break;
  937. case CSS::TransformBox::StrokeBox:
  938. case CSS::TransformBox::ViewBox:
  939. transform_box = CSS::TransformBox::BorderBox;
  940. break;
  941. default:
  942. break;
  943. }
  944. }
  945. CSSPixelRect reference_box = [&]() {
  946. switch (transform_box) {
  947. case CSS::TransformBox::ContentBox:
  948. // Uses the content box as reference box.
  949. // FIXME: The reference box of a table is the border box of its table wrapper box, not its table box.
  950. return absolute_rect();
  951. case CSS::TransformBox::BorderBox:
  952. // Uses the border box as reference box.
  953. // FIXME: The reference box of a table is the border box of its table wrapper box, not its table box.
  954. return absolute_border_box_rect();
  955. case CSS::TransformBox::FillBox:
  956. // Uses the object bounding box as reference box.
  957. // FIXME: For now we're using the content rect as an approximation.
  958. return absolute_rect();
  959. case CSS::TransformBox::StrokeBox:
  960. // Uses the stroke bounding box as reference box.
  961. // FIXME: For now we're using the border rect as an approximation.
  962. return absolute_border_box_rect();
  963. case CSS::TransformBox::ViewBox:
  964. // Uses the nearest SVG viewport as reference box.
  965. // FIXME: If a viewBox attribute is specified for the SVG viewport creating element:
  966. // - The reference box is positioned at the origin of the coordinate system established by the viewBox attribute.
  967. // - The dimension of the reference box is set to the width and height values of the viewBox attribute.
  968. auto* svg_paintable = first_ancestor_of_type<Painting::SVGSVGPaintable>();
  969. if (!svg_paintable)
  970. return absolute_border_box_rect();
  971. return svg_paintable->absolute_rect();
  972. }
  973. VERIFY_NOT_REACHED();
  974. }();
  975. auto x = reference_box.left() + transform_origin.x.to_px(layout_node, reference_box.width());
  976. auto y = reference_box.top() + transform_origin.y.to_px(layout_node, reference_box.height());
  977. set_transform_origin({ x, y });
  978. set_transform_origin({ x, y });
  979. // Outlines
  980. auto outline_width = computed_values.outline_width().to_px(layout_node);
  981. auto outline_data = borders_data_for_outline(layout_node, computed_values.outline_color(), computed_values.outline_style(), outline_width);
  982. auto outline_offset = computed_values.outline_offset().to_px(layout_node);
  983. set_outline_data(outline_data);
  984. set_outline_offset(outline_offset);
  985. auto combined_transform = compute_combined_css_transform();
  986. set_combined_css_transform(combined_transform);
  987. }
  988. void PaintableWithLines::resolve_paint_properties()
  989. {
  990. PaintableBox::resolve_paint_properties();
  991. auto const& layout_node = this->layout_node();
  992. for (auto const& fragment : fragments()) {
  993. auto const& text_shadow = fragment.m_layout_node->computed_values().text_shadow();
  994. if (!text_shadow.is_empty()) {
  995. Vector<Painting::ShadowData> resolved_shadow_data;
  996. resolved_shadow_data.ensure_capacity(text_shadow.size());
  997. for (auto const& layer : text_shadow) {
  998. resolved_shadow_data.empend(
  999. layer.color,
  1000. layer.offset_x.to_px(layout_node),
  1001. layer.offset_y.to_px(layout_node),
  1002. layer.blur_radius.to_px(layout_node),
  1003. layer.spread_distance.to_px(layout_node),
  1004. Painting::ShadowPlacement::Outer);
  1005. }
  1006. const_cast<Painting::PaintableFragment&>(fragment).set_shadows(move(resolved_shadow_data));
  1007. }
  1008. }
  1009. }
  1010. }