Home Verkennen Help
Inloggen
khronosschoty
/
palemoon-dev
Volgen 2
Ster 1
Vork 0
Bestanden Kwesties 0 Pull-aanvragen 0 Wiki
Aftakking: master
Aftakkingen Labels
palemoon-dev
/
platform
/
layout
/
reftests
/
box-properties
/
CSS21-t100303.xhtml

CSS21-t100303.xhtml 10 KB
Permalink Geschiedenis Ruwe

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    2. 

  2. <html xmlns="http://www.w3.org/1999/xhtml">
    3. 

  3. 	<head>
    4. 

  4. 		<title>CSS 2.1 Test Suite: Block-level, non-replaced elements in normal flow</title>
    5. 

  5. 		<link rel="author" title="L. David Baron" href="https://dbaron.org/" />
    6. 

  6. 		<link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" />
    7. 

  7. 		<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#blockwidth" />
    8. 

  8. 		<meta name="flags" content="" />
    9. 

  9. 		<style type="text/css"><![CDATA[
    10. 

  10. 

  11. 		body { direction: ltr; }
    12. 

  12. 		div { height: 1px; }
    13. 

  13. 

  14. 		/* containing block */
    15. 

  15. 		body > div {
    16. 

  16. 			margin: 0 17px 0 3px;
    17. 

  17. 			border: medium solid transparent;
    18. 

  18. 			border-width: 0 154px 0 157px;
    19. 

  19. 			padding: 0 6px 0 2px;
    20. 

  20. 			width: 350px;
    21. 

  21. 		}
    22. 

  22. 		/* parent that is not containing block */
    23. 

  23. 		body > div > div { display: inline; }
    24. 

  24. 		/* test element */
    25. 

  25. 		body > div > div > div {
    26. 

  26. 			margin: 0 10px 0 6px;
    27. 

  27. 			border: medium solid transparent;
    28. 

  28. 			border-width: 0 12px 0 5px;
    29. 

  29. 			padding: 0 17px 0 9px;
    30. 

  30. 		}
    31. 

  31. 

  32. 		body > div, body > div > div, body > div > div > div { direction: ltr; }
    33. 

  33. 		body > div.trtl > div > div { direction: rtl; }
    34. 

  34. 		body > div.prtl > div { direction: rtl; }
    35. 

  35. 		body > div.cbrtl { direction: rtl; }
    36. 

  36. 		body > div.mlauto > div > div { margin-left: auto; }
    37. 

  37. 		body > div.mrauto > div > div { margin-right: auto; }
    38. 

  38. 

  39. 		body > div.wauto > div > div { width: auto; }
    40. 

  40. 		body > div.wnarrow > div > div { width: 127px; }
    41. 

  41. 		body > div.wwide > div > div { width: 415px; }
    42. 

  42. 

  43. 		/*
    44. 

  44. 		 * make a background on the containing block that is red
    45. 

  45. 		 * everywhere except where the test should draw its background
    46. 

  46. 		 */
    47. 

  47. 		body > div.wnarrow { background-image: url(CSS21-t100303-green-outside-170px.png); }
    48. 

  48. 		body > div.wwide { background-image: url(CSS21-t100303-green-outside-458px.png); }
    49. 

  49. 		body > div.wauto { background-image: url(CSS21-t100303-green-outside-334px.png); }
    50. 

  50. 		body > div.wauto.mlauto { background-image: url(CSS21-t100303-green-outside-340px.png); }
    51. 

  51. 		body > div.wauto.mrauto { background-image: url(CSS21-t100303-green-outside-344px.png); }
    52. 

  52. 		body > div.wauto.mlauto.mrauto { background-image: url(CSS21-t100303-green-outside-350px.png); }
    53. 

  53. 

  54. 		/*
    55. 

  55. 		 * The only results in the markup rather than using selectors
    56. 

  56. 		 * are whether the div ends up aligned to the left edge (atl),
    57. 

  57. 		 * the right edge (atr), or centered (atc).  Things with auto
    58. 

  58. 		 * widths always count as atl, to make the style rules simpler
    59. 

  59. 		 * (though they abut both edges).
    60. 

  60. 		 */
    61. 

  61. 		body > div.atl { background-position: 8px 0; }
    62. 

  62. 		body > div.atl.mlauto { background-position: 2px 0; }
    63. 

  63. 

  64. 		body > div.atr.wnarrow { background-position: 172px 0; }
    65. 

  65. 		body > div.atr.wnarrow.mrauto { background-position: 182px 0; }
    66. 

  66. 		body > div.atr.wwide { background-position: -116px 0; }
    67. 

  67. 		body > div.atr.wwide.mrauto { background-position: -106px 0; }
    68. 

  68. 

  69. 		/* Can only be atc when mlauto and mrauto and wnarrow. */
    70. 

  70. 		body > div.atc.wnarrow { background-position: 92px 0; }
    71. 

  71. 

  72. 		/*
    73. 

  73. 		 * make a background on the test div that is green only within
    74. 

  74. 		 * its desired width and red elsewhere
    75. 

  75. 		 */
    76. 

  76. 		body > div.wnarrow > div > div { background-image: url(CSS21-t100303-green-in-170px.png); }
    77. 

  77. 		body > div.wwide > div > div { background-image: url(CSS21-t100303-green-in-458px.png); }
    78. 

  78. 		body > div.wauto > div > div { background-image: url(CSS21-t100303-green-in-334px.png); }
    79. 

  79. 		body > div.wauto.mlauto > div > div { background-image: url(CSS21-t100303-green-in-340px.png); }
    80. 

  80. 		body > div.wauto.mrauto > div > div { background-image: url(CSS21-t100303-green-in-344px.png); }
    81. 

  81. 		body > div.wauto.mlauto.mrauto > div > div { background-image: url(CSS21-t100303-green-in-350px.png); }
    82. 

  82. 		/* move position to border-edge */
    83. 

  83. 		body > div > div > div { background-position: -5px 0; }
    84. 

  84. 

  85. 		/* for debugging */
    86. 

  86. 		/* body > div { background: transparent ! important; } */
    87. 

  87. 		/* body > div > div > div { background: orange ! important; } */
    88. 

  88. 

  89. 		]]></style>
    90. 

  90. 	</head>
    91. 

  91. 	<body>
    92. 

  92. 

  93. 		<div class="atl wauto"><div><div></div></div></div>
    94. 

  94. 		<div class="atl wauto trtl"><div><div></div></div></div>
    95. 

  95. 		<div class="atl wauto prtl"><div><div></div></div></div>
    96. 

  96. 		<div class="atl wauto prtl trtl"><div><div></div></div></div>
    97. 

  97. 		<div class="atl wauto cbrtl"><div><div></div></div></div>
    98. 

  98. 		<div class="atl wauto cbrtl trtl"><div><div></div></div></div>
    99. 

  99. 		<div class="atl wauto cbrtl prtl"><div><div></div></div></div>
    100. 

  100. 		<div class="atl wauto cbrtl prtl trtl"><div><div></div></div></div>
    101. 

  101. 		<div class="atl wauto mlauto"><div><div></div></div></div>
    102. 

  102. 		<div class="atl wauto mlauto trtl"><div><div></div></div></div>
    103. 

  103. 		<div class="atl wauto mlauto prtl"><div><div></div></div></div>
    104. 

  104. 		<div class="atl wauto mlauto prtl trtl"><div><div></div></div></div>
    105. 

  105. 		<div class="atl wauto mlauto cbrtl"><div><div></div></div></div>
    106. 

  106. 		<div class="atl wauto mlauto cbrtl trtl"><div><div></div></div></div>
    107. 

  107. 		<div class="atl wauto mlauto cbrtl prtl"><div><div></div></div></div>
    108. 

  108. 		<div class="atl wauto mlauto cbrtl prtl trtl"><div><div></div></div></div>
    109. 

  109. 		<div class="atl wauto mrauto"><div><div></div></div></div>
    110. 

  110. 		<div class="atl wauto mrauto trtl"><div><div></div></div></div>
    111. 

  111. 		<div class="atl wauto mrauto prtl"><div><div></div></div></div>
    112. 

  112. 		<div class="atl wauto mrauto prtl trtl"><div><div></div></div></div>
    113. 

  113. 		<div class="atl wauto mrauto cbrtl"><div><div></div></div></div>
    114. 

  114. 		<div class="atl wauto mrauto cbrtl trtl"><div><div></div></div></div>
    115. 

  115. 		<div class="atl wauto mrauto cbrtl prtl"><div><div></div></div></div>
    116. 

  116. 		<div class="atl wauto mrauto cbrtl prtl trtl"><div><div></div></div></div>
    117. 

  117. 		<div class="atl wauto mrauto mlauto"><div><div></div></div></div>
    118. 

  118. 		<div class="atl wauto mrauto mlauto trtl"><div><div></div></div></div>
    119. 

  119. 		<div class="atl wauto mrauto mlauto prtl"><div><div></div></div></div>
    120. 

  120. 		<div class="atl wauto mrauto mlauto prtl trtl"><div><div></div></div></div>
    121. 

  121. 		<div class="atl wauto mrauto mlauto cbrtl"><div><div></div></div></div>
    122. 

  122. 		<div class="atl wauto mrauto mlauto cbrtl trtl"><div><div></div></div></div>
    123. 

  123. 		<div class="atl wauto mrauto mlauto cbrtl prtl"><div><div></div></div></div>
    124. 

  124. 		<div class="atl wauto mrauto mlauto cbrtl prtl trtl"><div><div></div></div></div>
    125. 

  125. 		<div class="atl wnarrow"><div><div></div></div></div>
    126. 

  126. 		<div class="atl wnarrow trtl"><div><div></div></div></div>
    127. 

  127. 		<div class="atl wnarrow prtl"><div><div></div></div></div>
    128. 

  128. 		<div class="atl wnarrow prtl trtl"><div><div></div></div></div>
    129. 

  129. 		<div class="atr wnarrow cbrtl"><div><div></div></div></div>
    130. 

  130. 		<div class="atr wnarrow cbrtl trtl"><div><div></div></div></div>
    131. 

  131. 		<div class="atr wnarrow cbrtl prtl"><div><div></div></div></div>
    132. 

  132. 		<div class="atr wnarrow cbrtl prtl trtl"><div><div></div></div></div>
    133. 

  133. 		<div class="atr wnarrow mlauto"><div><div></div></div></div>
    134. 

  134. 		<div class="atr wnarrow mlauto trtl"><div><div></div></div></div>
    135. 

  135. 		<div class="atr wnarrow mlauto prtl"><div><div></div></div></div>
    136. 

  136. 		<div class="atr wnarrow mlauto prtl trtl"><div><div></div></div></div>
    137. 

  137. 		<div class="atr wnarrow mlauto cbrtl"><div><div></div></div></div>
    138. 

  138. 		<div class="atr wnarrow mlauto cbrtl trtl"><div><div></div></div></div>
    139. 

  139. 		<div class="atr wnarrow mlauto cbrtl prtl"><div><div></div></div></div>
    140. 

  140. 		<div class="atr wnarrow mlauto cbrtl prtl trtl"><div><div></div></div></div>
    141. 

  141. 		<div class="atl wnarrow mrauto"><div><div></div></div></div>
    142. 

  142. 		<div class="atl wnarrow mrauto trtl"><div><div></div></div></div>
    143. 

  143. 		<div class="atl wnarrow mrauto prtl"><div><div></div></div></div>
    144. 

  144. 		<div class="atl wnarrow mrauto prtl trtl"><div><div></div></div></div>
    145. 

  145. 		<div class="atl wnarrow mrauto cbrtl"><div><div></div></div></div>
    146. 

  146. 		<div class="atl wnarrow mrauto cbrtl trtl"><div><div></div></div></div>
    147. 

  147. 		<div class="atl wnarrow mrauto cbrtl prtl"><div><div></div></div></div>
    148. 

  148. 		<div class="atl wnarrow mrauto cbrtl prtl trtl"><div><div></div></div></div>
    149. 

  149. 		<div class="atc wnarrow mrauto mlauto"><div><div></div></div></div>
    150. 

  150. 		<div class="atc wnarrow mrauto mlauto trtl"><div><div></div></div></div>
    151. 

  151. 		<div class="atc wnarrow mrauto mlauto prtl"><div><div></div></div></div>
    152. 

  152. 		<div class="atc wnarrow mrauto mlauto prtl trtl"><div><div></div></div></div>
    153. 

  153. 		<div class="atc wnarrow mrauto mlauto cbrtl"><div><div></div></div></div>
    154. 

  154. 		<div class="atc wnarrow mrauto mlauto cbrtl trtl"><div><div></div></div></div>
    155. 

  155. 		<div class="atc wnarrow mrauto mlauto cbrtl prtl"><div><div></div></div></div>
    156. 

  156. 		<div class="atc wnarrow mrauto mlauto cbrtl prtl trtl"><div><div></div></div></div>
    157. 

  157. 		<div class="atl wwide"><div><div></div></div></div>
    158. 

  158. 		<div class="atl wwide trtl"><div><div></div></div></div>
    159. 

  159. 		<div class="atl wwide prtl"><div><div></div></div></div>
    160. 

  160. 		<div class="atl wwide prtl trtl"><div><div></div></div></div>
    161. 

  161. 		<div class="atr wwide cbrtl"><div><div></div></div></div>
    162. 

  162. 		<div class="atr wwide cbrtl trtl"><div><div></div></div></div>
    163. 

  163. 		<div class="atr wwide cbrtl prtl"><div><div></div></div></div>
    164. 

  164. 		<div class="atr wwide cbrtl prtl trtl"><div><div></div></div></div>
    165. 

  165. 		<div class="atl wwide mlauto"><div><div></div></div></div>
    166. 

  166. 		<div class="atl wwide mlauto trtl"><div><div></div></div></div>
    167. 

  167. 		<div class="atl wwide mlauto prtl"><div><div></div></div></div>
    168. 

  168. 		<div class="atl wwide mlauto prtl trtl"><div><div></div></div></div>
    169. 

  169. 		<div class="atr wwide mlauto cbrtl"><div><div></div></div></div>
    170. 

  170. 		<div class="atr wwide mlauto cbrtl trtl"><div><div></div></div></div>
    171. 

  171. 		<div class="atr wwide mlauto cbrtl prtl"><div><div></div></div></div>
    172. 

  172. 		<div class="atr wwide mlauto cbrtl prtl trtl"><div><div></div></div></div>
    173. 

  173. 		<div class="atl wwide mrauto"><div><div></div></div></div>
    174. 

  174. 		<div class="atl wwide mrauto trtl"><div><div></div></div></div>
    175. 

  175. 		<div class="atl wwide mrauto prtl"><div><div></div></div></div>
    176. 

  176. 		<div class="atl wwide mrauto prtl trtl"><div><div></div></div></div>
    177. 

  177. 		<div class="atr wwide mrauto cbrtl"><div><div></div></div></div>
    178. 

  178. 		<div class="atr wwide mrauto cbrtl trtl"><div><div></div></div></div>
    179. 

  179. 		<div class="atr wwide mrauto cbrtl prtl"><div><div></div></div></div>
    180. 

  180. 		<div class="atr wwide mrauto cbrtl prtl trtl"><div><div></div></div></div>
    181. 

  181. 		<div class="atl wwide mrauto mlauto"><div><div></div></div></div>
    182. 

  182. 		<div class="atl wwide mrauto mlauto trtl"><div><div></div></div></div>
    183. 

  183. 		<div class="atl wwide mrauto mlauto prtl"><div><div></div></div></div>
    184. 

  184. 		<div class="atl wwide mrauto mlauto prtl trtl"><div><div></div></div></div>
    185. 

  185. 		<div class="atr wwide mrauto mlauto cbrtl"><div><div></div></div></div>
    186. 

  186. 		<div class="atr wwide mrauto mlauto cbrtl trtl"><div><div></div></div></div>
    187. 

  187. 		<div class="atr wwide mrauto mlauto cbrtl prtl"><div><div></div></div></div>
    188. 

  188. 		<div class="atr wwide mrauto mlauto cbrtl prtl trtl"><div><div></div></div></div>
    189. 

  189. 

  190. 	</body>
    191. 

  191. </html>
    192. 

  192.