/* * This source file is part of RmlUi, the HTML/CSS Interface Middleware * * For the latest information, see http://github.com/mikke89/RmlUi * * Copyright (c) 2008-2010 CodePoint Ltd, Shift Technology Ltd * Copyright (c) 2019-2023 The RmlUi Team, and contributors * * Permission is hereby granted, free of charge, to any person obtaining a copy * of this software and associated documentation files (the "Software"), to deal * in the Software without restriction, including without limitation the rights * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell * copies of the Software, and to permit persons to whom the Software is * furnished to do so, subject to the following conditions: * * The above copyright notice and this permission notice shall be included in * all copies or substantial portions of the Software. * * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN * THE SOFTWARE. * */ #include "../Common/TestsShell.h" #include #include #include #include #include #include #include using namespace ankerl; using namespace Rml; static const String rml_flexbox_basic_document = R"( Flex 01 - Basic flexbox (slow, content-based sizing) )"; static const String rml_flexbox_basic_document_fast = R"( Flex 01 - Basic flexbox (fast, not content based) )"; static const String rml_flexbox_basic_document_float_reference = R"( Flex 01 - Basic flexbox (float comparison) )"; static const String rml_flexbox_basic_body = R"(

Header

First article

Etiam libero lorem, lacinia non augue lobortis, tincidunt consequat justo. Sed id enim tempor, feugiat tortor id, rhoncus enim. Quisque pretium neque eu felis tincidunt fringilla. Mauris laoreet enim neque, iaculis cursus lorem mollis sed. Nulla pretium euismod nulla sed convallis. Curabitur in tempus sem. Phasellus suscipit vitae nulla nec ultricies.

Second article

Ut volutpat, odio et facilisis molestie, lacus elit euismod enim, et tempor lacus sapien finibus ipsum. Aliquam erat volutpat. Nullam risus turpis, hendrerit ac fermentum in, dapibus non risus.

Third article

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed aliquet commodo nisi, id cursus enim eleifend vitae. Praesent turpis lorem, commodo id tempus sit amet, faucibus et libero. Aliquam malesuada ultrices leo, ut molestie tortor posuere sit amet. Proin vitae tortor a sem consequat gravida. Maecenas sed egestas dolor.

In gravida ligula in turpis molestie varius. Ut sed velit id tellus aliquet aliquet. Nulla et leo tellus. Ut a convallis dolor, eu rutrum enim. Nam vitae ultrices dui. Aliquam semper eros ut ultrices rutrum.

)"; static const String rml_flexbox_mixed_document = R"( Flex 02 - Various features )"; static const String rml_flexbox_mixed_body = R"(
Abs
1
2
3
1
2
3
1
2
3
1
2 LONG_OVERFLOWING_WORD
3
)"; static const String rml_flexbox_scroll_document = R"( Flex 03 - Scrolling container )"; static const String rml_flexbox_scroll_body = R"( overflow: scroll
Hello
big world!
LOOOOOOOOOOOOOOOOOOOOONG
overflow: auto
Hello
big world!
LOOOOOOOOOOOOOOOOOOOOONG
overflow: auto - only vertical overflow
Hello
big world!
LONG
overflow: auto - only horizontal overflow
Hello
big
LOOOOOOOOOOOOOOOOOOOOONG
overflow: visible
Hello
big world!
LOOOOOOOOOOOOOOOOOOOOONG
)"; TEST_CASE("flexbox") { Context* context = TestsShell::GetContext(); REQUIRE(context); { nanobench::Bench bench; bench.title("Flexbox basic layout"); bench.relative(true); // Construct the flexbox layout document. ElementDocument* document = context->LoadDocumentFromMemory(rml_flexbox_basic_document); REQUIRE(document); document->Show(); document->SetInnerRML(rml_flexbox_basic_body); context->Update(); context->Render(); TestsShell::RenderLoop(); // Compare to an almost equivalent fast flexbox layout where we try to eliminate any content-based sizing. Uses the same body rml. ElementDocument* document_fast = context->LoadDocumentFromMemory(rml_flexbox_basic_document_fast); REQUIRE(document_fast); document_fast->Show(); document_fast->SetInnerRML(rml_flexbox_basic_body); context->Update(); context->Render(); TestsShell::RenderLoop(); // Finally, add a reference document based on layout with float boxes instead of flexbox. Uses the same body rml. ElementDocument* document_float_reference = context->LoadDocumentFromMemory(rml_flexbox_basic_document_float_reference); REQUIRE(document_float_reference); document_float_reference->Show(); document_float_reference->SetInnerRML(rml_flexbox_basic_body); context->Update(); context->Render(); TestsShell::RenderLoop(); bench.run("Update (unmodified)", [&] { context->Update(); }); bench.run("Render", [&] { context->Render(); }); bench.run("SetInnerRML", [&] { document->SetInnerRML(rml_flexbox_scroll_body); }); bench.run("SetInnerRML + Update (float reference)", [&] { document_float_reference->SetInnerRML(rml_flexbox_basic_body); context->Update(); }); bench.run("SetInnerRML + Update (fast version)", [&] { document_fast->SetInnerRML(rml_flexbox_basic_body); context->Update(); }); bench.run("SetInnerRML + Update", [&] { document->SetInnerRML(rml_flexbox_basic_body); context->Update(); }); bench.run("SetInnerRML + Update + Render (float reference)", [&] { document_float_reference->SetInnerRML(rml_flexbox_basic_body); context->Update(); context->Render(); }); bench.run("SetInnerRML + Update + Render (fast version)", [&] { document_fast->SetInnerRML(rml_flexbox_basic_body); context->Update(); context->Render(); }); bench.run("SetInnerRML + Update + Render", [&] { document->SetInnerRML(rml_flexbox_basic_body); context->Update(); context->Render(); }); document->Close(); document_fast->Close(); document_float_reference->Close(); } { nanobench::Bench bench; bench.title("Flexbox mixed"); bench.relative(true); ElementDocument* document = context->LoadDocumentFromMemory(rml_flexbox_mixed_document); REQUIRE(document); document->Show(); document->SetInnerRML(rml_flexbox_mixed_body); context->Update(); context->Render(); TestsShell::RenderLoop(); bench.run("Update (unmodified)", [&] { context->Update(); }); bench.run("Render", [&] { context->Render(); }); bench.run("SetInnerRML", [&] { document->SetInnerRML(rml_flexbox_scroll_body); }); bench.run("SetInnerRML + Update", [&] { document->SetInnerRML(rml_flexbox_mixed_body); context->Update(); }); bench.run("SetInnerRML + Update + Render", [&] { document->SetInnerRML(rml_flexbox_mixed_body); context->Update(); context->Render(); }); document->Close(); } { nanobench::Bench bench; bench.title("Flexbox scroll"); bench.relative(true); ElementDocument* document = context->LoadDocumentFromMemory(rml_flexbox_scroll_document); REQUIRE(document); document->Show(); document->SetInnerRML(rml_flexbox_scroll_body); context->Update(); context->Render(); TestsShell::RenderLoop(); bench.run("Update (unmodified)", [&] { context->Update(); }); bench.run("Render", [&] { context->Render(); }); bench.run("SetInnerRML", [&] { document->SetInnerRML(rml_flexbox_scroll_body); }); bench.run("SetInnerRML + Update", [&] { document->SetInnerRML(rml_flexbox_scroll_body); context->Update(); }); bench.run("SetInnerRML + Update + Render", [&] { document->SetInnerRML(rml_flexbox_scroll_body); context->Update(); context->Render(); }); document->Close(); } } static const String rml_flexbox_chatbox = R"( Chat
)"; TEST_CASE("flexbox.chat") { Context* context = TestsShell::GetContext(); REQUIRE(context); nanobench::Bench bench; bench.title("Flexbox chat"); bench.relative(true); // bench.epochs(100); auto MakeFlexItemsRml = [](int number_items, const String& item_text) { String rml; for (int i = 0; i < number_items; i++) rml += "
" + item_text + "
"; return rml; }; const String short_words = MakeFlexItemsRml(10, "aaaaaaaaaaaaaaa aaaaaaaaaaaaaa aaaaaaaaa aaaaaaaaaaaa aaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaa"); const String long_words = MakeFlexItemsRml(10, "aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"); // The flex items will essentially be formatted four times each: // - Two times during flex formatting, first to get their height, then to do their actual formatting. // - Then flex formatting is itself done twice, since the body adds a scrollbar, thereby modifying the available width. // The long words take longer to format, since we do a naive approach to breaking up words in ElementText::GenerateLine, making us calculate // string widths repeatedly. Removing the 'word-break' property should make the long word-case much faster. ElementDocument* document = context->LoadDocumentFromMemory(rml_flexbox_chatbox); Element* chat = document->GetElementById("chat"); chat->SetInnerRML(short_words + long_words); document->Show(); TestsShell::RenderLoop(); bench.run("Short words", [&] { chat->SetInnerRML(short_words); context->Update(); context->Render(); RMLUI_FrameMark; }); bench.run("Long words", [&] { chat->SetInnerRML(long_words); context->Update(); context->Render(); RMLUI_FrameMark; }); document->Close(); } static const String rml_flexbox_shrink_to_fit = R"( Flex - Shrink-to-fit 01
Before
Flex
After
Before
Flex
After
)"; TEST_CASE("flexbox.shrink-to-fit") { Context* context = TestsShell::GetContext(); REQUIRE(context); nanobench::Bench bench; bench.title("Flexbox shrink-to-fit"); bench.relative(true); ElementDocument* document = context->LoadDocumentFromMemory(rml_flexbox_shrink_to_fit); Element* basic = document->GetElementById("basic"); Element* nested = document->GetElementById("nested"); document->Show(); TestsShell::RenderLoop(); basic->SetProperty(PropertyId::Display, Style::Display::None); nested->SetProperty(PropertyId::Display, Style::Display::None); bench.run("Reference", [&] { document->SetProperty(PropertyId::Display, Style::Display::None); document->RemoveProperty(PropertyId::Display); context->Update(); context->Render(); }); bench.run("Basic shrink-to-fit", [&] { basic->RemoveProperty(PropertyId::Display); nested->SetProperty(PropertyId::Display, Style::Display::None); context->Update(); context->Render(); }); bench.run("Nested shrink-to-fit", [&] { basic->SetProperty(PropertyId::Display, Style::Display::None); nested->RemoveProperty(PropertyId::Display); context->Update(); context->Render(); }); document->Close(); }