OLD | NEW |
(Empty) | |
| 1 <!doctype html> |
| 2 <title>HTML styles</title> |
| 3 <script src="/resources/testharness.js"></script> |
| 4 <script src="/resources/testharnessreport.js"></script> |
| 5 <style> |
| 6 #parent { |
| 7 display: none; |
| 8 } |
| 9 |
| 10 div.b { |
| 11 all: initial; |
| 12 direction: initial; |
| 13 unicode-bidi: initial; |
| 14 display: block; |
| 15 } |
| 16 |
| 17 div.c { |
| 18 background: red; |
| 19 background: initial; |
| 20 } |
| 21 |
| 22 span.b { |
| 23 all: initial; |
| 24 direction: initial; |
| 25 unicode-bidi: initial; |
| 26 display: inline; |
| 27 } |
| 28 </style> |
| 29 <div id="parent"> |
| 30 <div class="a"></div> |
| 31 <div class="b"></div> |
| 32 <div class="c"></div> |
| 33 <span class="a"></span> |
| 34 <span class="b"></span> |
| 35 <p></p> |
| 36 <ul> |
| 37 <li> |
| 38 </ul> |
| 39 <ol> |
| 40 <li> |
| 41 </ol> |
| 42 <table> |
| 43 <tbody> |
| 44 <tr> |
| 45 <td> |
| 46 </table> |
| 47 </div> |
| 48 <script> |
| 49 test(function() { |
| 50 assert_true('all' in document.documentElement.style); |
| 51 }, "(pre-req for comparison tests) all CSS short-hand supported"); |
| 52 |
| 53 test(function() { |
| 54 assert_in_array(window.getComputedStyle(document.querySelector("div.c")).backg
roundColor, |
| 55 ["rgba(0, 0, 0, 0)", "transparent"]); |
| 56 }, "(pre-req for comparison tests) initial CSS value supported"); |
| 57 |
| 58 test(function() { |
| 59 var a = document.querySelector("div.a"); |
| 60 var b = document.querySelector("div.b"); |
| 61 |
| 62 var a_styles = window.getComputedStyle(a); |
| 63 var b_styles = window.getComputedStyle(b); |
| 64 |
| 65 assert_equals(a_styles.length, b_styles.length, "Same properties on both div.a
and div.b"); |
| 66 |
| 67 for (var i = 0; i < a_styles.length; i++) { |
| 68 var property = a_styles[i]; |
| 69 assert_equals(property, b_styles[i], "Same property on div.a and div.b"); |
| 70 assert_equals(a_styles[property], b_styles[property], "Different value for "
+ property); |
| 71 } |
| 72 }, "Compare CSS div definitions (only valid if pre-reqs pass)"); |
| 73 |
| 74 test(function() { |
| 75 var a = document.querySelector("span.a"); |
| 76 var b = document.querySelector("span.b"); |
| 77 |
| 78 var a_styles = window.getComputedStyle(a); |
| 79 var b_styles = window.getComputedStyle(b); |
| 80 |
| 81 assert_equals(a_styles.length, b_styles.length, "Same properties on both span.
a and span.b"); |
| 82 |
| 83 for (var i = 0; i < a_styles.length; i++) { |
| 84 var property = a_styles[i]; |
| 85 assert_equals(property, b_styles[i], "Same property on span.a and span.b"); |
| 86 assert_equals(a_styles[property], b_styles[property], "Different value for "
+ property); |
| 87 } |
| 88 }, "Compare CSS span definitions (only valid if pre-reqs pass)"); |
| 89 |
| 90 test(function() { |
| 91 var p = document.getElementsByTagName("p")[0]; |
| 92 var styles = window.getComputedStyle(p); |
| 93 assert_equals(styles["display"], "block"); |
| 94 }, "p is display: block"); |
| 95 |
| 96 test(function() { |
| 97 var ul_li = document.querySelector("ul > li"); |
| 98 var styles = window.getComputedStyle(ul_li); |
| 99 assert_equals(styles["display"], "list-item"); |
| 100 }, "ul > li is display: list-item"); |
| 101 |
| 102 test(function() { |
| 103 var ol_li = document.querySelector("ol > li"); |
| 104 var styles = window.getComputedStyle(ol_li); |
| 105 assert_equals(styles["display"], "list-item"); |
| 106 }, "ol > li is display: list-item"); |
| 107 |
| 108 test(function() { |
| 109 var table = document.getElementsByTagName("table")[0]; |
| 110 var styles = window.getComputedStyle(table); |
| 111 assert_equals(styles["display"], "table"); |
| 112 }, "table is display: table"); |
| 113 |
| 114 test(function() { |
| 115 var tbody = document.getElementsByTagName("tbody")[0]; |
| 116 var styles = window.getComputedStyle(tbody); |
| 117 assert_equals(styles["display"], "table-row-group"); |
| 118 }, "tbody is display: table-row-group"); |
| 119 |
| 120 test(function() { |
| 121 var tr = document.getElementsByTagName("tr")[0]; |
| 122 var styles = window.getComputedStyle(tr); |
| 123 assert_equals(styles["display"], "table-row"); |
| 124 }, "tr is display: table-row"); |
| 125 |
| 126 test(function() { |
| 127 var td = document.getElementsByTagName("td")[0]; |
| 128 var styles = window.getComputedStyle(td); |
| 129 assert_equals(styles["display"], "table-cell"); |
| 130 }, "td is display: table-cell"); |
| 131 </script> |
OLD | NEW |