Home Explore Help
Sign In
cpp
/
RmlUi
mirror of https://github.com/mikke89/RmlUi.git
2
0
Fork 0
Files Issues 0 Wiki
Branch: partial_layout_update
Branches Tags
RmlUi
/
Tests
/
Data
/
VisualTests
/
inline_formatting_aligned_subtree.rml

inline_formatting_aligned_subtree.rml 2.4 KB
Permalink History Raw

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114 
  1. <rml>
    2. 

  2. <head>
    3. 

  3. 	<title>Inline formatting - Aligned subtree</title>
    4. 

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

  5. 	<link rel="help" href="https://drafts.csswg.org/css2/#aligned-subtree" />
    6. 

  6. 	<meta name="Description" content="Children of an inline element whose 'vertical-align' property is 'top', 'center', or 'bottom', is aligned relative to it." />
    7. 

  7. 	<style>
    8. 

  8. 		body {
    9. 

  9. 			background: #ddd;
    10. 

  10. 			color: #444;
    11. 

  11. 		}
    12. 

  12. 		.wrapper {
    13. 

  13. 			border: 8px #bbb;
    14. 

  14. 			margin-bottom: 2em;
    15. 

  15. 			line-height: 2em;
    16. 

  16. 		}
    17. 

  17. 		span {
    18. 

  18. 			border-color: #3332;
    19. 

  19. 			border-width: 1px;
    20. 

  20. 			background: #dfd;
    21. 

  21. 			padding: 0.5em;
    22. 

  22. 		}
    23. 

  23. 		span.block {
    24. 

  24. 			background: #fdf;
    25. 

  25. 			display: inline-block;
    26. 

  26. 		}
    27. 

  27. 

  28. 		.tall   { line-height: 5em; }
    29. 

  29. 		.large  { line-height: 3em; }
    30. 

  30. 		.medium { line-height: 1.5em; }
    31. 

  31. 		.small  { line-height: 1.2em; }
    32. 

  32. 

  33. 		.top     { vertical-align: top; }
    34. 

  34. 		.center  { vertical-align: center; }
    35. 

  35. 		.bottom  { vertical-align: bottom; }
    36. 

  36. 		.line-up { vertical-align: -100%; }
    37. 

  37. 

  38. 		.split { line-height: 2em; }
    39. 

  39. 		.split span {
    40. 

  40. 			line-height: 4em;
    41. 

  41. 			border-width: 3px;
    42. 

  42. 			padding: 0;
    43. 

  43. 			vertical-align: top;
    44. 

  44. 		}
    45. 

  45. 		span.yellow, .yellow span { background-color: #ffd; }
    46. 

  46. 	</style>
    47. 

  47. </head>
    48. 

  48. 

  49. <body>
    50. 

  50. <div class="wrapper">
    51. 

  51. 	<span class="tall block">A</span>
    52. 

  52. 	<span class="small top">
    53. 

  53. 		B
    54. 

  54. 		<span class="medium block bottom">C</span>
    55. 

  55. 		D
    56. 

  56. 	</span>
    57. 

  57. 	<span class="large">
    58. 

  58. 		E
    59. 

  59. 		<span class="medium block">F</span>
    60. 

  60. 		G
    61. 

  61. 	</span>
    62. 

  62. </div>
    63. 

  63. <div class="wrapper">
    64. 

  64. 	<span class="small top">
    65. 

  65. 		A
    66. 

  66. 		<span class="medium block bottom">B</span>
    67. 

  67. 		<span class="bottom yellow">
    68. 

  68. 			C
    69. 

  69. 			<span class="line-up">
    70. 

  70. 				D
    71. 

  71. 				<span class="top">E</span>
    72. 

  72. 			</span>
    73. 

  73. 		</span>
    74. 

  74. 	</span>
    75. 

  75. 	<span class="tall block">F</span>
    76. 

  76. </div>
    77. 

  77. <div class="wrapper">
    78. 

  78. 	<span class="small top">
    79. 

  79. 		A
    80. 

  80. 		<span class="medium block bottom">
    81. 

  81. 			B
    82. 

  82. 			<span class="bottom yellow">
    83. 

  83. 				C
    84. 

  84. 				<span class="line-up">
    85. 

  85. 					D
    86. 

  86. 					<span class="top">E</span>
    87. 

  87. 				</span>
    88. 

  88. 			</span>
    89. 

  89. 		</span>
    90. 

  90. 	</span>
    91. 

  91. 	<span class="tall block">F</span>
    92. 

  92. </div>
    93. 

  93. <div class="wrapper">
    94. 

  94. 	<span class="small bottom">
    95. 

  95. 		A
    96. 

  96. 		<span class="medium block center">
    97. 

  97. 			B
    98. 

  98. 			<span class="bottom yellow">
    99. 

  99. 				C
    100. 

  100. 				<span class="line-up">
    101. 

  101. 					D
    102. 

  102. 					<span class="center">E</span>
    103. 

  103. 				</span>
    104. 

  104. 			</span>
    105. 

  105. 		</span>
    106. 

  106. 	</span>
    107. 

  107. 	<span class="tall block">F</span>
    108. 

  108. </div>
    109. 

  109. <div class="wrapper split">
    110. 

  110. 	The following text <span>should wrap down to the<br/> next line</span> and produce borders on each line.
    111. 

  111. </div>
    112. 

  112. <handle size_target="#document"/>
    113. 

  113. </body>
    114. 

  114. </rml>
    115.