Animation.cpp 9.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368
  1. /*
  2. * This source file is part of RmlUi, the HTML/CSS Interface Middleware
  3. *
  4. * For the latest information, see http://github.com/mikke89/RmlUi
  5. *
  6. * Copyright (c) 2008-2010 CodePoint Ltd, Shift Technology Ltd
  7. * Copyright (c) 2019-2023 The RmlUi Team, and contributors
  8. *
  9. * Permission is hereby granted, free of charge, to any person obtaining a copy
  10. * of this software and associated documentation files (the "Software"), to deal
  11. * in the Software without restriction, including without limitation the rights
  12. * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
  13. * copies of the Software, and to permit persons to whom the Software is
  14. * furnished to do so, subject to the following conditions:
  15. *
  16. * The above copyright notice and this permission notice shall be included in
  17. * all copies or substantial portions of the Software.
  18. *
  19. * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
  20. * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
  21. * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
  22. * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
  23. * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
  24. * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
  25. * THE SOFTWARE.
  26. *
  27. */
  28. #include "../Common/TestsInterface.h"
  29. #include "../Common/TestsShell.h"
  30. #include <RmlUi/Core/Context.h>
  31. #include <RmlUi/Core/Element.h>
  32. #include <RmlUi/Core/ElementDocument.h>
  33. #include <doctest.h>
  34. using namespace Rml;
  35. static const String document_decorator_rml = R"(
  36. <rml>
  37. <head>
  38. <title>Test</title>
  39. <link type="text/rcss" href="/assets/rml.rcss"/>
  40. <style>
  41. body {
  42. left: 0;
  43. top: 0;
  44. right: 0;
  45. bottom: 0;
  46. }
  47. @decorator from_rule : horizontal-gradient { %s }
  48. @decorator to_rule: horizontal-gradient{ %s }
  49. @keyframes mix {
  50. from { %s: %s; }
  51. to { %s: %s; }
  52. }
  53. div {
  54. background: #333;
  55. height: 64px;
  56. width: 64px;
  57. animation: mix 0.1s;
  58. }
  59. </style>
  60. </head>
  61. <body>
  62. <div/>
  63. </body>
  64. </rml>
  65. )";
  66. TEST_CASE("animation.decorator")
  67. {
  68. struct Test {
  69. String from_rule;
  70. String to_rule;
  71. String from;
  72. String to;
  73. String expected_25p; // expected interpolated value at 25% progression
  74. };
  75. Vector<Test> tests{
  76. // Only standard declaration
  77. {
  78. "",
  79. "",
  80. "horizontal-gradient(transparent transparent)",
  81. "horizontal-gradient(white white)",
  82. "horizontal-gradient(horizontal rgba(127,127,127,63) rgba(127,127,127,63))",
  83. },
  84. {
  85. "",
  86. "",
  87. "horizontal-gradient(transparent transparent) border-box",
  88. "horizontal-gradient(white white) border-box",
  89. "horizontal-gradient(horizontal rgba(127,127,127,63) rgba(127,127,127,63)) border-box",
  90. },
  91. {
  92. "",
  93. "",
  94. "none",
  95. "horizontal-gradient(transparent transparent)",
  96. "horizontal-gradient(horizontal rgba(220,220,220,191) rgba(220,220,220,191))",
  97. },
  98. {
  99. "",
  100. "",
  101. "none",
  102. "horizontal-gradient(transparent transparent), horizontal-gradient(transparent transparent)",
  103. "horizontal-gradient(horizontal rgba(220,220,220,191) rgba(220,220,220,191)), horizontal-gradient(horizontal rgba(220,220,220,191) "
  104. "rgba(220,220,220,191))",
  105. },
  106. {
  107. "",
  108. "",
  109. "horizontal-gradient(transparent transparent), horizontal-gradient(transparent transparent)",
  110. "none",
  111. "horizontal-gradient(horizontal rgba(127,127,127,63) rgba(127,127,127,63)), horizontal-gradient(horizontal rgba(127,127,127,63) "
  112. "rgba(127,127,127,63))",
  113. },
  114. /// Only rule declaration
  115. {
  116. "start-color: transparent; stop-color: transparent;",
  117. "start-color: white; stop-color: white;",
  118. "from_rule",
  119. "to_rule",
  120. "horizontal-gradient(horizontal rgba(127,127,127,63) rgba(127,127,127,63))",
  121. },
  122. {
  123. "",
  124. "start-color: transparent; stop-color: transparent;",
  125. "from_rule",
  126. "to_rule",
  127. "horizontal-gradient(horizontal rgba(220,220,220,191) rgba(220,220,220,191))",
  128. },
  129. {
  130. "start-color: transparent; stop-color: transparent;",
  131. "",
  132. "from_rule",
  133. "to_rule",
  134. "horizontal-gradient(horizontal rgba(127,127,127,63) rgba(127,127,127,63))",
  135. },
  136. /// Mix rule and standard declaration
  137. {
  138. "start-color: transparent; stop-color: transparent;",
  139. "",
  140. "from_rule",
  141. "horizontal-gradient(white white)",
  142. "horizontal-gradient(horizontal rgba(127,127,127,63) rgba(127,127,127,63))",
  143. },
  144. {
  145. "",
  146. "start-color: transparent; stop-color: transparent;",
  147. "none",
  148. "to_rule",
  149. "horizontal-gradient(horizontal rgba(220,220,220,191) rgba(220,220,220,191))",
  150. },
  151. {
  152. "start-color: transparent; stop-color: transparent;",
  153. "",
  154. "from_rule",
  155. "none",
  156. "horizontal-gradient(horizontal rgba(127,127,127,63) rgba(127,127,127,63))",
  157. },
  158. {
  159. "",
  160. "",
  161. "from_rule, to_rule",
  162. "horizontal-gradient(transparent transparent), horizontal-gradient(transparent transparent)",
  163. "horizontal-gradient(horizontal rgba(220,220,220,191) rgba(220,220,220,191)), horizontal-gradient(horizontal rgba(220,220,220,191) "
  164. "rgba(220,220,220,191))",
  165. },
  166. {
  167. "",
  168. "",
  169. "horizontal-gradient(transparent transparent), horizontal-gradient(transparent transparent)",
  170. "from_rule, to_rule",
  171. "horizontal-gradient(horizontal rgba(127,127,127,63) rgba(127,127,127,63)), horizontal-gradient(horizontal rgba(127,127,127,63) "
  172. "rgba(127,127,127,63))",
  173. },
  174. };
  175. TestsSystemInterface* system_interface = TestsShell::GetTestsSystemInterface();
  176. Context* context = TestsShell::GetContext();
  177. for (const char* property_str : {"decorator", "mask-image"})
  178. {
  179. for (const Test& test : tests)
  180. {
  181. const double t_final = 0.1;
  182. system_interface->SetTime(0.0);
  183. String document_rml = Rml::CreateString(document_decorator_rml.size() + 512, document_decorator_rml.c_str(), test.from_rule.c_str(),
  184. test.to_rule.c_str(), property_str, test.from.c_str(), property_str, test.to.c_str());
  185. ElementDocument* document = context->LoadDocumentFromMemory(document_rml, "assets/");
  186. Element* element = document->GetChild(0);
  187. document->Show();
  188. TestsShell::RenderLoop();
  189. system_interface->SetTime(0.25 * t_final);
  190. TestsShell::RenderLoop();
  191. CHECK_MESSAGE(element->GetProperty<String>(property_str) == test.expected_25p, property_str, " from: ", test.from, ", to: ", test.to);
  192. document->Close();
  193. }
  194. }
  195. system_interface->SetTime(0.0);
  196. TestsShell::ShutdownShell();
  197. }
  198. static const String document_filter_rml = R"(
  199. <rml>
  200. <head>
  201. <title>Test</title>
  202. <link type="text/rcss" href="/assets/rml.rcss"/>
  203. <style>
  204. body {
  205. left: 0;
  206. top: 0;
  207. right: 0;
  208. bottom: 0;
  209. }
  210. @keyframes mix {
  211. from { %s: %s; }
  212. to { %s: %s; }
  213. }
  214. div {
  215. background: #333;
  216. height: 64px;
  217. width: 64px;
  218. decorator: image(high_scores_alien_1.tga);
  219. animation: mix 0.1s;
  220. }
  221. </style>
  222. </head>
  223. <body>
  224. <div/>
  225. </body>
  226. </rml>
  227. )";
  228. TEST_CASE("animation.filter")
  229. {
  230. struct Test {
  231. String from;
  232. String to;
  233. String expected_25p; // expected interpolated value at 25% progression
  234. };
  235. Vector<Test> tests{
  236. {
  237. "blur( 0px)",
  238. "blur(40px)",
  239. "blur(10px)",
  240. },
  241. {
  242. "blur(10px)",
  243. "blur(25dp)", // assumes dp-ratio == 2
  244. "blur(20px)",
  245. },
  246. {
  247. "blur(40px)",
  248. "none",
  249. "blur(30px)",
  250. },
  251. {
  252. "none",
  253. "blur(40px)",
  254. "blur(10px)",
  255. },
  256. {
  257. "drop-shadow(#000 30px 20px 0px)",
  258. "drop-shadow(#f00 30px 20px 4px)", // colors interpolated in linear space
  259. "drop-shadow(rgba(127,0,0,255) 30px 20px 1px)",
  260. },
  261. {
  262. "opacity(0) brightness(2)",
  263. "none",
  264. "opacity(0.25) brightness(1.75)",
  265. },
  266. {
  267. "opacity(0) brightness(0)",
  268. "opacity(0.5)",
  269. "opacity(0.125) brightness(0.25)",
  270. },
  271. {
  272. "opacity(0.5)",
  273. "opacity(0) brightness(0)",
  274. "opacity(0.375) brightness(0.75)",
  275. },
  276. {
  277. "opacity(0) brightness(0)",
  278. "brightness(1) opacity(0.5)", // discrete interpolation due to non-matching types
  279. "opacity(0) brightness(0)",
  280. },
  281. {
  282. "none", // Test initial values of various filters.
  283. "brightness(2.00) contrast(2.00) grayscale(1.00) hue-rotate(4rad) invert(1.00) opacity(0.00) sepia(1.00) saturate(2.00)",
  284. "brightness(1.25) contrast(1.25) grayscale(0.25) hue-rotate(1rad) invert(0.25) opacity(0.75) sepia(0.25) saturate(1.25)",
  285. },
  286. };
  287. TestsSystemInterface* system_interface = TestsShell::GetTestsSystemInterface();
  288. Context* context = TestsShell::GetContext();
  289. context->SetDensityIndependentPixelRatio(2.0f);
  290. for (const char* property_str : {"filter", "backdrop-filter"})
  291. {
  292. for (const Test& test : tests)
  293. {
  294. const double t_final = 0.1;
  295. system_interface->SetTime(0.0);
  296. String document_rml = Rml::CreateString(document_filter_rml.size() + 512, document_filter_rml.c_str(), property_str, test.from.c_str(),
  297. property_str, test.to.c_str());
  298. ElementDocument* document = context->LoadDocumentFromMemory(document_rml, "assets/");
  299. Element* element = document->GetChild(0);
  300. document->Show();
  301. system_interface->SetTime(0.25 * t_final);
  302. TestsShell::RenderLoop();
  303. CHECK_MESSAGE(element->GetProperty<String>(property_str) == test.expected_25p, property_str, " from: ", test.from, ", to: ", test.to);
  304. document->Close();
  305. }
  306. }
  307. system_interface->SetTime(0.0);
  308. TestsShell::ShutdownShell();
  309. }