StyleProperties.cpp 32 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034
  1. /*
  2. * Copyright (c) 2018-2020, Andreas Kling <kling@serenityos.org>
  3. * Copyright (c) 2021-2022, Sam Atkins <atkinssj@serenityos.org>
  4. *
  5. * SPDX-License-Identifier: BSD-2-Clause
  6. */
  7. #include <AK/TypeCasts.h>
  8. #include <LibCore/DirIterator.h>
  9. #include <LibGfx/FontDatabase.h>
  10. #include <LibWeb/CSS/StyleProperties.h>
  11. #include <LibWeb/FontCache.h>
  12. #include <LibWeb/Layout/BlockContainer.h>
  13. #include <LibWeb/Layout/Node.h>
  14. namespace Web::CSS {
  15. StyleProperties::StyleProperties(StyleProperties const& other)
  16. : m_property_values(other.m_property_values)
  17. {
  18. if (other.m_font) {
  19. m_font = other.m_font->clone();
  20. } else {
  21. m_font = nullptr;
  22. }
  23. }
  24. NonnullRefPtr<StyleProperties> StyleProperties::clone() const
  25. {
  26. return adopt_ref(*new StyleProperties(*this));
  27. }
  28. void StyleProperties::set_property(CSS::PropertyID id, NonnullRefPtr<StyleValue> value)
  29. {
  30. m_property_values[to_underlying(id)] = move(value);
  31. }
  32. Optional<NonnullRefPtr<StyleValue>> StyleProperties::property(CSS::PropertyID property_id) const
  33. {
  34. auto value = m_property_values[to_underlying(property_id)];
  35. if (!value)
  36. return {};
  37. return value.release_nonnull();
  38. }
  39. Length StyleProperties::length_or_fallback(CSS::PropertyID id, Length const& fallback) const
  40. {
  41. auto maybe_value = property(id);
  42. if (!maybe_value.has_value())
  43. return fallback;
  44. auto& value = maybe_value.value();
  45. if (value->is_calculated())
  46. return Length::make_calculated(value->as_calculated());
  47. if (value->has_length())
  48. return value->to_length();
  49. return fallback;
  50. }
  51. LengthPercentage StyleProperties::length_percentage_or_fallback(CSS::PropertyID id, LengthPercentage const& fallback) const
  52. {
  53. return length_percentage(id).value_or(fallback);
  54. }
  55. Optional<LengthPercentage> StyleProperties::length_percentage(CSS::PropertyID id) const
  56. {
  57. auto maybe_value = property(id);
  58. if (!maybe_value.has_value())
  59. return {};
  60. auto& value = maybe_value.value();
  61. if (value->is_calculated())
  62. return LengthPercentage { value->as_calculated() };
  63. if (value->is_percentage())
  64. return value->as_percentage().percentage();
  65. if (value->has_length())
  66. return value->to_length();
  67. return {};
  68. }
  69. LengthBox StyleProperties::length_box(CSS::PropertyID left_id, CSS::PropertyID top_id, CSS::PropertyID right_id, CSS::PropertyID bottom_id, const CSS::Length& default_value) const
  70. {
  71. LengthBox box;
  72. box.left = length_percentage_or_fallback(left_id, default_value);
  73. box.top = length_percentage_or_fallback(top_id, default_value);
  74. box.right = length_percentage_or_fallback(right_id, default_value);
  75. box.bottom = length_percentage_or_fallback(bottom_id, default_value);
  76. return box;
  77. }
  78. Color StyleProperties::color_or_fallback(CSS::PropertyID id, Layout::NodeWithStyle const& node, Color fallback) const
  79. {
  80. auto value = property(id);
  81. if (!value.has_value() || !value.value()->has_color())
  82. return fallback;
  83. return value.value()->to_color(node);
  84. }
  85. NonnullRefPtr<Gfx::Font> StyleProperties::font_fallback(bool monospace, bool bold)
  86. {
  87. if (monospace && bold)
  88. return Gfx::FontDatabase::default_fixed_width_font().bold_variant();
  89. if (monospace)
  90. return Gfx::FontDatabase::default_fixed_width_font();
  91. if (bold)
  92. return Gfx::FontDatabase::default_font().bold_variant();
  93. return Gfx::FontDatabase::default_font();
  94. }
  95. float StyleProperties::line_height(Layout::Node const& layout_node) const
  96. {
  97. if (auto maybe_line_height = property(CSS::PropertyID::LineHeight); maybe_line_height.has_value()) {
  98. auto line_height = maybe_line_height.release_value();
  99. if (line_height->is_identifier() && line_height->to_identifier() == ValueID::Normal)
  100. return layout_node.font().pixel_metrics().line_spacing();
  101. if (line_height->is_length()) {
  102. auto line_height_length = line_height->to_length();
  103. if (!line_height_length.is_auto())
  104. return line_height_length.to_px(layout_node);
  105. }
  106. if (line_height->is_numeric())
  107. return Length(line_height->to_number(), Length::Type::Em).to_px(layout_node);
  108. if (line_height->is_percentage()) {
  109. // Percentages are relative to 1em. https://www.w3.org/TR/css-inline-3/#valdef-line-height-percentage
  110. auto& percentage = line_height->as_percentage().percentage();
  111. return Length(percentage.as_fraction(), Length::Type::Em).to_px(layout_node);
  112. }
  113. }
  114. return layout_node.font().pixel_metrics().line_spacing();
  115. }
  116. Optional<int> StyleProperties::z_index() const
  117. {
  118. auto maybe_value = property(CSS::PropertyID::ZIndex);
  119. if (!maybe_value.has_value())
  120. return {};
  121. auto& value = maybe_value.value();
  122. if (value->has_auto())
  123. return {};
  124. if (value->has_integer())
  125. return value->to_integer();
  126. return {};
  127. }
  128. float StyleProperties::opacity() const
  129. {
  130. auto maybe_value = property(CSS::PropertyID::Opacity);
  131. if (!maybe_value.has_value())
  132. return 1.0f;
  133. auto& value = maybe_value.value();
  134. float unclamped_opacity = 1.0f;
  135. if (value->has_number()) {
  136. unclamped_opacity = value->to_number();
  137. } else if (value->is_calculated()) {
  138. auto& calculated = value->as_calculated();
  139. if (calculated.resolved_type() == CalculatedStyleValue::ResolvedType::Percentage) {
  140. auto maybe_percentage = value->as_calculated().resolve_percentage();
  141. if (maybe_percentage.has_value())
  142. unclamped_opacity = maybe_percentage->as_fraction();
  143. else
  144. dbgln("Unable to resolve calc() as opacity (percentage): {}", value->to_string());
  145. } else {
  146. auto maybe_number = value->as_calculated().resolve_number();
  147. if (maybe_number.has_value())
  148. unclamped_opacity = maybe_number.value();
  149. else
  150. dbgln("Unable to resolve calc() as opacity (number): {}", value->to_string());
  151. }
  152. } else if (value->is_percentage()) {
  153. unclamped_opacity = value->as_percentage().percentage().as_fraction();
  154. }
  155. return clamp(unclamped_opacity, 0.0f, 1.0f);
  156. }
  157. Optional<CSS::FlexDirection> StyleProperties::flex_direction() const
  158. {
  159. auto value = property(CSS::PropertyID::FlexDirection);
  160. if (!value.has_value())
  161. return {};
  162. switch (value.value()->to_identifier()) {
  163. case CSS::ValueID::Row:
  164. return CSS::FlexDirection::Row;
  165. case CSS::ValueID::RowReverse:
  166. return CSS::FlexDirection::RowReverse;
  167. case CSS::ValueID::Column:
  168. return CSS::FlexDirection::Column;
  169. case CSS::ValueID::ColumnReverse:
  170. return CSS::FlexDirection::ColumnReverse;
  171. default:
  172. return {};
  173. }
  174. }
  175. Optional<CSS::FlexWrap> StyleProperties::flex_wrap() const
  176. {
  177. auto value = property(CSS::PropertyID::FlexWrap);
  178. if (!value.has_value())
  179. return {};
  180. switch (value.value()->to_identifier()) {
  181. case CSS::ValueID::Wrap:
  182. return CSS::FlexWrap::Wrap;
  183. case CSS::ValueID::Nowrap:
  184. return CSS::FlexWrap::Nowrap;
  185. case CSS::ValueID::WrapReverse:
  186. return CSS::FlexWrap::WrapReverse;
  187. default:
  188. return {};
  189. }
  190. }
  191. Optional<CSS::FlexBasisData> StyleProperties::flex_basis() const
  192. {
  193. auto maybe_value = property(CSS::PropertyID::FlexBasis);
  194. if (!maybe_value.has_value())
  195. return {};
  196. auto& value = maybe_value.value();
  197. if (value->is_identifier() && value->to_identifier() == CSS::ValueID::Content)
  198. return { { CSS::FlexBasis::Content, {} } };
  199. if (value->has_auto())
  200. return { { CSS::FlexBasis::Auto, {} } };
  201. if (value->is_percentage())
  202. return { { CSS::FlexBasis::LengthPercentage, value->as_percentage().percentage() } };
  203. if (value->has_length())
  204. return { { CSS::FlexBasis::LengthPercentage, value->to_length() } };
  205. return {};
  206. }
  207. float StyleProperties::flex_grow() const
  208. {
  209. auto value = property(CSS::PropertyID::FlexGrow);
  210. if (!value.has_value() || !value.value()->has_number())
  211. return 0;
  212. return value.value()->to_number();
  213. }
  214. float StyleProperties::flex_shrink() const
  215. {
  216. auto value = property(CSS::PropertyID::FlexShrink);
  217. if (!value.has_value() || !value.value()->has_number())
  218. return 1;
  219. return value.value()->to_number();
  220. }
  221. int StyleProperties::order() const
  222. {
  223. auto value = property(CSS::PropertyID::Order);
  224. if (!value.has_value() || !value.value()->has_integer())
  225. return 0;
  226. return value.value()->to_integer();
  227. }
  228. Optional<CSS::ImageRendering> StyleProperties::image_rendering() const
  229. {
  230. auto value = property(CSS::PropertyID::ImageRendering);
  231. if (!value.has_value())
  232. return {};
  233. switch (value.value()->to_identifier()) {
  234. case CSS::ValueID::Auto:
  235. return CSS::ImageRendering::Auto;
  236. case CSS::ValueID::CrispEdges:
  237. return CSS::ImageRendering::CrispEdges;
  238. case CSS::ValueID::HighQuality:
  239. return CSS::ImageRendering::HighQuality;
  240. case CSS::ValueID::Pixelated:
  241. return CSS::ImageRendering::Pixelated;
  242. case CSS::ValueID::Smooth:
  243. return CSS::ImageRendering::Smooth;
  244. default:
  245. return {};
  246. }
  247. }
  248. Optional<CSS::JustifyContent> StyleProperties::justify_content() const
  249. {
  250. auto value = property(CSS::PropertyID::JustifyContent);
  251. if (!value.has_value())
  252. return {};
  253. switch (value.value()->to_identifier()) {
  254. case CSS::ValueID::FlexStart:
  255. return CSS::JustifyContent::FlexStart;
  256. case CSS::ValueID::FlexEnd:
  257. return CSS::JustifyContent::FlexEnd;
  258. case CSS::ValueID::Center:
  259. return CSS::JustifyContent::Center;
  260. case CSS::ValueID::SpaceBetween:
  261. return CSS::JustifyContent::SpaceBetween;
  262. case CSS::ValueID::SpaceAround:
  263. return CSS::JustifyContent::SpaceAround;
  264. default:
  265. return {};
  266. }
  267. }
  268. Vector<CSS::Transformation> StyleProperties::transformations() const
  269. {
  270. auto value = property(CSS::PropertyID::Transform);
  271. if (!value.has_value())
  272. return {};
  273. if (value.value()->is_identifier() && value.value()->to_identifier() == CSS::ValueID::None)
  274. return {};
  275. if (!value.value()->is_value_list())
  276. return {};
  277. auto& list = value.value()->as_value_list();
  278. Vector<CSS::Transformation> transformations;
  279. for (auto& it : list.values()) {
  280. if (!it.is_transformation())
  281. return {};
  282. auto& transformation_style_value = it.as_transformation();
  283. CSS::Transformation transformation;
  284. transformation.function = transformation_style_value.transform_function();
  285. Vector<Variant<CSS::LengthPercentage, float>> values;
  286. for (auto& transformation_value : transformation_style_value.values()) {
  287. if (transformation_value.is_length()) {
  288. values.append({ transformation_value.to_length() });
  289. } else if (transformation_value.is_percentage()) {
  290. values.append({ transformation_value.as_percentage().percentage() });
  291. } else if (transformation_value.is_numeric()) {
  292. values.append({ transformation_value.to_number() });
  293. } else if (transformation_value.is_angle()) {
  294. values.append({ transformation_value.as_angle().angle().to_degrees() });
  295. } else {
  296. dbgln("FIXME: Unsupported value in transform!");
  297. }
  298. }
  299. transformation.values = move(values);
  300. transformations.append(move(transformation));
  301. }
  302. return transformations;
  303. }
  304. static Optional<LengthPercentage> length_percentage_for_style_value(StyleValue const& value)
  305. {
  306. if (value.is_length())
  307. return value.to_length();
  308. if (value.is_percentage())
  309. return value.as_percentage().percentage();
  310. return {};
  311. }
  312. CSS::TransformOrigin StyleProperties::transform_origin() const
  313. {
  314. auto value = property(CSS::PropertyID::TransformOrigin);
  315. if (!value.has_value() || !value.value()->is_value_list() || value.value()->as_value_list().size() != 2)
  316. return {};
  317. auto const& list = value.value()->as_value_list();
  318. auto x_value = length_percentage_for_style_value(list.values()[0]);
  319. auto y_value = length_percentage_for_style_value(list.values()[1]);
  320. if (!x_value.has_value() || !y_value.has_value()) {
  321. return {};
  322. }
  323. return { x_value.value(), y_value.value() };
  324. }
  325. Optional<CSS::AlignItems> StyleProperties::align_items() const
  326. {
  327. auto value = property(CSS::PropertyID::AlignItems);
  328. if (!value.has_value())
  329. return {};
  330. switch (value.value()->to_identifier()) {
  331. case CSS::ValueID::FlexStart:
  332. return CSS::AlignItems::FlexStart;
  333. case CSS::ValueID::FlexEnd:
  334. return CSS::AlignItems::FlexEnd;
  335. case CSS::ValueID::Center:
  336. return CSS::AlignItems::Center;
  337. case CSS::ValueID::Baseline:
  338. return CSS::AlignItems::Baseline;
  339. case CSS::ValueID::Stretch:
  340. return CSS::AlignItems::Stretch;
  341. default:
  342. return {};
  343. }
  344. }
  345. Optional<CSS::Position> StyleProperties::position() const
  346. {
  347. auto value = property(CSS::PropertyID::Position);
  348. if (!value.has_value())
  349. return {};
  350. switch (value.value()->to_identifier()) {
  351. case CSS::ValueID::Static:
  352. return CSS::Position::Static;
  353. case CSS::ValueID::Relative:
  354. return CSS::Position::Relative;
  355. case CSS::ValueID::Absolute:
  356. return CSS::Position::Absolute;
  357. case CSS::ValueID::Fixed:
  358. return CSS::Position::Fixed;
  359. case CSS::ValueID::Sticky:
  360. return CSS::Position::Sticky;
  361. default:
  362. return {};
  363. }
  364. }
  365. bool StyleProperties::operator==(StyleProperties const& other) const
  366. {
  367. if (m_property_values.size() != other.m_property_values.size())
  368. return false;
  369. for (size_t i = 0; i < m_property_values.size(); ++i) {
  370. auto const& my_ptr = m_property_values[i];
  371. auto const& other_ptr = other.m_property_values[i];
  372. if (!my_ptr) {
  373. if (other_ptr)
  374. return false;
  375. continue;
  376. }
  377. if (!other_ptr)
  378. return false;
  379. auto const& my_value = *my_ptr;
  380. auto const& other_value = *other_ptr;
  381. if (my_value.type() != other_value.type())
  382. return false;
  383. if (my_value != other_value)
  384. return false;
  385. }
  386. return true;
  387. }
  388. Optional<CSS::TextAlign> StyleProperties::text_align() const
  389. {
  390. auto value = property(CSS::PropertyID::TextAlign);
  391. if (!value.has_value())
  392. return {};
  393. switch (value.value()->to_identifier()) {
  394. case CSS::ValueID::Left:
  395. return CSS::TextAlign::Left;
  396. case CSS::ValueID::Center:
  397. return CSS::TextAlign::Center;
  398. case CSS::ValueID::Right:
  399. return CSS::TextAlign::Right;
  400. case CSS::ValueID::Justify:
  401. return CSS::TextAlign::Justify;
  402. case CSS::ValueID::LibwebCenter:
  403. return CSS::TextAlign::LibwebCenter;
  404. default:
  405. return {};
  406. }
  407. }
  408. Optional<CSS::TextJustify> StyleProperties::text_justify() const
  409. {
  410. auto value = property(CSS::PropertyID::TextJustify);
  411. if (!value.has_value())
  412. return {};
  413. switch (value.value()->to_identifier()) {
  414. case CSS::ValueID::Auto:
  415. return CSS::TextJustify::Auto;
  416. case CSS::ValueID::None:
  417. return CSS::TextJustify::None;
  418. case CSS::ValueID::InterWord:
  419. return CSS::TextJustify::InterWord;
  420. case CSS::ValueID::Distribute:
  421. case CSS::ValueID::InterCharacter:
  422. return CSS::TextJustify::InterCharacter;
  423. default:
  424. return {};
  425. }
  426. }
  427. Optional<CSS::PointerEvents> StyleProperties::pointer_events() const
  428. {
  429. auto value = property(CSS::PropertyID::PointerEvents);
  430. if (!value.has_value())
  431. return {};
  432. switch (value.value()->to_identifier()) {
  433. case CSS::ValueID::Auto:
  434. return CSS::PointerEvents::Auto;
  435. case CSS::ValueID::All:
  436. return CSS::PointerEvents::All;
  437. case CSS::ValueID::None:
  438. return CSS::PointerEvents::None;
  439. default:
  440. return {};
  441. }
  442. }
  443. Optional<CSS::WhiteSpace> StyleProperties::white_space() const
  444. {
  445. auto value = property(CSS::PropertyID::WhiteSpace);
  446. if (!value.has_value())
  447. return {};
  448. switch (value.value()->to_identifier()) {
  449. case CSS::ValueID::Normal:
  450. return CSS::WhiteSpace::Normal;
  451. case CSS::ValueID::Nowrap:
  452. return CSS::WhiteSpace::Nowrap;
  453. case CSS::ValueID::Pre:
  454. return CSS::WhiteSpace::Pre;
  455. case CSS::ValueID::PreLine:
  456. return CSS::WhiteSpace::PreLine;
  457. case CSS::ValueID::PreWrap:
  458. return CSS::WhiteSpace::PreWrap;
  459. default:
  460. return {};
  461. }
  462. }
  463. Optional<CSS::LineStyle> StyleProperties::line_style(CSS::PropertyID property_id) const
  464. {
  465. auto value = property(property_id);
  466. if (!value.has_value())
  467. return {};
  468. switch (value.value()->to_identifier()) {
  469. case CSS::ValueID::None:
  470. return CSS::LineStyle::None;
  471. case CSS::ValueID::Hidden:
  472. return CSS::LineStyle::Hidden;
  473. case CSS::ValueID::Dotted:
  474. return CSS::LineStyle::Dotted;
  475. case CSS::ValueID::Dashed:
  476. return CSS::LineStyle::Dashed;
  477. case CSS::ValueID::Solid:
  478. return CSS::LineStyle::Solid;
  479. case CSS::ValueID::Double:
  480. return CSS::LineStyle::Double;
  481. case CSS::ValueID::Groove:
  482. return CSS::LineStyle::Groove;
  483. case CSS::ValueID::Ridge:
  484. return CSS::LineStyle::Ridge;
  485. case CSS::ValueID::Inset:
  486. return CSS::LineStyle::Inset;
  487. case CSS::ValueID::Outset:
  488. return CSS::LineStyle::Outset;
  489. default:
  490. return {};
  491. }
  492. }
  493. Optional<CSS::Float> StyleProperties::float_() const
  494. {
  495. auto value = property(CSS::PropertyID::Float);
  496. if (!value.has_value())
  497. return {};
  498. switch (value.value()->to_identifier()) {
  499. case CSS::ValueID::None:
  500. return CSS::Float::None;
  501. case CSS::ValueID::Left:
  502. return CSS::Float::Left;
  503. case CSS::ValueID::Right:
  504. return CSS::Float::Right;
  505. default:
  506. return {};
  507. }
  508. }
  509. Optional<CSS::Clear> StyleProperties::clear() const
  510. {
  511. auto value = property(CSS::PropertyID::Clear);
  512. if (!value.has_value())
  513. return {};
  514. switch (value.value()->to_identifier()) {
  515. case CSS::ValueID::None:
  516. return CSS::Clear::None;
  517. case CSS::ValueID::Left:
  518. return CSS::Clear::Left;
  519. case CSS::ValueID::Right:
  520. return CSS::Clear::Right;
  521. case CSS::ValueID::Both:
  522. return CSS::Clear::Both;
  523. default:
  524. return {};
  525. }
  526. }
  527. CSS::ContentData StyleProperties::content() const
  528. {
  529. auto maybe_value = property(CSS::PropertyID::Content);
  530. if (!maybe_value.has_value())
  531. return CSS::ContentData {};
  532. auto& value = maybe_value.value();
  533. if (value->is_content()) {
  534. auto& content_style_value = value->as_content();
  535. CSS::ContentData content_data;
  536. // FIXME: The content is a list of things: strings, identifiers or functions that return strings, and images.
  537. // So it can't always be represented as a single String, but may have to be multiple boxes.
  538. // For now, we'll just assume strings since that is easiest.
  539. StringBuilder builder;
  540. for (auto const& item : content_style_value.content().values()) {
  541. if (item.is_string()) {
  542. builder.append(item.to_string());
  543. } else {
  544. // TODO: Implement quotes, counters, images, and other things.
  545. }
  546. }
  547. content_data.type = ContentData::Type::String;
  548. content_data.data = builder.to_string();
  549. if (content_style_value.has_alt_text()) {
  550. StringBuilder alt_text_builder;
  551. for (auto const& item : content_style_value.alt_text()->values()) {
  552. if (item.is_string()) {
  553. alt_text_builder.append(item.to_string());
  554. } else {
  555. // TODO: Implement counters
  556. }
  557. }
  558. content_data.alt_text = alt_text_builder.to_string();
  559. }
  560. return content_data;
  561. }
  562. switch (value->to_identifier()) {
  563. case ValueID::None:
  564. return { ContentData::Type::None };
  565. case ValueID::Normal:
  566. return { ContentData::Type::Normal };
  567. default:
  568. break;
  569. }
  570. return CSS::ContentData {};
  571. }
  572. Optional<CSS::Cursor> StyleProperties::cursor() const
  573. {
  574. auto value = property(CSS::PropertyID::Cursor);
  575. if (!value.has_value())
  576. return {};
  577. switch (value.value()->to_identifier()) {
  578. case CSS::ValueID::Auto:
  579. return CSS::Cursor::Auto;
  580. case CSS::ValueID::Default:
  581. return CSS::Cursor::Default;
  582. case CSS::ValueID::None:
  583. return CSS::Cursor::None;
  584. case CSS::ValueID::ContextMenu:
  585. return CSS::Cursor::ContextMenu;
  586. case CSS::ValueID::Help:
  587. return CSS::Cursor::Help;
  588. case CSS::ValueID::Pointer:
  589. return CSS::Cursor::Pointer;
  590. case CSS::ValueID::Progress:
  591. return CSS::Cursor::Progress;
  592. case CSS::ValueID::Wait:
  593. return CSS::Cursor::Wait;
  594. case CSS::ValueID::Cell:
  595. return CSS::Cursor::Cell;
  596. case CSS::ValueID::Crosshair:
  597. return CSS::Cursor::Crosshair;
  598. case CSS::ValueID::Text:
  599. return CSS::Cursor::Text;
  600. case CSS::ValueID::VerticalText:
  601. return CSS::Cursor::VerticalText;
  602. case CSS::ValueID::Alias:
  603. return CSS::Cursor::Alias;
  604. case CSS::ValueID::Copy:
  605. return CSS::Cursor::Copy;
  606. case CSS::ValueID::Move:
  607. return CSS::Cursor::Move;
  608. case CSS::ValueID::NoDrop:
  609. return CSS::Cursor::NoDrop;
  610. case CSS::ValueID::NotAllowed:
  611. return CSS::Cursor::NotAllowed;
  612. case CSS::ValueID::Grab:
  613. return CSS::Cursor::Grab;
  614. case CSS::ValueID::Grabbing:
  615. return CSS::Cursor::Grabbing;
  616. case CSS::ValueID::EResize:
  617. return CSS::Cursor::EResize;
  618. case CSS::ValueID::NResize:
  619. return CSS::Cursor::NResize;
  620. case CSS::ValueID::NeResize:
  621. return CSS::Cursor::NeResize;
  622. case CSS::ValueID::NwResize:
  623. return CSS::Cursor::NwResize;
  624. case CSS::ValueID::SResize:
  625. return CSS::Cursor::SResize;
  626. case CSS::ValueID::SeResize:
  627. return CSS::Cursor::SeResize;
  628. case CSS::ValueID::SwResize:
  629. return CSS::Cursor::SwResize;
  630. case CSS::ValueID::WResize:
  631. return CSS::Cursor::WResize;
  632. case CSS::ValueID::EwResize:
  633. return CSS::Cursor::EwResize;
  634. case CSS::ValueID::NsResize:
  635. return CSS::Cursor::NsResize;
  636. case CSS::ValueID::NeswResize:
  637. return CSS::Cursor::NeswResize;
  638. case CSS::ValueID::NwseResize:
  639. return CSS::Cursor::NwseResize;
  640. case CSS::ValueID::ColResize:
  641. return CSS::Cursor::ColResize;
  642. case CSS::ValueID::RowResize:
  643. return CSS::Cursor::RowResize;
  644. case CSS::ValueID::AllScroll:
  645. return CSS::Cursor::AllScroll;
  646. case CSS::ValueID::ZoomIn:
  647. return CSS::Cursor::ZoomIn;
  648. case CSS::ValueID::ZoomOut:
  649. return CSS::Cursor::ZoomOut;
  650. default:
  651. return {};
  652. }
  653. }
  654. Optional<CSS::Visibility> StyleProperties::visibility() const
  655. {
  656. auto value = property(CSS::PropertyID::Visibility);
  657. if (!value.has_value() || !value.value()->is_identifier())
  658. return {};
  659. switch (value.value()->to_identifier()) {
  660. case CSS::ValueID::Visible:
  661. return CSS::Visibility::Visible;
  662. case CSS::ValueID::Hidden:
  663. return CSS::Visibility::Hidden;
  664. case CSS::ValueID::Collapse:
  665. return CSS::Visibility::Collapse;
  666. default:
  667. return {};
  668. }
  669. }
  670. CSS::Display StyleProperties::display() const
  671. {
  672. auto value = property(CSS::PropertyID::Display);
  673. if (!value.has_value() || !value.value()->is_identifier())
  674. return CSS::Display::from_short(CSS::Display::Short::Inline);
  675. switch (value.value()->to_identifier()) {
  676. case CSS::ValueID::None:
  677. return CSS::Display::from_short(CSS::Display::Short::None);
  678. case CSS::ValueID::Block:
  679. return CSS::Display::from_short(CSS::Display::Short::Block);
  680. case CSS::ValueID::Inline:
  681. return CSS::Display::from_short(CSS::Display::Short::Inline);
  682. case CSS::ValueID::InlineBlock:
  683. return CSS::Display::from_short(CSS::Display::Short::InlineBlock);
  684. case CSS::ValueID::ListItem:
  685. return CSS::Display::from_short(CSS::Display::Short::ListItem);
  686. case CSS::ValueID::Table:
  687. return CSS::Display::from_short(CSS::Display::Short::Table);
  688. case CSS::ValueID::TableRow:
  689. return CSS::Display { CSS::Display::Internal::TableRow };
  690. case CSS::ValueID::TableCell:
  691. return CSS::Display { CSS::Display::Internal::TableCell };
  692. case CSS::ValueID::TableColumn:
  693. return CSS::Display { CSS::Display::Internal::TableColumn };
  694. case CSS::ValueID::TableColumnGroup:
  695. return CSS::Display { CSS::Display::Internal::TableColumnGroup };
  696. case CSS::ValueID::TableCaption:
  697. return CSS::Display { CSS::Display::Internal::TableCaption };
  698. case CSS::ValueID::TableRowGroup:
  699. return CSS::Display { CSS::Display::Internal::TableRowGroup };
  700. case CSS::ValueID::TableHeaderGroup:
  701. return CSS::Display { CSS::Display::Internal::TableHeaderGroup };
  702. case CSS::ValueID::TableFooterGroup:
  703. return CSS::Display { CSS::Display::Internal::TableFooterGroup };
  704. case CSS::ValueID::Flex:
  705. return CSS::Display::from_short(CSS::Display::Short::Flex);
  706. case CSS::ValueID::InlineFlex:
  707. return CSS::Display::from_short(CSS::Display::Short::InlineFlex);
  708. default:
  709. return CSS::Display::from_short(CSS::Display::Short::Block);
  710. }
  711. }
  712. Optional<CSS::TextDecorationLine> StyleProperties::text_decoration_line() const
  713. {
  714. auto value = property(CSS::PropertyID::TextDecorationLine);
  715. if (!value.has_value())
  716. return {};
  717. switch (value.value()->to_identifier()) {
  718. case CSS::ValueID::None:
  719. return CSS::TextDecorationLine::None;
  720. case CSS::ValueID::Underline:
  721. return CSS::TextDecorationLine::Underline;
  722. case CSS::ValueID::Overline:
  723. return CSS::TextDecorationLine::Overline;
  724. case CSS::ValueID::LineThrough:
  725. return CSS::TextDecorationLine::LineThrough;
  726. case CSS::ValueID::Blink:
  727. return CSS::TextDecorationLine::Blink;
  728. default:
  729. return {};
  730. }
  731. }
  732. Optional<CSS::TextDecorationStyle> StyleProperties::text_decoration_style() const
  733. {
  734. auto value = property(CSS::PropertyID::TextDecorationStyle);
  735. if (!value.has_value())
  736. return {};
  737. switch (value.value()->to_identifier()) {
  738. case CSS::ValueID::Solid:
  739. return CSS::TextDecorationStyle::Solid;
  740. case CSS::ValueID::Double:
  741. return CSS::TextDecorationStyle::Double;
  742. case CSS::ValueID::Dotted:
  743. return CSS::TextDecorationStyle::Dotted;
  744. case CSS::ValueID::Dashed:
  745. return CSS::TextDecorationStyle::Dashed;
  746. case CSS::ValueID::Wavy:
  747. return CSS::TextDecorationStyle::Wavy;
  748. default:
  749. return {};
  750. }
  751. }
  752. Optional<CSS::TextTransform> StyleProperties::text_transform() const
  753. {
  754. auto value = property(CSS::PropertyID::TextTransform);
  755. if (!value.has_value())
  756. return {};
  757. switch (value.value()->to_identifier()) {
  758. case CSS::ValueID::None:
  759. return CSS::TextTransform::None;
  760. case CSS::ValueID::Lowercase:
  761. return CSS::TextTransform::Lowercase;
  762. case CSS::ValueID::Uppercase:
  763. return CSS::TextTransform::Uppercase;
  764. case CSS::ValueID::Capitalize:
  765. return CSS::TextTransform::Capitalize;
  766. case CSS::ValueID::FullWidth:
  767. return CSS::TextTransform::FullWidth;
  768. case CSS::ValueID::FullSizeKana:
  769. return CSS::TextTransform::FullSizeKana;
  770. default:
  771. return {};
  772. }
  773. }
  774. Optional<CSS::ListStyleType> StyleProperties::list_style_type() const
  775. {
  776. auto value = property(CSS::PropertyID::ListStyleType);
  777. if (!value.has_value())
  778. return {};
  779. switch (value.value()->to_identifier()) {
  780. case CSS::ValueID::None:
  781. return CSS::ListStyleType::None;
  782. case CSS::ValueID::Disc:
  783. return CSS::ListStyleType::Disc;
  784. case CSS::ValueID::Circle:
  785. return CSS::ListStyleType::Circle;
  786. case CSS::ValueID::Square:
  787. return CSS::ListStyleType::Square;
  788. case CSS::ValueID::Decimal:
  789. return CSS::ListStyleType::Decimal;
  790. case CSS::ValueID::DecimalLeadingZero:
  791. return CSS::ListStyleType::DecimalLeadingZero;
  792. case CSS::ValueID::LowerAlpha:
  793. return CSS::ListStyleType::LowerAlpha;
  794. case CSS::ValueID::LowerLatin:
  795. return CSS::ListStyleType::LowerLatin;
  796. case CSS::ValueID::UpperAlpha:
  797. return CSS::ListStyleType::UpperAlpha;
  798. case CSS::ValueID::UpperLatin:
  799. return CSS::ListStyleType::UpperLatin;
  800. case CSS::ValueID::UpperRoman:
  801. return CSS::ListStyleType::UpperRoman;
  802. case CSS::ValueID::LowerRoman:
  803. return CSS::ListStyleType::LowerRoman;
  804. default:
  805. return {};
  806. }
  807. }
  808. Optional<CSS::Overflow> StyleProperties::overflow_x() const
  809. {
  810. return overflow(CSS::PropertyID::OverflowX);
  811. }
  812. Optional<CSS::Overflow> StyleProperties::overflow_y() const
  813. {
  814. return overflow(CSS::PropertyID::OverflowY);
  815. }
  816. Optional<CSS::Overflow> StyleProperties::overflow(CSS::PropertyID property_id) const
  817. {
  818. auto value = property(property_id);
  819. if (!value.has_value())
  820. return {};
  821. switch (value.value()->to_identifier()) {
  822. case CSS::ValueID::Auto:
  823. return CSS::Overflow::Auto;
  824. case CSS::ValueID::Visible:
  825. return CSS::Overflow::Visible;
  826. case CSS::ValueID::Hidden:
  827. return CSS::Overflow::Hidden;
  828. case CSS::ValueID::Clip:
  829. return CSS::Overflow::Clip;
  830. case CSS::ValueID::Scroll:
  831. return CSS::Overflow::Scroll;
  832. default:
  833. return {};
  834. }
  835. }
  836. Vector<ShadowData> StyleProperties::shadow(PropertyID property_id) const
  837. {
  838. auto value_or_error = property(property_id);
  839. if (!value_or_error.has_value())
  840. return {};
  841. auto value = value_or_error.value();
  842. auto make_shadow_data = [](ShadowStyleValue const& value) {
  843. return ShadowData { value.color(), value.offset_x(), value.offset_y(), value.blur_radius(), value.spread_distance(), value.placement() };
  844. };
  845. if (value->is_value_list()) {
  846. auto& value_list = value->as_value_list();
  847. Vector<ShadowData> shadow_data;
  848. shadow_data.ensure_capacity(value_list.size());
  849. for (auto const& layer_value : value_list.values())
  850. shadow_data.append(make_shadow_data(layer_value.as_shadow()));
  851. return shadow_data;
  852. }
  853. if (value->is_shadow()) {
  854. auto& box = value->as_shadow();
  855. return { make_shadow_data(box) };
  856. }
  857. return {};
  858. }
  859. Vector<ShadowData> StyleProperties::box_shadow() const
  860. {
  861. return shadow(PropertyID::BoxShadow);
  862. }
  863. Vector<ShadowData> StyleProperties::text_shadow() const
  864. {
  865. return shadow(PropertyID::TextShadow);
  866. }
  867. CSS::BoxSizing StyleProperties::box_sizing() const
  868. {
  869. auto value = property(CSS::PropertyID::BoxSizing);
  870. if (!value.has_value())
  871. return {};
  872. switch (value.value()->to_identifier()) {
  873. case CSS::ValueID::BorderBox:
  874. return CSS::BoxSizing::BorderBox;
  875. case CSS::ValueID::ContentBox:
  876. return CSS::BoxSizing::ContentBox;
  877. default:
  878. return {};
  879. }
  880. }
  881. Variant<CSS::VerticalAlign, CSS::LengthPercentage> StyleProperties::vertical_align() const
  882. {
  883. auto value = property(CSS::PropertyID::VerticalAlign);
  884. if (!value.has_value())
  885. VERIFY_NOT_REACHED();
  886. if (value.value()->is_identifier()) {
  887. switch (value.value()->to_identifier()) {
  888. case CSS::ValueID::Baseline:
  889. return CSS::VerticalAlign::Baseline;
  890. case CSS::ValueID::Bottom:
  891. return CSS::VerticalAlign::Bottom;
  892. case CSS::ValueID::Middle:
  893. return CSS::VerticalAlign::Middle;
  894. case CSS::ValueID::Sub:
  895. return CSS::VerticalAlign::Sub;
  896. case CSS::ValueID::Super:
  897. return CSS::VerticalAlign::Super;
  898. case CSS::ValueID::TextBottom:
  899. return CSS::VerticalAlign::TextBottom;
  900. case CSS::ValueID::TextTop:
  901. return CSS::VerticalAlign::TextTop;
  902. case CSS::ValueID::Top:
  903. return CSS::VerticalAlign::Top;
  904. default:
  905. VERIFY_NOT_REACHED();
  906. }
  907. }
  908. if (value.value()->is_length())
  909. return CSS::LengthPercentage(value.value()->to_length());
  910. if (value.value()->is_percentage())
  911. return CSS::LengthPercentage(value.value()->as_percentage().percentage());
  912. VERIFY_NOT_REACHED();
  913. }
  914. Optional<CSS::FontVariant> StyleProperties::font_variant() const
  915. {
  916. auto value = property(CSS::PropertyID::FontVariant);
  917. if (!value.has_value())
  918. return {};
  919. switch (value.value()->to_identifier()) {
  920. case CSS::ValueID::Normal:
  921. return CSS::FontVariant::Normal;
  922. case CSS::ValueID::SmallCaps:
  923. return CSS::FontVariant::SmallCaps;
  924. default:
  925. return {};
  926. }
  927. }
  928. }