MediaQuery.cpp 17 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506
  1. /*
  2. * Copyright (c) 2021, Sam Atkins <atkinssj@serenityos.org>
  3. *
  4. * SPDX-License-Identifier: BSD-2-Clause
  5. */
  6. #include <LibWeb/CSS/MediaQuery.h>
  7. #include <LibWeb/CSS/Serialize.h>
  8. #include <LibWeb/DOM/Document.h>
  9. #include <LibWeb/HTML/Window.h>
  10. namespace Web::CSS {
  11. NonnullRefPtr<MediaQuery> MediaQuery::create_not_all()
  12. {
  13. auto media_query = new MediaQuery;
  14. media_query->m_negated = true;
  15. media_query->m_media_type = MediaType::All;
  16. return adopt_ref(*media_query);
  17. }
  18. ErrorOr<String> MediaFeatureValue::to_string() const
  19. {
  20. return m_value.visit(
  21. [](ValueID const& ident) { return String::from_utf8(string_from_value_id(ident)); },
  22. [](Length const& length) { return length.to_string(); },
  23. [](Ratio const& ratio) { return ratio.to_string(); },
  24. [](Resolution const& resolution) { return resolution.to_string(); },
  25. [](float number) { return String::number(number); });
  26. }
  27. bool MediaFeatureValue::is_same_type(MediaFeatureValue const& other) const
  28. {
  29. return m_value.visit(
  30. [&](ValueID const&) { return other.is_ident(); },
  31. [&](Length const&) { return other.is_length(); },
  32. [&](Ratio const&) { return other.is_ratio(); },
  33. [&](Resolution const&) { return other.is_resolution(); },
  34. [&](float) { return other.is_number(); });
  35. }
  36. ErrorOr<String> MediaFeature::to_string() const
  37. {
  38. auto comparison_string = [](Comparison comparison) -> StringView {
  39. switch (comparison) {
  40. case Comparison::Equal:
  41. return "="sv;
  42. case Comparison::LessThan:
  43. return "<"sv;
  44. case Comparison::LessThanOrEqual:
  45. return "<="sv;
  46. case Comparison::GreaterThan:
  47. return ">"sv;
  48. case Comparison::GreaterThanOrEqual:
  49. return ">="sv;
  50. }
  51. VERIFY_NOT_REACHED();
  52. };
  53. switch (m_type) {
  54. case Type::IsTrue:
  55. return String::from_utf8(string_from_media_feature_id(m_id));
  56. case Type::ExactValue:
  57. return String::formatted("{}:{}", string_from_media_feature_id(m_id), TRY(m_value->to_string()));
  58. case Type::MinValue:
  59. return String::formatted("min-{}:{}", string_from_media_feature_id(m_id), TRY(m_value->to_string()));
  60. case Type::MaxValue:
  61. return String::formatted("max-{}:{}", string_from_media_feature_id(m_id), TRY(m_value->to_string()));
  62. case Type::Range:
  63. if (!m_range->right_comparison.has_value())
  64. return String::formatted("{} {} {}", TRY(m_range->left_value.to_string()), comparison_string(m_range->left_comparison), string_from_media_feature_id(m_id));
  65. return String::formatted("{} {} {} {} {}", TRY(m_range->left_value.to_string()), comparison_string(m_range->left_comparison), string_from_media_feature_id(m_id), comparison_string(*m_range->right_comparison), TRY(m_range->right_value->to_string()));
  66. }
  67. VERIFY_NOT_REACHED();
  68. }
  69. bool MediaFeature::evaluate(HTML::Window const& window) const
  70. {
  71. auto maybe_queried_value = window.query_media_feature(m_id);
  72. if (!maybe_queried_value.has_value())
  73. return false;
  74. auto queried_value = maybe_queried_value.release_value();
  75. switch (m_type) {
  76. case Type::IsTrue:
  77. if (queried_value.is_number())
  78. return queried_value.number() != 0;
  79. if (queried_value.is_length())
  80. return queried_value.length().raw_value() != 0;
  81. // FIXME: I couldn't figure out from the spec how ratios should be evaluated in a boolean context.
  82. if (queried_value.is_ratio())
  83. return !queried_value.ratio().is_degenerate();
  84. if (queried_value.is_resolution())
  85. return queried_value.resolution().to_dots_per_pixel() != 0;
  86. if (queried_value.is_ident()) {
  87. // NOTE: It is not technically correct to always treat `no-preference` as false, but every
  88. // media-feature that accepts it as a value treats it as false, so good enough. :^)
  89. // If other features gain this property for other identifiers in the future, we can
  90. // add more robust handling for them then.
  91. return queried_value.ident() != ValueID::None
  92. && queried_value.ident() != ValueID::NoPreference;
  93. }
  94. return false;
  95. case Type::ExactValue:
  96. return compare(window, *m_value, Comparison::Equal, queried_value);
  97. case Type::MinValue:
  98. return compare(window, queried_value, Comparison::GreaterThanOrEqual, *m_value);
  99. case Type::MaxValue:
  100. return compare(window, queried_value, Comparison::LessThanOrEqual, *m_value);
  101. case Type::Range:
  102. if (!compare(window, m_range->left_value, m_range->left_comparison, queried_value))
  103. return false;
  104. if (m_range->right_comparison.has_value())
  105. if (!compare(window, queried_value, *m_range->right_comparison, *m_range->right_value))
  106. return false;
  107. return true;
  108. }
  109. VERIFY_NOT_REACHED();
  110. }
  111. bool MediaFeature::compare(HTML::Window const& window, MediaFeatureValue left, Comparison comparison, MediaFeatureValue right)
  112. {
  113. if (!left.is_same_type(right))
  114. return false;
  115. if (left.is_ident()) {
  116. if (comparison == Comparison::Equal)
  117. return left.ident() == right.ident();
  118. return false;
  119. }
  120. if (left.is_number()) {
  121. switch (comparison) {
  122. case Comparison::Equal:
  123. return left.number() == right.number();
  124. case Comparison::LessThan:
  125. return left.number() < right.number();
  126. case Comparison::LessThanOrEqual:
  127. return left.number() <= right.number();
  128. case Comparison::GreaterThan:
  129. return left.number() > right.number();
  130. case Comparison::GreaterThanOrEqual:
  131. return left.number() >= right.number();
  132. }
  133. VERIFY_NOT_REACHED();
  134. }
  135. if (left.is_length()) {
  136. CSSPixels left_px;
  137. CSSPixels right_px;
  138. // Save ourselves some work if neither side is a relative length.
  139. if (left.length().is_absolute() && right.length().is_absolute()) {
  140. left_px = left.length().absolute_length_to_px();
  141. right_px = right.length().absolute_length_to_px();
  142. } else {
  143. auto viewport_rect = window.page()->web_exposed_screen_area();
  144. auto const& initial_font = window.associated_document().style_computer().initial_font();
  145. Gfx::FontPixelMetrics const& initial_font_metrics = initial_font.pixel_metrics();
  146. float initial_font_size = initial_font.presentation_size();
  147. float initial_line_height = initial_font_metrics.line_spacing();
  148. left_px = left.length().to_px(viewport_rect, initial_font_metrics, initial_font_size, initial_font_size, initial_line_height, initial_line_height);
  149. right_px = right.length().to_px(viewport_rect, initial_font_metrics, initial_font_size, initial_font_size, initial_line_height, initial_line_height);
  150. }
  151. switch (comparison) {
  152. case Comparison::Equal:
  153. return left_px == right_px;
  154. case Comparison::LessThan:
  155. return left_px < right_px;
  156. case Comparison::LessThanOrEqual:
  157. return left_px <= right_px;
  158. case Comparison::GreaterThan:
  159. return left_px > right_px;
  160. case Comparison::GreaterThanOrEqual:
  161. return left_px >= right_px;
  162. }
  163. VERIFY_NOT_REACHED();
  164. }
  165. if (left.is_ratio()) {
  166. auto left_decimal = left.ratio().value();
  167. auto right_decimal = right.ratio().value();
  168. switch (comparison) {
  169. case Comparison::Equal:
  170. return left_decimal == right_decimal;
  171. case Comparison::LessThan:
  172. return left_decimal < right_decimal;
  173. case Comparison::LessThanOrEqual:
  174. return left_decimal <= right_decimal;
  175. case Comparison::GreaterThan:
  176. return left_decimal > right_decimal;
  177. case Comparison::GreaterThanOrEqual:
  178. return left_decimal >= right_decimal;
  179. }
  180. VERIFY_NOT_REACHED();
  181. }
  182. if (left.is_resolution()) {
  183. auto left_dppx = left.resolution().to_dots_per_pixel();
  184. auto right_dppx = right.resolution().to_dots_per_pixel();
  185. switch (comparison) {
  186. case Comparison::Equal:
  187. return left_dppx == right_dppx;
  188. case Comparison::LessThan:
  189. return left_dppx < right_dppx;
  190. case Comparison::LessThanOrEqual:
  191. return left_dppx <= right_dppx;
  192. case Comparison::GreaterThan:
  193. return left_dppx > right_dppx;
  194. case Comparison::GreaterThanOrEqual:
  195. return left_dppx >= right_dppx;
  196. }
  197. VERIFY_NOT_REACHED();
  198. }
  199. VERIFY_NOT_REACHED();
  200. }
  201. NonnullOwnPtr<MediaCondition> MediaCondition::from_general_enclosed(GeneralEnclosed&& general_enclosed)
  202. {
  203. auto result = new MediaCondition;
  204. result->type = Type::GeneralEnclosed;
  205. result->general_enclosed = move(general_enclosed);
  206. return adopt_own(*result);
  207. }
  208. NonnullOwnPtr<MediaCondition> MediaCondition::from_feature(MediaFeature&& feature)
  209. {
  210. auto result = new MediaCondition;
  211. result->type = Type::Single;
  212. result->feature = move(feature);
  213. return adopt_own(*result);
  214. }
  215. NonnullOwnPtr<MediaCondition> MediaCondition::from_not(NonnullOwnPtr<MediaCondition>&& condition)
  216. {
  217. auto result = new MediaCondition;
  218. result->type = Type::Not;
  219. result->conditions.append(move(condition));
  220. return adopt_own(*result);
  221. }
  222. NonnullOwnPtr<MediaCondition> MediaCondition::from_and_list(Vector<NonnullOwnPtr<MediaCondition>>&& conditions)
  223. {
  224. auto result = new MediaCondition;
  225. result->type = Type::And;
  226. result->conditions = move(conditions);
  227. return adopt_own(*result);
  228. }
  229. NonnullOwnPtr<MediaCondition> MediaCondition::from_or_list(Vector<NonnullOwnPtr<MediaCondition>>&& conditions)
  230. {
  231. auto result = new MediaCondition;
  232. result->type = Type::Or;
  233. result->conditions = move(conditions);
  234. return adopt_own(*result);
  235. }
  236. ErrorOr<String> MediaCondition::to_string() const
  237. {
  238. StringBuilder builder;
  239. builder.append('(');
  240. switch (type) {
  241. case Type::Single:
  242. builder.append(TRY(feature->to_string()));
  243. break;
  244. case Type::Not:
  245. builder.append("not "sv);
  246. builder.append(TRY(conditions.first()->to_string()));
  247. break;
  248. case Type::And:
  249. builder.join(" and "sv, conditions);
  250. break;
  251. case Type::Or:
  252. builder.join(" or "sv, conditions);
  253. break;
  254. case Type::GeneralEnclosed:
  255. builder.append(general_enclosed->to_string());
  256. break;
  257. }
  258. builder.append(')');
  259. return builder.to_string();
  260. }
  261. MatchResult MediaCondition::evaluate(HTML::Window const& window) const
  262. {
  263. switch (type) {
  264. case Type::Single:
  265. return as_match_result(feature->evaluate(window));
  266. case Type::Not:
  267. return negate(conditions.first()->evaluate(window));
  268. case Type::And:
  269. return evaluate_and(conditions, [&](auto& child) { return child->evaluate(window); });
  270. case Type::Or:
  271. return evaluate_or(conditions, [&](auto& child) { return child->evaluate(window); });
  272. case Type::GeneralEnclosed:
  273. return general_enclosed->evaluate();
  274. }
  275. VERIFY_NOT_REACHED();
  276. }
  277. ErrorOr<String> MediaQuery::to_string() const
  278. {
  279. StringBuilder builder;
  280. if (m_negated)
  281. builder.append("not "sv);
  282. if (m_negated || m_media_type != MediaType::All || !m_media_condition) {
  283. builder.append(CSS::to_string(m_media_type));
  284. if (m_media_condition)
  285. builder.append(" and "sv);
  286. }
  287. if (m_media_condition) {
  288. builder.append(TRY(m_media_condition->to_string()));
  289. }
  290. return builder.to_string();
  291. }
  292. bool MediaQuery::evaluate(HTML::Window const& window)
  293. {
  294. auto matches_media = [](MediaType media) -> MatchResult {
  295. switch (media) {
  296. case MediaType::All:
  297. return MatchResult::True;
  298. case MediaType::Print:
  299. // FIXME: Enable for printing, when we have printing!
  300. return MatchResult::False;
  301. case MediaType::Screen:
  302. // FIXME: Disable for printing, when we have printing!
  303. return MatchResult::True;
  304. case MediaType::Unknown:
  305. return MatchResult::False;
  306. // Deprecated, must never match:
  307. case MediaType::TTY:
  308. case MediaType::TV:
  309. case MediaType::Projection:
  310. case MediaType::Handheld:
  311. case MediaType::Braille:
  312. case MediaType::Embossed:
  313. case MediaType::Aural:
  314. case MediaType::Speech:
  315. return MatchResult::False;
  316. }
  317. VERIFY_NOT_REACHED();
  318. };
  319. MatchResult result = matches_media(m_media_type);
  320. if ((result == MatchResult::True) && m_media_condition)
  321. result = m_media_condition->evaluate(window);
  322. if (m_negated)
  323. result = negate(result);
  324. m_matches = result == MatchResult::True;
  325. return m_matches;
  326. }
  327. // https://www.w3.org/TR/cssom-1/#serialize-a-media-query-list
  328. ErrorOr<String> serialize_a_media_query_list(Vector<NonnullRefPtr<MediaQuery>> const& media_queries)
  329. {
  330. // 1. If the media query list is empty, then return the empty string.
  331. if (media_queries.is_empty())
  332. return String {};
  333. // 2. Serialize each media query in the list of media queries, in the same order as they
  334. // appear in the media query list, and then serialize the list.
  335. return String::join(", "sv, media_queries);
  336. }
  337. bool is_media_feature_name(StringView name)
  338. {
  339. // MEDIAQUERIES-4 - https://www.w3.org/TR/mediaqueries-4/#media-descriptor-table
  340. if (name.equals_ignoring_ascii_case("any-hover"sv))
  341. return true;
  342. if (name.equals_ignoring_ascii_case("any-pointer"sv))
  343. return true;
  344. if (name.equals_ignoring_ascii_case("aspect-ratio"sv))
  345. return true;
  346. if (name.equals_ignoring_ascii_case("color"sv))
  347. return true;
  348. if (name.equals_ignoring_ascii_case("color-gamut"sv))
  349. return true;
  350. if (name.equals_ignoring_ascii_case("color-index"sv))
  351. return true;
  352. if (name.equals_ignoring_ascii_case("device-aspect-ratio"sv))
  353. return true;
  354. if (name.equals_ignoring_ascii_case("device-height"sv))
  355. return true;
  356. if (name.equals_ignoring_ascii_case("device-width"sv))
  357. return true;
  358. if (name.equals_ignoring_ascii_case("grid"sv))
  359. return true;
  360. if (name.equals_ignoring_ascii_case("height"sv))
  361. return true;
  362. if (name.equals_ignoring_ascii_case("hover"sv))
  363. return true;
  364. if (name.equals_ignoring_ascii_case("monochrome"sv))
  365. return true;
  366. if (name.equals_ignoring_ascii_case("orientation"sv))
  367. return true;
  368. if (name.equals_ignoring_ascii_case("overflow-block"sv))
  369. return true;
  370. if (name.equals_ignoring_ascii_case("overflow-inline"sv))
  371. return true;
  372. if (name.equals_ignoring_ascii_case("pointer"sv))
  373. return true;
  374. if (name.equals_ignoring_ascii_case("resolution"sv))
  375. return true;
  376. if (name.equals_ignoring_ascii_case("scan"sv))
  377. return true;
  378. if (name.equals_ignoring_ascii_case("update"sv))
  379. return true;
  380. if (name.equals_ignoring_ascii_case("width"sv))
  381. return true;
  382. // MEDIAQUERIES-5 - https://www.w3.org/TR/mediaqueries-5/#media-descriptor-table
  383. if (name.equals_ignoring_ascii_case("prefers-color-scheme"sv))
  384. return true;
  385. // FIXME: Add other level 5 feature names
  386. return false;
  387. }
  388. MediaQuery::MediaType media_type_from_string(StringView name)
  389. {
  390. if (name.equals_ignoring_ascii_case("all"sv))
  391. return MediaQuery::MediaType::All;
  392. if (name.equals_ignoring_ascii_case("aural"sv))
  393. return MediaQuery::MediaType::Aural;
  394. if (name.equals_ignoring_ascii_case("braille"sv))
  395. return MediaQuery::MediaType::Braille;
  396. if (name.equals_ignoring_ascii_case("embossed"sv))
  397. return MediaQuery::MediaType::Embossed;
  398. if (name.equals_ignoring_ascii_case("handheld"sv))
  399. return MediaQuery::MediaType::Handheld;
  400. if (name.equals_ignoring_ascii_case("print"sv))
  401. return MediaQuery::MediaType::Print;
  402. if (name.equals_ignoring_ascii_case("projection"sv))
  403. return MediaQuery::MediaType::Projection;
  404. if (name.equals_ignoring_ascii_case("screen"sv))
  405. return MediaQuery::MediaType::Screen;
  406. if (name.equals_ignoring_ascii_case("speech"sv))
  407. return MediaQuery::MediaType::Speech;
  408. if (name.equals_ignoring_ascii_case("tty"sv))
  409. return MediaQuery::MediaType::TTY;
  410. if (name.equals_ignoring_ascii_case("tv"sv))
  411. return MediaQuery::MediaType::TV;
  412. return MediaQuery::MediaType::Unknown;
  413. }
  414. StringView to_string(MediaQuery::MediaType media_type)
  415. {
  416. switch (media_type) {
  417. case MediaQuery::MediaType::All:
  418. return "all"sv;
  419. case MediaQuery::MediaType::Aural:
  420. return "aural"sv;
  421. case MediaQuery::MediaType::Braille:
  422. return "braille"sv;
  423. case MediaQuery::MediaType::Embossed:
  424. return "embossed"sv;
  425. case MediaQuery::MediaType::Handheld:
  426. return "handheld"sv;
  427. case MediaQuery::MediaType::Print:
  428. return "print"sv;
  429. case MediaQuery::MediaType::Projection:
  430. return "projection"sv;
  431. case MediaQuery::MediaType::Screen:
  432. return "screen"sv;
  433. case MediaQuery::MediaType::Speech:
  434. return "speech"sv;
  435. case MediaQuery::MediaType::TTY:
  436. return "tty"sv;
  437. case MediaQuery::MediaType::TV:
  438. return "tv"sv;
  439. case MediaQuery::MediaType::Unknown:
  440. return "unknown"sv;
  441. }
  442. VERIFY_NOT_REACHED();
  443. }
  444. }