Acasă Explorează Ajutor
Autentificare
cpp
/
RmlUi
oglindă de https://github.com/mikke89/RmlUi.git
2
0
Bifurcare 0
Fisiere Probleme 0 Wiki
Ramură: improve-expand-string
Ramuri Etichete
RmlUi
/
Tests
/
Data
/
VisualTests
/
renderer_alpha_blending_01.rml

renderer_alpha_blending_01.rml 3.8 KB
Permalink Istoric Crud

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101 
  1. <rml>
    2. 

  2. <head>
    3. 

  3. 	<title>Alpha blending 01</title>
    4. 

  4. 	<link type="text/rcss" href="../style.rcss"/>
    5. 

  5. 	<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." />
    6. 

  6. 	<meta name="Backend" content="Requires backend support for rendering with shaders and filters, for all parts to render correctly." />
    7. 

  7. 	<style>
    8. 

  8. 		@spritesheet theme
    9. 

  9. 		{
    10. 

  10. 			src: /assets/invader.tga;
    11. 

  11. 			white: 230px 210px 1px 1px;                    /* #fff */
    12. 

  12. 			black: 421px 44px 1px 1px;                     /* #000 */
    13. 

  13. 			transparent-white: 292px 284px 1px 1px;        /* #ffffff80 */
    14. 

  14. 			transparent-gray: 85px 201.5px 1px 1px;        /* #80808099 */
    15. 

  15. 			transparent-black: 190px 56.499px 1px 0.002px; /* #0000004d */
    16. 

  16. 		}
    17. 

  17. 		.white { background: #fff; }
    18. 

  18. 		.gray { background: #808080; }
    19. 

  19. 		.black { background: #000; }
    20. 

  20. 		body > div {
    21. 

  21. 			padding: 15px;
    22. 

  22. 			border: 1px #000;
    23. 

  23. 			display: flow-root;
    24. 

  24. 			margin: 10px 0 30px;
    25. 

  25. 		}
    26. 

  26. 		body > div > div {
    27. 

  27. 			width: 32px;
    28. 

  28. 			height: 32px;
    29. 

  29. 			border: 1px transparent;
    30. 

  30. 			float: left;
    31. 

  31. 			margin-right: 15px;
    32. 

  32. 		}
    33. 

  33. 		.white .background { background: #fff; }
    34. 

  34. 		.white .background_alpha { background: #fff4; }
    35. 

  35. 		.white .background_opacity { background: #fff; opacity: 0.25; }
    36. 

  36. 		.white .sprite { decorator: image(white); }
    37. 

  37. 		.white .sprite_transparent { decorator: image(transparent-white); }
    38. 

  38. 		.white .sprite_image_color { decorator: image(white); image-color: #fff4; }
    39. 

  39. 		.white .black_transparent { background: #0000; }
    40. 

  40. 		.white .linear_gradient { decorator: linear-gradient(to right, #fff, transparent); }
    41. 

  41. 		.white .horizontal_gradient { decorator: horizontal-gradient(#fff transparent); }
    42. 

  42. 

  43. 		.gray .background { background: #808080; }
    44. 

  44. 		.gray .background_alpha { background: #80808044; }
    45. 

  45. 		.gray .background_opacity { background: #808080; opacity: 0.25; }
    46. 

  46. 		.gray .sprite { decorator: image(transparent-gray); }
    47. 

  47. 		.gray .sprite_image_color { decorator: image(white); image-color: #808080;}
    48. 

  48. 		.gray .filter { background: #fff; filter: contrast(0); }
    49. 

  49. 		.gray .linear_gradient { decorator: linear-gradient(to right, #808080, transparent); }
    50. 

  50. 		.gray .horizontal_gradient { decorator: horizontal-gradient(#808080 transparent); }
    51. 

  51. 

  52. 		.black .background { background: #000; }
    53. 

  53. 		.black .background_alpha { background: #0004; }
    54. 

  54. 		.black .background_opacity { background: #000; opacity: 0.25; }
    55. 

  55. 		.black .sprite { decorator: image(transparent-black); }
    56. 

  56. 		.black .sprite_image_color { decorator: image(white); image-color: #000;}
    57. 

  57. 		.black .filter { background: #fff; filter: brightness(0); }
    58. 

  58. 		.black .linear_gradient { decorator: linear-gradient(to right, #000, transparent); }
    59. 

  59. 		.black .horizontal_gradient { decorator: horizontal-gradient(#000 transparent); }
    60. 

  60. 	</style>
    61. 

  61. </head>
    62. 

  62. 

  63. <body>
    64. 

  64. The following box should be filled by perfect white.
    65. 

  65. <div class="white">
    66. 

  66. 	<div class="background"/>
    67. 

  67. 	<div class="background_alpha"/>
    68. 

  68. 	<div class="background_opacity"/>
    69. 

  69. 	<div class="sprite"/>
    70. 

  70. 	<div class="sprite_transparent"/>
    71. 

  71. 	<div class="sprite_image_color"/>
    72. 

  72. 	<div class="black_transparent"/>
    73. 

  73. 	<div class="linear_gradient"/>
    74. 

  74. 	<div class="horizontal_gradient"/>
    75. 

  75. </div>
    76. 

  76. 

  77. The following box should be filled by a single gray color.
    78. 

  78. <div class="gray">
    79. 

  79. 	<div class="background"/>
    80. 

  80. 	<div class="background_alpha"/>
    81. 

  81. 	<div class="background_opacity"/>
    82. 

  82. 	<div class="sprite"/>
    83. 

  83. 	<div class="sprite_image_color"/>
    84. 

  84. 	<div class="filter"/>
    85. 

  85. 	<div class="linear_gradient"/>
    86. 

  86. 	<div class="horizontal_gradient"/>
    87. 

  87. </div>
    88. 

  88. 

  89. The following box should be filled by perfect black.
    90. 

  90. <div class="black">
    91. 

  91. 	<div class="background"/>
    92. 

  92. 	<div class="background_alpha"/>
    93. 

  93. 	<div class="background_opacity"/>
    94. 

  94. 	<div class="sprite"/>
    95. 

  95. 	<div class="sprite_image_color"/>
    96. 

  96. 	<div class="filter"/>
    97. 

  97. 	<div class="linear_gradient"/>
    98. 

  98. 	<div class="horizontal_gradient"/>
    99. 

  99. </div>
    100. 

  100. </body>
    101. 

  101. </rml>
    102.