2
0

ElementFormControlSelect.cpp 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573
  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/TestsShell.h"
  29. #include <RmlUi/Core/Context.h>
  30. #include <RmlUi/Core/DataModelHandle.h>
  31. #include <RmlUi/Core/Element.h>
  32. #include <RmlUi/Core/ElementDocument.h>
  33. #include <RmlUi/Core/Elements/ElementFormControlSelect.h>
  34. #include <RmlUi/Core/EventListener.h>
  35. #include <doctest.h>
  36. using namespace Rml;
  37. static const String basic_doc_rml = R"(
  38. <rml>
  39. <head>
  40. <title>Test</title>
  41. <link type="text/rcss" href="/assets/rml.rcss"/>
  42. <link type="text/rcss" href="/assets/invader.rcss"/>
  43. </head>
  44. <body/>
  45. </rml>
  46. )";
  47. static const String data_model_doc_rml_pre = R"(
  48. <rml>
  49. <head>
  50. <title>Test</title>
  51. <link type="text/template" href="/assets/window.rml"/>
  52. <style>
  53. body.window
  54. {
  55. top: 100px;
  56. left: 200px;
  57. width: 600px;
  58. height: 450px;
  59. }
  60. </style>
  61. </head>
  62. <body template="window">
  63. <div data-model="select-test" id="select_wrap">
  64. )";
  65. static const String data_model_doc_rml_post = R"(
  66. </div>
  67. </body>
  68. </rml>
  69. )";
  70. static String GetSelectValueRml(ElementFormControlSelect* select_element)
  71. {
  72. for (int child_index = 0; child_index < select_element->GetNumChildren(true); child_index++)
  73. {
  74. Element* child = select_element->GetChild(child_index);
  75. if (child->GetTagName() == "selectvalue")
  76. return child->GetInnerRML();
  77. }
  78. return String();
  79. }
  80. TEST_CASE("form.select.value")
  81. {
  82. Context* context = TestsShell::GetContext();
  83. REQUIRE(context);
  84. struct Test {
  85. const String rml;
  86. const String expected_value;
  87. const String expected_value_rml;
  88. };
  89. Test tests[] = {
  90. {
  91. R"(
  92. <select>
  93. <option>A</option>
  94. <option>B</option>
  95. <option>C</option>
  96. <option>D</option>
  97. </select>
  98. )",
  99. "", "A"},
  100. {
  101. R"(
  102. <select>
  103. <option value="a">A</option>
  104. <option>B</option>
  105. <option>C</option>
  106. <option>D</option>
  107. </select>
  108. )",
  109. "a", "A"},
  110. {
  111. R"(
  112. <select value="z">
  113. <option>A</option>
  114. <option>B</option>
  115. <option>C</option>
  116. <option>D</option>
  117. </select>
  118. )",
  119. "", "A"},
  120. {
  121. R"(
  122. <select value="c">
  123. <option value="a">A</option>
  124. <option value="b">B</option>
  125. <option value="c">C</option>
  126. <option value="d">D</option>
  127. </select>
  128. )",
  129. "c", "C"},
  130. {
  131. R"(
  132. <select value="c">
  133. <option value="a">A</option>
  134. <option value="b">B</option>
  135. <option value="c">C</option>
  136. <option value="d" selected>D</option>
  137. </select>
  138. )",
  139. "d", "D"},
  140. {
  141. R"(
  142. <select value="c">
  143. <option value="a" selected>A</option>
  144. <option value="b">B</option>
  145. <option value="c">C</option>
  146. <option value="d">D</option>
  147. </select>
  148. )",
  149. "a", "A"},
  150. {
  151. R"(
  152. <select value="c">
  153. <option value="a" selected>A</option>
  154. <option value="b">B</option>
  155. <option value="c">C</option>
  156. <option value="d" selected>D</option>
  157. </select>
  158. )",
  159. "d", "D"},
  160. {
  161. R"(
  162. <select>
  163. <option value="a">A</option>
  164. <option value="b">B</option>
  165. <option value="c" selected>C</option>
  166. <option value="d">D</option>
  167. </select>
  168. )",
  169. "c", "C"},
  170. };
  171. ElementDocument* document = context->LoadDocumentFromMemory(basic_doc_rml);
  172. REQUIRE(document);
  173. document->Show();
  174. context->Update();
  175. context->Render();
  176. int i = 0;
  177. for (const Test& test : tests)
  178. {
  179. document->SetInnerRML(test.rml);
  180. context->Update();
  181. REQUIRE(document->GetNumChildren() == 1);
  182. ElementFormControlSelect* select_element = rmlui_dynamic_cast<ElementFormControlSelect*>(document->GetFirstChild());
  183. REQUIRE(select_element);
  184. const String value = select_element->GetValue();
  185. const String selectvalue_rml = GetSelectValueRml(select_element);
  186. CHECK_MESSAGE(value == test.expected_value, "Document " << i);
  187. CHECK_MESSAGE(selectvalue_rml == test.expected_value_rml, "Document " << i);
  188. i++;
  189. }
  190. document->Close();
  191. TestsShell::ShutdownShell();
  192. }
  193. TEST_CASE("form.select.data_binding")
  194. {
  195. Context* context = TestsShell::GetContext();
  196. REQUIRE(context);
  197. struct Test {
  198. const String rml;
  199. const String expected_value;
  200. const String expected_value_rml;
  201. };
  202. int selected_index = 2;
  203. String selected_value = "b";
  204. Vector<String> values = {"a", "b", "c", "d"};
  205. Test tests[] = {
  206. {
  207. R"(
  208. <select data-value="selected_index">
  209. <option value="0">A</option>
  210. <option value="1">B</option>
  211. <option value="2">C</option>
  212. <option value="3">D</option>
  213. </select>
  214. )",
  215. "2", "C"},
  216. {
  217. R"(
  218. <select data-value="selected_value">
  219. <option value="a">A</option>
  220. <option value="b">B</option>
  221. <option value="c">C</option>
  222. <option value="d">D</option>
  223. </select>
  224. )",
  225. "b", "B"},
  226. {
  227. R"(
  228. <select>
  229. <option value="a" data-attrif-selected="selected_value == 'a'">A</option>
  230. <option value="b" data-attrif-selected="selected_value == 'b'">B</option>
  231. <option value="c" data-attrif-selected="selected_value == 'c'">C</option>
  232. <option value="d" data-attrif-selected="selected_value == 'd'">D</option>
  233. </select>
  234. )",
  235. "b", "B"},
  236. {
  237. R"(
  238. <select>
  239. <option data-for="s : subjects" data-attr-value="s" data-attrif-selected="s == selected_value">{{ s | to_upper }}</option>
  240. </select>
  241. )",
  242. "b", "B"},
  243. {
  244. R"(
  245. <select>
  246. <option data-for="s : subjects" data-attr-value="it_index" data-attrif-selected="it_index == selected_index">{{ s | to_upper }}</option>
  247. </select>
  248. )",
  249. "2", "C"},
  250. {
  251. R"(
  252. <select data-value="selected_value">
  253. <option data-for="s : subjects" data-attr-value="s">{{ s | to_upper }}</option>
  254. </select>
  255. )",
  256. "b", "B"},
  257. {
  258. R"(
  259. <select data-value="selected_index">
  260. <option data-for="s : subjects" data-attr-value="it_index">{{ s | to_upper }}</option>
  261. </select>
  262. )",
  263. "2", "C"},
  264. {
  265. R"(
  266. <select data-value="selected_index">
  267. <option data-for="s : subjects" data-attr-value="it_index"><p data-rml="s | to_upper"></p></option>
  268. </select>
  269. )",
  270. "2", "<p data-rml=\"s | to_upper\">C</p>"},
  271. };
  272. DataModelConstructor constructor = context->CreateDataModel("select-test");
  273. constructor.RegisterArray<Vector<String>>();
  274. constructor.Bind("selected_index", &selected_index);
  275. constructor.Bind("selected_value", &selected_value);
  276. constructor.Bind("subjects", &values);
  277. int i = 0;
  278. for (const Test& test : tests)
  279. {
  280. const String document_rml = data_model_doc_rml_pre + test.rml + data_model_doc_rml_post;
  281. ElementDocument* document = context->LoadDocumentFromMemory(document_rml);
  282. REQUIRE(document);
  283. document->Show();
  284. TestsShell::RenderLoop();
  285. Element* wrapper_element = document->GetElementById("select_wrap");
  286. REQUIRE(wrapper_element);
  287. REQUIRE(wrapper_element->GetNumChildren() == 1);
  288. ElementFormControlSelect* select_element = rmlui_dynamic_cast<ElementFormControlSelect*>(wrapper_element->GetFirstChild());
  289. REQUIRE(select_element);
  290. const String value = select_element->GetValue();
  291. const String selectvalue_rml = GetSelectValueRml(select_element);
  292. CHECK_MESSAGE(value == test.expected_value, "Document " << i);
  293. CHECK_MESSAGE(selectvalue_rml == test.expected_value_rml, "Document " << i);
  294. i++;
  295. document->Close();
  296. }
  297. TestsShell::ShutdownShell();
  298. }
  299. TEST_CASE("form.select.data-for")
  300. {
  301. Context* context = TestsShell::GetContext();
  302. REQUIRE(context);
  303. struct Test {
  304. const String rml;
  305. const String expected_value;
  306. const String expected_value_rml;
  307. };
  308. String selected_value = "b";
  309. Vector<String> values = {"a", "b", "c", "d"};
  310. DataModelConstructor constructor = context->CreateDataModel("select-test");
  311. constructor.RegisterArray<Vector<String>>();
  312. constructor.Bind("selected_value", &selected_value);
  313. constructor.Bind("subjects", &values);
  314. DataModelHandle handle = constructor.GetModelHandle();
  315. {
  316. const String select_rml = R"(
  317. <select data-value="selected_value">
  318. <option data-for="s : subjects" data-attr-value="s">{{ s | to_upper }}</option>
  319. </select>
  320. )";
  321. const String document_rml = data_model_doc_rml_pre + select_rml + data_model_doc_rml_post;
  322. ElementDocument* document = context->LoadDocumentFromMemory(document_rml);
  323. REQUIRE(document);
  324. document->Show();
  325. Element* wrapper_element = document->GetElementById("select_wrap");
  326. REQUIRE(wrapper_element);
  327. REQUIRE(wrapper_element->GetNumChildren() == 1);
  328. ElementFormControlSelect* select_element = rmlui_dynamic_cast<ElementFormControlSelect*>(wrapper_element->GetFirstChild());
  329. REQUIRE(select_element);
  330. {
  331. // TestsShell::RenderLoop();
  332. const String value = select_element->GetValue();
  333. const int selected_index = select_element->GetSelection();
  334. const String selectvalue_rml = GetSelectValueRml(select_element);
  335. CHECK(value == "b");
  336. CHECK(selected_index == 1);
  337. CHECK(selectvalue_rml == "B");
  338. }
  339. {
  340. selected_value = "d";
  341. handle.DirtyVariable("selected_value");
  342. context->Update();
  343. // TestsShell::RenderLoop();
  344. const String value = select_element->GetValue();
  345. const int selected_index = select_element->GetSelection();
  346. const String selectvalue_rml = GetSelectValueRml(select_element);
  347. CHECK(value == "d");
  348. CHECK(selected_index == 3);
  349. CHECK(selectvalue_rml == "D");
  350. }
  351. {
  352. select_element->SetValue("a");
  353. context->Update();
  354. TestsShell::RenderLoop();
  355. const String value = select_element->GetValue();
  356. const int selected_index = select_element->GetSelection();
  357. const String selectvalue_rml = GetSelectValueRml(select_element);
  358. CHECK(selected_value == "a");
  359. CHECK(value == "a");
  360. CHECK(selected_index == 0);
  361. CHECK(selectvalue_rml == "A");
  362. }
  363. {
  364. select_element->SetSelection(1);
  365. context->Update();
  366. TestsShell::RenderLoop();
  367. const String value = select_element->GetValue();
  368. const int selected_index = select_element->GetSelection();
  369. const String selectvalue_rml = GetSelectValueRml(select_element);
  370. CHECK(selected_value == "b");
  371. CHECK(value == "b");
  372. CHECK(selected_index == 1);
  373. CHECK(selectvalue_rml == "B");
  374. }
  375. #if 0
  376. // These are not supported now, we may want to add support later.
  377. {
  378. // Values: a c b d
  379. std::swap(values[1], values[2]);
  380. handle.DirtyVariable("subjects");
  381. context->Update();
  382. TestsShell::RenderLoop();
  383. const String value = select_element->GetValue();
  384. const int selected_index = select_element->GetSelection();
  385. const String selectvalue_rml = GetSelectValueRml(select_element);
  386. CHECK(value == "b");
  387. CHECK(selected_index == 2);
  388. CHECK(selectvalue_rml == "B");
  389. }
  390. {
  391. // Values: c b d
  392. values.erase(values.begin());
  393. handle.DirtyVariable("subjects");
  394. context->Update();
  395. TestsShell::RenderLoop();
  396. const String value = select_element->GetValue();
  397. const int selected_index = select_element->GetSelection();
  398. const String selectvalue_rml = GetSelectValueRml(select_element);
  399. CHECK(value == "b");
  400. CHECK(selected_index == 1);
  401. CHECK(selectvalue_rml == "B");
  402. }
  403. #endif
  404. document->Close();
  405. }
  406. TestsShell::ShutdownShell();
  407. }
  408. static const String event_doc_rml = R"(
  409. <rml>
  410. <head>
  411. <link type="text/rcss" href="/assets/rml.rcss"/>
  412. <link type="text/rcss" href="/assets/invader.rcss"/>
  413. </head>
  414. <body>
  415. <select id="sel">
  416. <option selected>Cube</option>
  417. <option>Cone</option>
  418. <option value="c">Cylinder</option>
  419. <option value="d">Sphere</option>
  420. </select>
  421. </body>
  422. </rml>
  423. )";
  424. static void ClickAt(Context* context, int x, int y)
  425. {
  426. context->Update();
  427. context->Render();
  428. context->ProcessMouseMove(x, y, 0);
  429. context->Update();
  430. context->Render();
  431. context->ProcessMouseButtonDown(0, 0);
  432. context->ProcessMouseButtonUp(0, 0);
  433. context->Update();
  434. context->Render();
  435. }
  436. TEST_CASE("form.select.event.change")
  437. {
  438. Context* context = TestsShell::GetContext();
  439. REQUIRE(context);
  440. ElementDocument* document = context->LoadDocumentFromMemory(event_doc_rml);
  441. REQUIRE(document);
  442. document->Show();
  443. struct SelectionEventListener : public Rml::EventListener {
  444. void ProcessEvent(Rml::Event& ev) override
  445. {
  446. num_events_processed += 1;
  447. value = ev.GetParameter<Rml::String>("value", "*empty*");
  448. }
  449. int num_events_processed = 0;
  450. String value;
  451. };
  452. auto listener = MakeUnique<SelectionEventListener>();
  453. document->GetElementById("sel")->AddEventListener(Rml::EventId::Change, listener.get());
  454. ClickAt(context, 100, 20); // Open select
  455. ClickAt(context, 100, 40); // Click option 'Cube'
  456. CHECK(listener->num_events_processed == 0);
  457. ClickAt(context, 100, 20); // Open select
  458. ClickAt(context, 100, 63); // Click option 'Cone'
  459. CHECK(listener->num_events_processed == 1);
  460. CHECK(listener->value == "");
  461. ClickAt(context, 100, 20); // Open select again
  462. ClickAt(context, 100, 85); // Click option 'Cylinder'
  463. CHECK(listener->num_events_processed == 2);
  464. CHECK(listener->value == "c");
  465. ClickAt(context, 100, 20); // Open select again
  466. context->ProcessMouseMove(100, 85, 0); // Hover option 'Cylinder'
  467. context->Update();
  468. context->Render();
  469. context->ProcessKeyDown(Rml::Input::KI_DOWN, 0);
  470. context->Update();
  471. context->Render();
  472. CHECK(listener->num_events_processed == 3);
  473. CHECK(listener->value == "d");
  474. context->ProcessKeyDown(Rml::Input::KI_DOWN, 0);
  475. context->Update();
  476. context->Render();
  477. CHECK(listener->num_events_processed == 3);
  478. document->Close();
  479. TestsShell::ShutdownShell();
  480. }