fast/css/padding-no-renderer.html

<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
<html>
<head>
<script src="../js/resources/js-test-pre.js"></script>
<style>
  #test1 { padding: 10px; display: none; }
</style>
</head>
<body>

<div id="tests_container">
  
<div id="test0" style="display: none"></div>
<div id="test1"></div>
<div id="test2" style="padding: 10px; display: none;"></div>
<table id="test_table" cellpadding="10">
  <tr>
    <td id="test3" style="display: none">FOO</td>
    <td id="test4">BAR</td>
  <tr>
</table>

<div style="position: relative; width: 100px; height: 100px">
  <div id="test5" style="padding: 10%; width: 50px; height: 50px">BAR</div>
</div>

<div style="position: relative; width: 100px; height: 100px">
  <div id="test6" style="display: none; padding: 10%; width: 50px; height: 50px">BAR</div>
</div>

<div style="display: none; position: relative; width: 100px; height: 100px">
  <div id="test7" style="padding: 10%; width: 50px; height: 50px">BAR</div>
</div>

</div>

<script>
  var test0 = document.getElementById("test0");
  var test1 = document.getElementById("test1");
  var test2 = document.getElementById("test2");
  var test3 = document.getElementById("test3");
  var test4 = document.getElementById("test4");
  var test5 = document.getElementById("test5");
  var test6 = document.getElementById("test6");
  var test7 = document.getElementById("test7");
  
  shouldBeEqualToString("window.getComputedStyle(test0, null).paddingTop", "0px");
  shouldBeEqualToString("window.getComputedStyle(test1, null).paddingTop", "10px");
  shouldBeEqualToString("window.getComputedStyle(test2, null).paddingTop", "10px");
  shouldBeEqualToString("window.getComputedStyle(test3, null).paddingTop", "10px");
  shouldBeEqualToString("window.getComputedStyle(test4, null).paddingTop", "10px");
  shouldBeEqualToString("window.getComputedStyle(test5, null).paddingTop", "10px");
  shouldBeEqualToString("window.getComputedStyle(test6, null).paddingTop", "10%");
  shouldBeEqualToString("window.getComputedStyle(test7, null).paddingTop", "10%");
  
  // clean up after ourselves
  var tests_container = document.getElementById("tests_container");
  tests_container.parentNode.removeChild(tests_container);
</script>
<script src="../js/resources/js-test-post.js"></script>
</body>
</html>