Animation.cpp 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583
  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 "../Common/TypesToString.h"
  31. #include <RmlUi/Core/Context.h>
  32. #include <RmlUi/Core/Element.h>
  33. #include <RmlUi/Core/ElementDocument.h>
  34. #include <doctest.h>
  35. #include <float.h>
  36. using namespace Rml;
  37. static const String document_decorator_rml = R"(
  38. <rml>
  39. <head>
  40. <title>Test</title>
  41. <link type="text/rcss" href="/assets/rml.rcss"/>
  42. <style>
  43. body {
  44. left: 0;
  45. top: 0;
  46. right: 0;
  47. bottom: 0;
  48. }
  49. @decorator from_rule : horizontal-gradient { %s }
  50. @decorator to_rule: horizontal-gradient{ %s }
  51. @keyframes mix {
  52. from { %s: %s; }
  53. to { %s: %s; }
  54. }
  55. div {
  56. background: #333;
  57. height: 64px;
  58. width: 64px;
  59. animation: mix 0.1s;
  60. }
  61. </style>
  62. </head>
  63. <body>
  64. <div/>
  65. </body>
  66. </rml>
  67. )";
  68. TEST_CASE("animation.decorator")
  69. {
  70. struct Test {
  71. String from_rule;
  72. String to_rule;
  73. String from;
  74. String to;
  75. String expected_25p; // expected interpolated value at 25% progression
  76. };
  77. Vector<Test> tests{
  78. // Only standard declaration
  79. {
  80. "",
  81. "",
  82. "horizontal-gradient(transparent transparent)",
  83. "horizontal-gradient(white white)",
  84. "horizontal-gradient(horizontal #7f7f7f3f #7f7f7f3f)",
  85. },
  86. {
  87. "",
  88. "",
  89. "horizontal-gradient(transparent transparent) border-box",
  90. "horizontal-gradient(white white) border-box",
  91. "horizontal-gradient(horizontal #7f7f7f3f #7f7f7f3f) border-box",
  92. },
  93. {
  94. "",
  95. "",
  96. "none",
  97. "horizontal-gradient(transparent transparent)",
  98. "horizontal-gradient(horizontal #dcdcdcbf #dcdcdcbf)",
  99. },
  100. {
  101. "",
  102. "",
  103. "none",
  104. "horizontal-gradient(transparent transparent), horizontal-gradient(transparent transparent)",
  105. "horizontal-gradient(horizontal #dcdcdcbf #dcdcdcbf), horizontal-gradient(horizontal #dcdcdcbf #dcdcdcbf)",
  106. },
  107. {
  108. "",
  109. "",
  110. "horizontal-gradient(transparent transparent), horizontal-gradient(transparent transparent)",
  111. "none",
  112. "horizontal-gradient(horizontal #7f7f7f3f #7f7f7f3f), horizontal-gradient(horizontal #7f7f7f3f #7f7f7f3f)",
  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 #7f7f7f3f #7f7f7f3f)",
  121. },
  122. {
  123. "",
  124. "start-color: transparent; stop-color: transparent;",
  125. "from_rule",
  126. "to_rule",
  127. "horizontal-gradient(horizontal #dcdcdcbf #dcdcdcbf)",
  128. },
  129. {
  130. "start-color: transparent; stop-color: transparent;",
  131. "",
  132. "from_rule",
  133. "to_rule",
  134. "horizontal-gradient(horizontal #7f7f7f3f #7f7f7f3f)",
  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 #7f7f7f3f #7f7f7f3f)",
  143. },
  144. {
  145. "",
  146. "start-color: transparent; stop-color: transparent;",
  147. "none",
  148. "to_rule",
  149. "horizontal-gradient(horizontal #dcdcdcbf #dcdcdcbf)",
  150. },
  151. {
  152. "start-color: transparent; stop-color: transparent;",
  153. "",
  154. "from_rule",
  155. "none",
  156. "horizontal-gradient(horizontal #7f7f7f3f #7f7f7f3f)",
  157. },
  158. {
  159. "",
  160. "",
  161. "from_rule, to_rule",
  162. "horizontal-gradient(transparent transparent), horizontal-gradient(transparent transparent)",
  163. "horizontal-gradient(horizontal #dcdcdcbf #dcdcdcbf), horizontal-gradient(horizontal #dcdcdcbf #dcdcdcbf)",
  164. },
  165. {
  166. "",
  167. "",
  168. "horizontal-gradient(transparent transparent), horizontal-gradient(transparent transparent)",
  169. "from_rule, to_rule",
  170. "horizontal-gradient(horizontal #7f7f7f3f #7f7f7f3f), horizontal-gradient(horizontal #7f7f7f3f #7f7f7f3f)",
  171. },
  172. };
  173. TestsSystemInterface* system_interface = TestsShell::GetTestsSystemInterface();
  174. Context* context = TestsShell::GetContext();
  175. for (const char* property_str : {"decorator", "mask-image"})
  176. {
  177. for (const Test& test : tests)
  178. {
  179. const double t_final = 0.1;
  180. system_interface->SetTime(0.0);
  181. String document_rml = Rml::CreateString(document_decorator_rml.size() + 512, document_decorator_rml.c_str(), test.from_rule.c_str(),
  182. test.to_rule.c_str(), property_str, test.from.c_str(), property_str, test.to.c_str());
  183. ElementDocument* document = context->LoadDocumentFromMemory(document_rml, "assets/");
  184. Element* element = document->GetChild(0);
  185. document->Show();
  186. TestsShell::RenderLoop();
  187. system_interface->SetTime(0.25 * t_final);
  188. TestsShell::RenderLoop();
  189. CHECK_MESSAGE(element->GetProperty<String>(property_str) == test.expected_25p, property_str, " from: ", test.from, ", to: ", test.to);
  190. document->Close();
  191. }
  192. }
  193. system_interface->SetTime(0.0);
  194. TestsShell::ShutdownShell();
  195. }
  196. static const String document_filter_rml = R"(
  197. <rml>
  198. <head>
  199. <title>Test</title>
  200. <link type="text/rcss" href="/assets/rml.rcss"/>
  201. <style>
  202. body {
  203. left: 0;
  204. top: 0;
  205. right: 0;
  206. bottom: 0;
  207. }
  208. @keyframes mix {
  209. from { %s: %s; }
  210. to { %s: %s; }
  211. }
  212. div {
  213. background: #333;
  214. height: 64px;
  215. width: 64px;
  216. decorator: image(high_scores_alien_1.tga);
  217. animation: mix 0.1s;
  218. }
  219. </style>
  220. </head>
  221. <body>
  222. <div/>
  223. </body>
  224. </rml>
  225. )";
  226. TEST_CASE("animation.filter")
  227. {
  228. struct Test {
  229. String from;
  230. String to;
  231. String expected_25p; // expected interpolated value at 25% progression
  232. };
  233. Vector<Test> tests{
  234. {
  235. "blur( 0px)",
  236. "blur(40px)",
  237. "blur(10px)",
  238. },
  239. {
  240. "blur(10px)",
  241. "blur(25dp)", // assumes dp-ratio == 2
  242. "blur(20px)",
  243. },
  244. {
  245. "blur(40px)",
  246. "none",
  247. "blur(30px)",
  248. },
  249. {
  250. "none",
  251. "blur(40px)",
  252. "blur(10px)",
  253. },
  254. {
  255. "drop-shadow(#000 30px 20px 0px)",
  256. "drop-shadow(#f00 30px 20px 4px)", // colors interpolated in linear space
  257. "drop-shadow(#7f0000 30px 20px 1px)",
  258. },
  259. {
  260. "opacity(0) brightness(2)",
  261. "none",
  262. "opacity(0.25) brightness(1.75)",
  263. },
  264. {
  265. "opacity(0) brightness(0)",
  266. "opacity(0.5)",
  267. "opacity(0.125) brightness(0.25)",
  268. },
  269. {
  270. "opacity(0.5)",
  271. "opacity(0) brightness(0)",
  272. "opacity(0.375) brightness(0.75)",
  273. },
  274. {
  275. "opacity(0) brightness(0)",
  276. "brightness(1) opacity(0.5)", // discrete interpolation due to non-matching types
  277. "opacity(0) brightness(0)",
  278. },
  279. {
  280. "none", // Test initial values of various filters.
  281. "brightness(2.00) contrast(2.00) grayscale(1.00) hue-rotate(4rad) invert(1.00) opacity(0.00) sepia(1.00) saturate(2.00)",
  282. "brightness(1.25) contrast(1.25) grayscale(0.25) hue-rotate(1rad) invert(0.25) opacity(0.75) sepia(0.25) saturate(1.25)",
  283. },
  284. };
  285. TestsSystemInterface* system_interface = TestsShell::GetTestsSystemInterface();
  286. Context* context = TestsShell::GetContext();
  287. context->SetDensityIndependentPixelRatio(2.0f);
  288. for (const char* property_str : {"filter", "backdrop-filter"})
  289. {
  290. for (const Test& test : tests)
  291. {
  292. const double t_final = 0.1;
  293. system_interface->SetTime(0.0);
  294. String document_rml = Rml::CreateString(document_filter_rml.size() + 512, document_filter_rml.c_str(), property_str, test.from.c_str(),
  295. property_str, test.to.c_str());
  296. ElementDocument* document = context->LoadDocumentFromMemory(document_rml, "assets/");
  297. Element* element = document->GetChild(0);
  298. document->Show();
  299. system_interface->SetTime(0.25 * t_final);
  300. TestsShell::RenderLoop();
  301. CHECK_MESSAGE(element->GetProperty<String>(property_str) == test.expected_25p, property_str, " from: ", test.from, ", to: ", test.to);
  302. document->Close();
  303. }
  304. }
  305. system_interface->SetTime(0.0);
  306. TestsShell::ShutdownShell();
  307. }
  308. static const String document_multiple_values_rml = R"(
  309. <rml>
  310. <head>
  311. <title>Test</title>
  312. <link type="text/rcss" href="/assets/rml.rcss"/>
  313. <style>
  314. body {
  315. left: 0;
  316. top: 0;
  317. right: 0;
  318. bottom: 0;
  319. }
  320. @keyframes fade {
  321. from { opacity: 0; }
  322. to { opacity: 1; }
  323. }
  324. @keyframes colorize {
  325. from { background-color: #f00; }
  326. 25% { background-color: #0f0; }
  327. to { background-color: #00f; }
  328. }
  329. div {
  330. width: 300dp;
  331. height: 300dp;
  332. background-color: #000;
  333. animation: 2s fade, 4s 1s colorize;
  334. }
  335. </style>
  336. </head>
  337. <body>
  338. <div/>
  339. </body>
  340. </rml>
  341. )";
  342. TEST_CASE("animation.multiple_values")
  343. {
  344. TestsSystemInterface* system_interface = TestsShell::GetTestsSystemInterface();
  345. Context* context = TestsShell::GetContext();
  346. const double dt = 0.1;
  347. const double t_fade_start = 0;
  348. const double t_colorize_start = 1;
  349. const double t_fade_final = 2;
  350. const double t_colorize_final = 5;
  351. struct TestCase {
  352. double time;
  353. float opacity_min;
  354. Colourb background_color;
  355. };
  356. const std::vector<TestCase> tests = {
  357. {t_fade_start, 0.f, {0, 0, 0}},
  358. {t_fade_start + dt, 0.01f, {0, 0, 0}},
  359. {t_colorize_start - dt, 0.4f, {0, 0, 0}},
  360. {t_colorize_start, 0.49f, {0, 0, 0}},
  361. {t_colorize_start + dt, 0.5f, {0xf1, 0x50, 0}},
  362. {t_fade_final - dt, 0.9f, {0x50, 0xf1, 0}},
  363. {t_fade_final, 0.99f, {0, 0xfe, 0x00}},
  364. {t_fade_final + dt, 1.0f, {0, 0xfa, 0x2e}},
  365. {t_colorize_final - dt, 1.0f, {0, 0x2e, 0xfa}},
  366. {t_colorize_final, 1.0f, {0, 0, 0xfe}},
  367. {t_colorize_final + dt, 1.0f, {0, 0, 0}},
  368. };
  369. {
  370. system_interface->SetTime(0.0);
  371. ElementDocument* document = context->LoadDocumentFromMemory(document_multiple_values_rml, "assets/");
  372. Element* element = document->GetChild(0);
  373. document->Show();
  374. double t = 0.f;
  375. for (const auto& test : tests)
  376. {
  377. // Simulate progression in small time steps since animations are constrained to 0.1s maximum step size.
  378. while (t < test.time)
  379. {
  380. t = Math::Min(t + dt, test.time);
  381. system_interface->SetTime(t);
  382. context->Update();
  383. }
  384. INFO("Time: ", test.time);
  385. CHECK(element->GetProperty<float>("opacity") >= test.opacity_min);
  386. CHECK(element->GetProperty<Colourb>("background-color") == test.background_color);
  387. }
  388. document->Close();
  389. }
  390. system_interface->SetTime(0.0);
  391. TestsShell::ShutdownShell();
  392. }
  393. static const String document_animation_multiple_values_rml = R"(
  394. <rml>
  395. <head>
  396. <title>Test</title>
  397. <link type="text/rcss" href="/assets/rml.rcss"/>
  398. <style>
  399. body {
  400. left: 0;
  401. top: 0;
  402. right: 0;
  403. bottom: 0;
  404. }
  405. @keyframes fadein {
  406. from {
  407. opacity: 0;
  408. visibility: hidden;
  409. }
  410. to {
  411. opacity: 1;
  412. visibility: visible;
  413. }
  414. }
  415. @keyframes fadeout {
  416. from {
  417. opacity: 1;
  418. visibility: visible;
  419. }
  420. to {
  421. opacity: 0;
  422. visibility: hidden;
  423. }
  424. }
  425. div {
  426. background-color: #c66;
  427. width: 300dp;
  428. height: 300dp;
  429. margin: auto;
  430. animation: 1s fadein, 1s 5s fadeout;
  431. }
  432. </style>
  433. </head>
  434. <body>
  435. <div id="div"/>
  436. </body>
  437. </rml>
  438. )";
  439. TEST_CASE("animation.multiple_overlapping")
  440. {
  441. TestsSystemInterface* system_interface = TestsShell::GetTestsSystemInterface();
  442. Context* context = TestsShell::GetContext();
  443. const float greater_than_zero = FLT_MIN;
  444. const double dt = 1.0 / 60.0;
  445. const double t0 = 0;
  446. const double t_delta = 0.1;
  447. const double t_fadein_final = 1;
  448. const double t_fadeout_start = 5;
  449. const double t_fadeout_final = 6;
  450. struct TestCase {
  451. double time;
  452. float opacity_min;
  453. bool is_visible;
  454. };
  455. const std::vector<TestCase> tests = {
  456. {t0, 0.f, true},
  457. {t0 + t_delta, greater_than_zero, true},
  458. {t_fadein_final - t_delta, 0.8f, true},
  459. {t_fadein_final, 1.f, true},
  460. {t_fadein_final + t_delta, 1.f, true},
  461. {t_fadeout_start - t_delta, 1.f, true},
  462. {t_fadeout_start, 1.f, true},
  463. {t_fadeout_start + t_delta, 0.8f, true},
  464. {t_fadeout_final - t_delta, greater_than_zero, true},
  465. {t_fadeout_final, 0.f, false},
  466. {t_fadeout_final + t_delta, 0.f, false},
  467. };
  468. // Currently we don't support animating the same property from multiple animations on the same element, see #608.
  469. // This test only checks that we submit warnings to the user. Once we support this feature, we can enable more checks in this test.
  470. {
  471. system_interface->SetNumExpectedWarnings(2);
  472. system_interface->SetTime(0.0);
  473. ElementDocument* document = context->LoadDocumentFromMemory(document_animation_multiple_values_rml, "assets/");
  474. Element* element = document->GetChild(0);
  475. document->Show();
  476. TestsShell::RenderLoop();
  477. double t = 0.f;
  478. for (const auto& test : tests)
  479. {
  480. while (t < test.time)
  481. {
  482. t = Math::Min(t + dt, test.time);
  483. system_interface->SetTime(t);
  484. context->Update();
  485. }
  486. INFO("Time: ", test.time);
  487. (void)(element->GetProperty<float>("opacity") == test.opacity_min);
  488. (void)(element->IsVisible() == test.is_visible);
  489. }
  490. document->Close();
  491. }
  492. system_interface->SetTime(0.0);
  493. TestsShell::ShutdownShell();
  494. }