MediaQuery.cpp 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454
  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/DOM/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. String MediaFeatureValue::to_string() const
  19. {
  20. return m_value.visit(
  21. [](String const& ident) { return serialize_an_identifier(ident); },
  22. [](Length const& length) { return length.to_string(); },
  23. [](Resolution const& resolution) { return resolution.to_string(); },
  24. [](double number) { return String::number(number); });
  25. }
  26. bool MediaFeatureValue::is_same_type(MediaFeatureValue const& other) const
  27. {
  28. return m_value.visit(
  29. [&](String const&) { return other.is_ident(); },
  30. [&](Length const&) { return other.is_length(); },
  31. [&](Resolution const&) { return other.is_resolution(); },
  32. [&](double) { return other.is_number(); });
  33. }
  34. String MediaFeature::to_string() const
  35. {
  36. auto comparison_string = [](Comparison comparison) -> StringView {
  37. switch (comparison) {
  38. case Comparison::Equal:
  39. return "="sv;
  40. case Comparison::LessThan:
  41. return "<"sv;
  42. case Comparison::LessThanOrEqual:
  43. return "<="sv;
  44. case Comparison::GreaterThan:
  45. return ">"sv;
  46. case Comparison::GreaterThanOrEqual:
  47. return ">="sv;
  48. }
  49. VERIFY_NOT_REACHED();
  50. };
  51. switch (m_type) {
  52. case Type::IsTrue:
  53. return serialize_an_identifier(m_name);
  54. case Type::ExactValue:
  55. return String::formatted("{}:{}", serialize_an_identifier(m_name), m_value->to_string());
  56. case Type::MinValue:
  57. return String::formatted("min-{}:{}", serialize_an_identifier(m_name), m_value->to_string());
  58. case Type::MaxValue:
  59. return String::formatted("max-{}:{}", serialize_an_identifier(m_name), m_value->to_string());
  60. case Type::Range:
  61. if (!m_range->right_comparison.has_value())
  62. return String::formatted("{} {} {}", m_range->left_value.to_string(), comparison_string(m_range->left_comparison), serialize_an_identifier(m_name));
  63. return String::formatted("{} {} {} {} {}", m_range->left_value.to_string(), comparison_string(m_range->left_comparison), serialize_an_identifier(m_name), comparison_string(*m_range->right_comparison), m_range->right_value->to_string());
  64. }
  65. VERIFY_NOT_REACHED();
  66. }
  67. bool MediaFeature::evaluate(DOM::Window const& window) const
  68. {
  69. auto maybe_queried_value = window.query_media_feature(m_name);
  70. if (!maybe_queried_value.has_value())
  71. return false;
  72. auto queried_value = maybe_queried_value.release_value();
  73. switch (m_type) {
  74. case Type::IsTrue:
  75. if (queried_value.is_number())
  76. return queried_value.number() != 0;
  77. if (queried_value.is_length())
  78. return queried_value.length().raw_value() != 0;
  79. if (queried_value.is_resolution())
  80. return queried_value.resolution().to_dots_per_pixel() != 0;
  81. if (queried_value.is_ident())
  82. return queried_value.ident() != "none";
  83. return false;
  84. case Type::ExactValue:
  85. return compare(window, *m_value, Comparison::Equal, queried_value);
  86. case Type::MinValue:
  87. return compare(window, queried_value, Comparison::GreaterThanOrEqual, *m_value);
  88. case Type::MaxValue:
  89. return compare(window, queried_value, Comparison::LessThanOrEqual, *m_value);
  90. case Type::Range:
  91. if (!compare(window, m_range->left_value, m_range->left_comparison, queried_value))
  92. return false;
  93. if (m_range->right_comparison.has_value())
  94. if (!compare(window, queried_value, *m_range->right_comparison, *m_range->right_value))
  95. return false;
  96. return true;
  97. }
  98. VERIFY_NOT_REACHED();
  99. }
  100. bool MediaFeature::compare(DOM::Window const& window, MediaFeatureValue left, Comparison comparison, MediaFeatureValue right)
  101. {
  102. if (!left.is_same_type(right))
  103. return false;
  104. if (left.is_ident()) {
  105. if (comparison == Comparison::Equal)
  106. return left.ident().equals_ignoring_case(right.ident());
  107. return false;
  108. }
  109. if (left.is_number()) {
  110. switch (comparison) {
  111. case Comparison::Equal:
  112. return left.number() == right.number();
  113. case Comparison::LessThan:
  114. return left.number() < right.number();
  115. case Comparison::LessThanOrEqual:
  116. return left.number() <= right.number();
  117. case Comparison::GreaterThan:
  118. return left.number() > right.number();
  119. case Comparison::GreaterThanOrEqual:
  120. return left.number() >= right.number();
  121. }
  122. VERIFY_NOT_REACHED();
  123. }
  124. if (left.is_length()) {
  125. float left_px;
  126. float right_px;
  127. // Save ourselves some work if neither side is a relative length.
  128. if (left.length().is_absolute() && right.length().is_absolute()) {
  129. left_px = left.length().absolute_length_to_px();
  130. right_px = right.length().absolute_length_to_px();
  131. } else {
  132. Gfx::IntRect viewport_rect { 0, 0, window.inner_width(), window.inner_height() };
  133. // FIXME: This isn't right - we want to query the initial-value font, which is the one used
  134. // if no author styles are defined.
  135. auto& root_layout_node = *window.associated_document().root().layout_node();
  136. auto const& font = root_layout_node.font();
  137. Gfx::FontMetrics const& font_metrics = font.metrics('M');
  138. float root_font_size = root_layout_node.computed_values().font_size();
  139. left_px = left.length().to_px(viewport_rect, font_metrics, root_font_size, root_font_size);
  140. right_px = right.length().to_px(viewport_rect, font_metrics, root_font_size, root_font_size);
  141. }
  142. switch (comparison) {
  143. case Comparison::Equal:
  144. return left_px == right_px;
  145. case Comparison::LessThan:
  146. return left_px < right_px;
  147. case Comparison::LessThanOrEqual:
  148. return left_px <= right_px;
  149. case Comparison::GreaterThan:
  150. return left_px > right_px;
  151. case Comparison::GreaterThanOrEqual:
  152. return left_px >= right_px;
  153. }
  154. VERIFY_NOT_REACHED();
  155. }
  156. if (left.is_resolution()) {
  157. auto left_dppx = left.resolution().to_dots_per_pixel();
  158. auto right_dppx = right.resolution().to_dots_per_pixel();
  159. switch (comparison) {
  160. case Comparison::Equal:
  161. return left_dppx == right_dppx;
  162. case Comparison::LessThan:
  163. return left_dppx < right_dppx;
  164. case Comparison::LessThanOrEqual:
  165. return left_dppx <= right_dppx;
  166. case Comparison::GreaterThan:
  167. return left_dppx > right_dppx;
  168. case Comparison::GreaterThanOrEqual:
  169. return left_dppx >= right_dppx;
  170. }
  171. VERIFY_NOT_REACHED();
  172. }
  173. VERIFY_NOT_REACHED();
  174. }
  175. NonnullOwnPtr<MediaCondition> MediaCondition::from_general_enclosed(GeneralEnclosed&& general_enclosed)
  176. {
  177. auto result = new MediaCondition;
  178. result->type = Type::GeneralEnclosed;
  179. result->general_enclosed = move(general_enclosed);
  180. return adopt_own(*result);
  181. }
  182. NonnullOwnPtr<MediaCondition> MediaCondition::from_feature(MediaFeature&& feature)
  183. {
  184. auto result = new MediaCondition;
  185. result->type = Type::Single;
  186. result->feature = move(feature);
  187. return adopt_own(*result);
  188. }
  189. NonnullOwnPtr<MediaCondition> MediaCondition::from_not(NonnullOwnPtr<MediaCondition>&& condition)
  190. {
  191. auto result = new MediaCondition;
  192. result->type = Type::Not;
  193. result->conditions.append(move(condition));
  194. return adopt_own(*result);
  195. }
  196. NonnullOwnPtr<MediaCondition> MediaCondition::from_and_list(NonnullOwnPtrVector<MediaCondition>&& conditions)
  197. {
  198. auto result = new MediaCondition;
  199. result->type = Type::And;
  200. result->conditions = move(conditions);
  201. return adopt_own(*result);
  202. }
  203. NonnullOwnPtr<MediaCondition> MediaCondition::from_or_list(NonnullOwnPtrVector<MediaCondition>&& conditions)
  204. {
  205. auto result = new MediaCondition;
  206. result->type = Type::Or;
  207. result->conditions = move(conditions);
  208. return adopt_own(*result);
  209. }
  210. String MediaCondition::to_string() const
  211. {
  212. StringBuilder builder;
  213. builder.append('(');
  214. switch (type) {
  215. case Type::Single:
  216. builder.append(feature->to_string());
  217. break;
  218. case Type::Not:
  219. builder.append("not ");
  220. builder.append(conditions.first().to_string());
  221. break;
  222. case Type::And:
  223. builder.join(" and ", conditions);
  224. break;
  225. case Type::Or:
  226. builder.join(" or ", conditions);
  227. break;
  228. case Type::GeneralEnclosed:
  229. builder.append(general_enclosed->to_string());
  230. break;
  231. }
  232. builder.append(')');
  233. return builder.to_string();
  234. }
  235. MatchResult MediaCondition::evaluate(DOM::Window const& window) const
  236. {
  237. switch (type) {
  238. case Type::Single:
  239. return as_match_result(feature->evaluate(window));
  240. case Type::Not:
  241. return negate(conditions.first().evaluate(window));
  242. case Type::And:
  243. return evaluate_and(conditions, [&](auto& child) { return child.evaluate(window); });
  244. case Type::Or:
  245. return evaluate_or(conditions, [&](auto& child) { return child.evaluate(window); });
  246. case Type::GeneralEnclosed:
  247. return general_enclosed->evaluate();
  248. }
  249. VERIFY_NOT_REACHED();
  250. }
  251. String MediaQuery::to_string() const
  252. {
  253. StringBuilder builder;
  254. if (m_negated)
  255. builder.append("not ");
  256. if (m_negated || m_media_type != MediaType::All || !m_media_condition) {
  257. switch (m_media_type) {
  258. case MediaType::All:
  259. builder.append("all");
  260. break;
  261. case MediaType::Aural:
  262. builder.append("aural");
  263. break;
  264. case MediaType::Braille:
  265. builder.append("braille");
  266. break;
  267. case MediaType::Embossed:
  268. builder.append("embossed");
  269. break;
  270. case MediaType::Handheld:
  271. builder.append("handheld");
  272. break;
  273. case MediaType::Print:
  274. builder.append("print");
  275. break;
  276. case MediaType::Projection:
  277. builder.append("projection");
  278. break;
  279. case MediaType::Screen:
  280. builder.append("screen");
  281. break;
  282. case MediaType::Speech:
  283. builder.append("speech");
  284. break;
  285. case MediaType::TTY:
  286. builder.append("tty");
  287. break;
  288. case MediaType::TV:
  289. builder.append("tv");
  290. break;
  291. }
  292. if (m_media_condition)
  293. builder.append(" and ");
  294. }
  295. if (m_media_condition) {
  296. builder.append(m_media_condition->to_string());
  297. }
  298. return builder.to_string();
  299. }
  300. bool MediaQuery::evaluate(DOM::Window const& window)
  301. {
  302. auto matches_media = [](MediaType media) -> MatchResult {
  303. switch (media) {
  304. case MediaType::All:
  305. return MatchResult::True;
  306. case MediaType::Print:
  307. // FIXME: Enable for printing, when we have printing!
  308. return MatchResult::False;
  309. case MediaType::Screen:
  310. // FIXME: Disable for printing, when we have printing!
  311. return MatchResult::True;
  312. // Deprecated, must never match:
  313. case MediaType::TTY:
  314. case MediaType::TV:
  315. case MediaType::Projection:
  316. case MediaType::Handheld:
  317. case MediaType::Braille:
  318. case MediaType::Embossed:
  319. case MediaType::Aural:
  320. case MediaType::Speech:
  321. return MatchResult::False;
  322. }
  323. VERIFY_NOT_REACHED();
  324. };
  325. MatchResult result = matches_media(m_media_type);
  326. if ((result == MatchResult::True) && m_media_condition)
  327. result = m_media_condition->evaluate(window);
  328. if (m_negated)
  329. result = negate(result);
  330. m_matches = result == MatchResult::True;
  331. return m_matches;
  332. }
  333. // https://www.w3.org/TR/cssom-1/#serialize-a-media-query-list
  334. String serialize_a_media_query_list(NonnullRefPtrVector<MediaQuery> const& media_queries)
  335. {
  336. // 1. If the media query list is empty, then return the empty string.
  337. if (media_queries.is_empty())
  338. return "";
  339. // 2. Serialize each media query in the list of media queries, in the same order as they
  340. // appear in the media query list, and then serialize the list.
  341. StringBuilder builder;
  342. builder.join(", ", media_queries);
  343. return builder.to_string();
  344. }
  345. bool is_media_feature_name(StringView name)
  346. {
  347. // MEDIAQUERIES-4 - https://www.w3.org/TR/mediaqueries-4/#media-descriptor-table
  348. if (name.equals_ignoring_case("any-hover"sv))
  349. return true;
  350. if (name.equals_ignoring_case("any-pointer"sv))
  351. return true;
  352. if (name.equals_ignoring_case("aspect-ratio"sv))
  353. return true;
  354. if (name.equals_ignoring_case("color"sv))
  355. return true;
  356. if (name.equals_ignoring_case("color-gamut"sv))
  357. return true;
  358. if (name.equals_ignoring_case("color-index"sv))
  359. return true;
  360. if (name.equals_ignoring_case("device-aspect-ratio"sv))
  361. return true;
  362. if (name.equals_ignoring_case("device-height"sv))
  363. return true;
  364. if (name.equals_ignoring_case("device-width"sv))
  365. return true;
  366. if (name.equals_ignoring_case("grid"sv))
  367. return true;
  368. if (name.equals_ignoring_case("height"sv))
  369. return true;
  370. if (name.equals_ignoring_case("hover"sv))
  371. return true;
  372. if (name.equals_ignoring_case("monochrome"sv))
  373. return true;
  374. if (name.equals_ignoring_case("orientation"sv))
  375. return true;
  376. if (name.equals_ignoring_case("overflow-block"sv))
  377. return true;
  378. if (name.equals_ignoring_case("overflow-inline"sv))
  379. return true;
  380. if (name.equals_ignoring_case("pointer"sv))
  381. return true;
  382. if (name.equals_ignoring_case("resolution"sv))
  383. return true;
  384. if (name.equals_ignoring_case("scan"sv))
  385. return true;
  386. if (name.equals_ignoring_case("update"sv))
  387. return true;
  388. if (name.equals_ignoring_case("width"sv))
  389. return true;
  390. // MEDIAQUERIES-5 - https://www.w3.org/TR/mediaqueries-5/#media-descriptor-table
  391. if (name.equals_ignoring_case("prefers-color-scheme"sv))
  392. return true;
  393. // FIXME: Add other level 5 feature names
  394. return false;
  395. }
  396. }