Home Explore Help
Sign In
cpp
/
RmlUi
mirror of https://github.com/mikke89/RmlUi.git
2
0
Fork 0
Files Issues 0 Wiki
Browse Source

Visual tests: Add alpha blending tests for renderer

Michael Ragazzon 2 years ago
parent
a064612685
commit
641f8b59c8
3 changed files with 237 additions and 0 deletions
Split View Show Diff Stats
  1. 101 0
      Tests/Data/VisualTests/renderer_alpha_blending_01.rml
  2. 68 0
      Tests/Data/VisualTests/renderer_alpha_blending_02.rml
  3. 68 0
      Tests/Data/VisualTests/renderer_alpha_blending_03.rml

+ 101 - 0
Tests/Data/VisualTests/renderer_alpha_blending_01.rml
View File 

@@ -0,0 +1,101 @@
 
+<rml>
 
+<head>
 
+	<title>Alpha blending 01</title>
 
+	<link type="text/rcss" href="../style.rcss"/>
 
+	<meta name="Description" content="Test alpha blending of the renderer with different combinations of vertex colors and textures. Ensures that blending with premultiplied alpha is handled consistently." />
 
+	<meta name="Backend" content="Requires backend support for rendering with shaders and filters, for all parts to render correctly." />
 
+	<style>
 
+		@spritesheet theme
 
+		{
 
+			src: /assets/invader.tga;
 
+			white: 230px 210px 1px 1px;                    /* #fff */
 
+			black: 421px 44px 1px 1px;                     /* #000 */
 
+			transparent-white: 292px 284px 1px 1px;        /* #ffffff80 */
 
+			transparent-gray: 85px 201.5px 1px 1px;        /* #80808099 */
 
+			transparent-black: 190px 56.499px 1px 0.002px; /* #0000004d */
 
+		}
 
+		.white { background: #fff; }
 
+		.gray { background: #808080; }
 
+		.black { background: #000; }
 
+		body > div {
 
+			padding: 15px;
 
+			border: 1px #000;
 
+			display: flow-root;
 
+			margin: 10px 0 30px;
 
+		}
 
+		body > div > div {
 
+			width: 32px;
 
+			height: 32px;
 
+			border: 1px transparent;
 
+			float: left;
 
+			margin-right: 15px;
 
+		}
 
+		.white .background { background: #fff; }
 
+		.white .background_alpha { background: #fff4; }
 
+		.white .background_opacity { background: #fff; opacity: 0.25; }
 
+		.white .sprite { decorator: image(white); }
 
+		.white .sprite_transparent { decorator: image(transparent-white); }
 
+		.white .sprite_image_color { decorator: image(white); image-color: #fff4; }
 
+		.white .black_transparent { background: #0000; }
 
+		.white .linear_gradient { decorator: linear-gradient(to right, #fff, transparent); }
 
+		.white .horizontal_gradient { decorator: horizontal-gradient(#fff transparent); }
 
+
 
+		.gray .background { background: #808080; }
 
+		.gray .background_alpha { background: #80808044; }
 
+		.gray .background_opacity { background: #808080; opacity: 0.25; }
 
+		.gray .sprite { decorator: image(transparent-gray); }
 
+		.gray .sprite_image_color { decorator: image(white); image-color: #808080;}
 
+		.gray .filter { background: #fff; filter: contrast(0); }
 
+		.gray .linear_gradient { decorator: linear-gradient(to right, #808080, transparent); }
 
+		.gray .horizontal_gradient { decorator: horizontal-gradient(#808080 transparent); }
 
+
 
+		.black .background { background: #000; }
 
+		.black .background_alpha { background: #0004; }
 
+		.black .background_opacity { background: #000; opacity: 0.25; }
 
+		.black .sprite { decorator: image(transparent-black); }
 
+		.black .sprite_image_color { decorator: image(white); image-color: #000;}
 
+		.black .filter { background: #fff; filter: brightness(0); }
 
+		.black .linear_gradient { decorator: linear-gradient(to right, #000, transparent); }
 
+		.black .horizontal_gradient { decorator: horizontal-gradient(#000 transparent); }
 
+	</style>
 
+</head>
 
+
 
+<body>
 
+The following box should be filled by perfect white.
 
+<div class="white">
 
+	<div class="background"/>
 
+	<div class="background_alpha"/>
 
+	<div class="background_opacity"/>
 
+	<div class="sprite"/>
 
+	<div class="sprite_transparent"/>
 
+	<div class="sprite_image_color"/>
 
+	<div class="black_transparent"/>
 
+	<div class="linear_gradient"/>
 
+	<div class="horizontal_gradient"/>
 
+</div>
 
+
 
+The following box should be filled by a single gray color.
 
+<div class="gray">
 
+	<div class="background"/>
 
+	<div class="background_alpha"/>
 
+	<div class="background_opacity"/>
 
+	<div class="sprite"/>
 
+	<div class="sprite_image_color"/>
 
+	<div class="filter"/>
 
+	<div class="linear_gradient"/>
 
+	<div class="horizontal_gradient"/>
 
+</div>
 
+
 
+The following box should be filled by perfect black.
 
+<div class="black">
 
+	<div class="background"/>
 
+	<div class="background_alpha"/>
 
+	<div class="background_opacity"/>
 
+	<div class="sprite"/>
 
+	<div class="sprite_image_color"/>
 
+	<div class="filter"/>
 
+	<div class="linear_gradient"/>
 
+	<div class="horizontal_gradient"/>
 
+</div>
 
+</body>
 
+</rml>

+ 68 - 0
Tests/Data/VisualTests/renderer_alpha_blending_02.rml
View File 

@@ -0,0 +1,68 @@
 
+<rml>
 
+<head>
 
+	<title>Alpha blending 02</title>
 
+	<link type="text/rcss" href="../style.rcss"/>
 
+	<meta name="Description" content="Test alpha blending with partially transparent, overlapping circles. The wheel on the left side is drawn directly on top of the opaque background. On the other hand, the wheel on the right side is filtered. This results in it being rendered separately on a transparent background, before the finished wheel is blended back onto the opaque background. The end result should look the same if the renderer does alpha compositing correctly." />
 
+	<meta name="Assert" content="The left and right wheels in each container should look equivalent. " />
 
+	<meta name="Backend" content="Requires backend support for rendering with shaders and filters." />
 
+	<style>
 
+		body { width: 800dp; }
 
+		.white { background: #fff; }
 
+		.black { background: #000; }
 
+		.container {
 
+			padding: 15px;
 
+			border: 1px #000;
 
+			margin: 10px 15px 30px;
 
+			height: 300px;
 
+		}
 
+		.wheel {
 
+			position: relative;
 
+			width: 49%;
 
+			height: 300px;
 
+			float: left;
 
+		}
 
+		.wheel > div {
 
+			width: 200px;
 
+			height: 200px;
 
+			position: absolute;
 
+			top: 0px;
 
+			left: 0px;
 
+		}
 
+		.filter { filter: opacity(1); }
 
+
 
+		.wheel > .rg { decorator: radial-gradient(#ff09 58%, transparent 60%); }
 
+		.wheel > .rb { decorator: radial-gradient(#f0f9 58%, transparent 60%); left: 130px; }
 
+		.wheel > .gb { decorator: radial-gradient(#0ff9 58%, transparent 60%); top: 100px; left: 75px; }
 
+	</style>
 
+</head>
 
+
 
+<body>
 
+<div class="container white">
 
+	<div class="wheel">
 
+		<div class="rg"/>
 
+		<div class="rb"/>
 
+		<div class="gb"/>
 
+	</div>
 
+
 
+	<div class="wheel filter">
 
+		<div class="rg"/>
 
+		<div class="rb"/>
 
+		<div class="gb"/>
 
+	</div>
 
+</div>
 
+
 
+<div class="container black">
 
+	<div class="wheel">
 
+		<div class="rg"/>
 
+		<div class="rb"/>
 
+		<div class="gb"/>
 
+	</div>
 
+
 
+	<div class="wheel filter">
 
+		<div class="rg"/>
 
+		<div class="gb"/>
 
+		<div class="rb"/>
 
+	</div>
 
+</div>
 
+</body>
 
+</rml>

+ 68 - 0
Tests/Data/VisualTests/renderer_alpha_blending_03.rml
View File 

@@ -0,0 +1,68 @@
 
+<rml>
 
+<head>
 
+	<title>Alpha blending 03</title>
 
+	<link type="text/rcss" href="../style.rcss"/>
 
+	<meta name="Description" content="The wheels in each container has two commutative filters, but applied in different order. The rendered result should be the same in each case, given that the renderer does alpha blending and color transformation correctly." />
 
+	<meta name="Assert" content="The left and right wheels in each container should look equivalent. " />
 
+	<meta name="Backend" content="Requires backend support for rendering with shaders and filters." />
 
+	<style>
 
+		body { width: 800dp; }
 
+		.white { background: #fff; }
 
+		.black { background: #000; }
 
+		.container {
 
+			padding: 15px;
 
+			border: 1px #000;
 
+			margin: 10px 15px 30px;
 
+			height: 300px;
 
+		}
 
+		.wheel {
 
+			position: relative;
 
+			width: 49%;
 
+			height: 300px;
 
+			float: left;
 
+		}
 
+		.wheel > div {
 
+			width: 200px;
 
+			height: 200px;
 
+			position: absolute;
 
+			top: 0px;
 
+			left: 0px;
 
+		}
 
+		.filter_ab { filter: contrast(0.5) opacity(0.5); }
 
+		.filter_ba { filter: opacity(0.5) contrast(0.5); }
 
+
 
+		.wheel > .rg { decorator: radial-gradient(#ff08 58%, transparent 60%); }
 
+		.wheel > .rb { decorator: radial-gradient(#f0f8 58%, transparent 60%); left: 130px; }
 
+		.wheel > .gb { decorator: radial-gradient(#0ff8 58%, transparent 60%); top: 100px; left: 75px; }
 
+	</style>
 
+</head>
 
+
 
+<body>
 
+<div class="container white">
 
+	<div class="wheel filter_ab">
 
+		<div class="rg"/>
 
+		<div class="rb"/>
 
+		<div class="gb"/>
 
+	</div>
 
+
 
+	<div class="wheel filter_ba">
 
+		<div class="rg"/>
 
+		<div class="rb"/>
 
+		<div class="gb"/>
 
+	</div>
 
+</div>
 
+<div class="container black">
 
+	<div class="wheel filter_ab">
 
+		<div class="rg"/>
 
+		<div class="rb"/>
 
+		<div class="gb"/>
 
+	</div>
 
+
 
+	<div class="wheel filter_ba">
 
+		<div class="rg"/>
 
+		<div class="rb"/>
 
+		<div class="gb"/>
 
+	</div>
 
+</div>
 
+</body>
 
+</rml>