首页 发现 帮助
登录
cpp
/
RmlUi
镜像自地址 https://github.com/mikke89/RmlUi.git
2
0
派生 0
文件 工单管理 0 Wiki
浏览代码

Visual tests: Add alpha blending tests for renderer

Michael Ragazzon 2 年之前
父节点
a064612685
当前提交
641f8b59c8
共有 3 个文件被更改，包括 237 次插入 和 0 次删除
合并视图 显示文件统计
  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
查看文件 

@@ -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
查看文件 

@@ -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
查看文件 

@@ -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>