PageRenderTime 54ms CodeModel.GetById 13ms RepoModel.GetById 1ms app.codeStats 0ms

/quirks-mode/percentage-height-calculation.html

https://github.com/asankah/web-platform-tests
HTML | 142 lines | 135 code | 7 blank | 0 comment | 0 complexity | 3e0321c1c6f203d4eec31c02494a12ff MD5 | raw file
Possible License(s): BSD-3-Clause 
    

  1. <!doctype html>
    2. 

  2. <html>
    3. 

  3.  <head>
    4. 

  4.   <title>The percentage height calculation quirk</title>
    5. 

  5.   <script src="/resources/testharness.js"></script>
    6. 

  6.   <script src="/resources/testharnessreport.js"></script>
    7. 

  7.   <style> iframe { width:20px; height:200px } </style>
    8. 

  8.  </head>
    9. 

  9.  <body>
    10. 

  10.   <div id=log></div>
    11. 

  11.   <iframe id=quirks></iframe>
    12. 

  12.   <iframe id=almost></iframe>
    13. 

  13.   <iframe id=standards></iframe>
    14. 

  14.   <script>
    15. 

  15.     setup({explicit_done:true});
    16. 

  16.     var html = "<style id=style></style>";
    17. 

  17.     var png = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAACklEQVR4nGMAAQAABQABDQottAAAAABJRU5ErkJggg==";
    18. 

  18.     var a_doctype = '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">';
    19. 

  19.     var s_doctype = '<!DOCTYPE HTML>';
    20. 

  20.     var q = document.getElementById('quirks').contentWindow;
    21. 

  21.     var a = document.getElementById('almost').contentWindow;
    22. 

  22.     var s = document.getElementById('standards').contentWindow;
    23. 

  23.     q.document.open();
    24. 

  24.     q.document.write(html);
    25. 

  25.     q.document.close();
    26. 

  26.     a.document.open();
    27. 

  27.     a.document.write(a_doctype + html);
    28. 

  28.     a.document.close();
    29. 

  29.     s.document.open();
    30. 

  30.     s.document.write(s_doctype + html);
    31. 

  31.     s.document.close();
    32. 

  32.     onload = function() {
    33. 

  33.         [q, a, s].forEach(function(win) {
    34. 

  34.             ['style', 'test'].forEach(function(id) {
    35. 

  35.                 win.__proto__.__defineGetter__(id, function() { return win.document.getElementById(id); });
    36. 

  36.             });
    37. 

  37.         });
    38. 

  38. 

  39.         var tests = [
    40. 

  40.         {style:'#test { height:100% }', body:'<div id=test></div>', q:184, s:0},
    41. 

  41.         {style:'#test { height:50% }', body:'<div id=test></div>', q:92, s:0},
    42. 

  42.         {style:'#test { height:25% }', body:'<div id=test></div>', q:46, s:0},
    43. 

  43.         {style:'#test { height:12.5% }', body:'<div id=test></div>', q:23, s:0},
    44. 

  44.         {style:'#test { height:100% }', body:'<div><div id=test></div></div>', q:184, s:0},
    45. 

  45.         {style:'', body:'<img id=test src="{png}" height=100%>', q:184, s:1},
    46. 

  46.         {style:'', body:'<img id=test src="{png}" height=100% border=10>', q:184, s:1},
    47. 

  47.         {style:'', body:'<table id=test height=100%><tr><td></table>', q:184, s:6},
    48. 

  48.         {style:'#foo { height:100px } #test { height:100% }', body:'<div id=foo><div><div id=test></div></div></div>', q:100, s:0},
    49. 

  49.         {style:'#foo { position:absolute } #test { height:100% }', body:'<div id=foo><div><div id=test></div></div></div>', q:0, s:0},
    50. 

  50.         {style:'#foo { position:relative } #test { height:100% }', body:'<div id=foo><div><div id=test></div></div></div>', q:184, s:0},
    51. 

  51.         {style:'#foo { height:100px } #test { height:100%; position:absolute }', body:'<div id=foo><div><div id=test></div></div></div>', q:200, s:200},
    52. 

  52.         {style:'#foo { height:100px } #test { height:100%; position:fixed }', body:'<div id=foo><div><div id=test></div></div></div>', q:200, s:200},
    53. 

  53.         {style:'#foo { height:100px } #test { height:100%; position:relative }', body:'<div id=foo><div><div id=test></div></div></div>', q:100, s:0},
    54. 

  54.         {style:'#foo { height:100px } #test { height:calc(100% + 1px) }', body:'<div id=foo><div id=test></div></div>', q:101, s:101},
    55. 

  55.         {style:'#foo { height:100px } #test { height:5px; height:calc(100% + 1px) }', body:'<div id=foo><div><div id=test></div></div></div>', q:0, s:0},
    56. 

  56.         {style:'html { display:inline } #test { height:100% }', body:'<div id=test></div>', q:184, s:0}, // display:inline on root has no effect
    57. 

  57.         {style:'html { margin:10px } body { display:inline } #test { height:100% }', body:'<div id=test></div>', q:200, s:0},
    58. 

  58.         {style:'body { margin:0 } #test { height:100% }', body:'<div id=test></div>', q:200, s:0},
    59. 

  59.         {style:'body { margin:0; padding:10px } #test { height:100% }', body:'<div id=test></div>', q:180, s:0},
    60. 

  60.         {style:'body { margin:0; border:10px solid } #test { height:100% }', body:'<div id=test></div>', q:180, s:0},
    61. 

  61.         {style:'html { margin:10px } #test { height:100% }', body:'<div id=test></div>', q:164, s:0},
    62. 

  62.         {style:'html { padding:10px } #test { height:100% }', body:'<div id=test></div>', q:164, s:0},
    63. 

  63.         {style:'html { border:10px solid } #test { height:100% }', body:'<div id=test></div>', q:164, s:0},
    64. 

  64.         {style:'html { position:absolute } #test { height:100% }', body:'<div id=test></div>', q:0, s:0},
    65. 

  65.         {style:'body { position:absolute } #test { height:100% }', body:'<div id=test></div>', q:0, s:0},
    66. 

  66.         {style:'html { height:100%; margin:10px } #test { height:100% }', body:'<div id=test></div>', q:184, s:0},
    67. 

  67.         {style:'html { height:100%; padding:10px } #test { height:100% }', body:'<div id=test></div>', q:184, s:0},
    68. 

  68.         {style:'html { height:100%; border:10px solid } #test { height:100% }', body:'<div id=test></div>', q:184, s:0},
    69. 

  69.         {style:'body { height:100%; margin:10px } #test { height:100% }', body:'<div id=test></div>', q:200, s:0},
    70. 

  70.         {style:'body { height:100%; padding:10px } #test { height:100% }', body:'<div id=test></div>', q:200, s:0},
    71. 

  71.         {style:'body { height:100%; border:10px solid } #test { height:100% }', body:'<div id=test></div>', q:200, s:0},
    72. 

  72.         {style:'html { position:absolute; height:100%; margin:10px } #test { height:100% }', body:'<div id=test></div>', q:184, s:0},
    73. 

  73.         {style:'html { position:absolute; height:100%; padding:10px } #test { height:100% }', body:'<div id=test></div>', q:184, s:0},
    74. 

  74.         {style:'html { position:absolute; height:100%; border:10px solid } #test { height:100% }', body:'<div id=test></div>', q:184, s:0},
    75. 

  75.         {style:'body { margin:99px 0 } #test { height:100% }', body:'<div id=test></div>', q:2, s:0},
    76. 

  76.         {style:'body { margin:110px 0 } #test { height:100% }', body:'<div id=test></div>', q:0, s:0},
    77. 

  77.         {style:'html, body { border:10px none } #test { height:100% }', body:'<div id=test></div>', q:184, s:0},
    78. 

  78.         {style:'html, body { border:10px hidden } #test { height:100% }', body:'<div id=test></div>', q:184, s:0},
    79. 

  79.         ];
    80. 

  80. 

  81.         tests.forEach(function(t) {
    82. 

  82.             test(function() {
    83. 

  83.                 var style = t.style.replace(/\{png\}/g, png);
    84. 

  84.                 var body = t.body.replace(/\{png\}/g, png);
    85. 

  85.                 q.style.textContent = style;
    86. 

  86.                 a.style.textContent = style;
    87. 

  87.                 s.style.textContent = style;
    88. 

  88.                 q.document.body.innerHTML = body;
    89. 

  89.                 a.document.body.innerHTML = body;
    90. 

  90.                 s.document.body.innerHTML = body;
    91. 

  91. 

  92.                 assert_equals(q.getComputedStyle(q.test).height,
    93. 

  93.                               t.q + 'px',
    94. 

  94.                               'quirks mode');
    95. 

  95.                 assert_equals(a.getComputedStyle(a.test).height,
    96. 

  96.                               t.s + 'px',
    97. 

  97.                               'almost standards mode');
    98. 

  98.                 assert_equals(s.getComputedStyle(s.test).height,
    99. 

  99.                               t.s + 'px',
    100. 

  100.                               'standards mode');
    101. 

  101.             }, document.title+', '+t.style+t.body);
    102. 

  102.         });
    103. 

  103. 

  104.         var xml_tests = [
    105. 

  105.         {input:'<html xmlns="{html}"><head><style>#test { height:100% }</style></head><body><div id="test"/></body></html>', q:184, s:0},
    106. 

  106.         {input:'<html xmlns="{html}"><head><style>#test { height:100% }</style></head><body/><div id="test"/></html>', q:200, s:0},
    107. 

  107.         {input:'<html xmlns="{html}"><head><style>#test { height:100% }</style></head><span><body><div id="test"/></body></span></html>', q:200, s:0},
    108. 

  108.         {input:'<html xmlns="{html}"><head><style>#test { height:100% }</style></head><body><body><div id="test"/></body></body></html>', q:200, s:0},
    109. 

  109.         {input:'<html><head xmlns="{html}"><style>#test { height:100% }</style></head><body xmlns="{html}"><div id="test"/></body></html>', q:200, s:0},
    110. 

  110.         {input:'<div xmlns="{html}"><head><style>#test { height:100% }</style></head><body><div id="test"/></body></div>', q:200, s:0},
    111. 

  111.         {input:'<html xmlns="{html}"><head><style>#test { height:100% }</style></head><body xmlns=""><div xmlns="{html}" id="test"/></body></html>', q:200, s:0},
    112. 

  112.         {input:'<HTML xmlns="{html}"><head><style>#test { height:100% }</style></head><body><div id="test"/></body></HTML>', q:200, s:0},
    113. 

  113.         {input:'<html xmlns="{html}"><head><style>#test { height:100% }</style></head><BODY><div id="test"/></BODY></html>', q:200, s:0},
    114. 

  114.         ];
    115. 

  115. 

  116.         var parser = new DOMParser();
    117. 

  117. 

  118.         xml_tests.forEach(function(t) {
    119. 

  119.             test(function() {
    120. 

  120.                 var input = t.input.replace(/\{html\}/g, 'http://www.w3.org/1999/xhtml')
    121. 

  121.                                    .replace(/\{png\}/g, png);
    122. 

  122.                 var root = parser.parseFromString(input, 'text/xml').documentElement;
    123. 

  123.                 q.document.replaceChild(root.cloneNode(true), q.document.documentElement);
    124. 

  124.                 a.document.replaceChild(root.cloneNode(true), a.document.documentElement);
    125. 

  125.                 s.document.replaceChild(root, s.document.documentElement);
    126. 

  126.                 assert_equals(q.getComputedStyle(q.test).height,
    127. 

  127.                               t.q + 'px',
    128. 

  128.                               'quirks mode');
    129. 

  129.                 assert_equals(a.getComputedStyle(a.test).height,
    130. 

  130.                               t.s + 'px',
    131. 

  131.                               'almost standards mode');
    132. 

  132.                 assert_equals(s.getComputedStyle(s.test).height,
    133. 

  133.                               t.s + 'px',
    134. 

  134.                               'standards mode');
    135. 

  135.             }, document.title+', '+t.input);
    136. 

  136.         });
    137. 

  137. 

  138.         done();
    139. 

  139.     }
    140. 

  140.   </script>
    141. 

  141.  </body>
    142. 

  142. </html>
    143. 

  143.