tor-browser

The Tor Browser
git clone https://git.dasho.dev/tor-browser.git
Log | Files | Refs | README | LICENSE

html-elements.html (3762B)

      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: isolate;
     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")).backgroundColor,
     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    if (property !== "unicode-bidi") {
     71      assert_equals(a_styles[property], b_styles[property], "Different value for " + property);
     72    }
     73  }
     74 }, "Compare CSS div definitions (only valid if pre-reqs pass)");
     75 
     76 test(function() {
     77  var a = document.querySelector("span.a");
     78  var b = document.querySelector("span.b");
     79 
     80  var a_styles = window.getComputedStyle(a);
     81  var b_styles = window.getComputedStyle(b);
     82 
     83  assert_equals(a_styles.length, b_styles.length, "Same properties on both span.a and span.b");
     84 
     85  for (var i = 0; i < a_styles.length; i++) {
     86    var property = a_styles[i];
     87    assert_equals(property, b_styles[i], "Same property on span.a and span.b");
     88    assert_equals(a_styles[property], b_styles[property], "Different value for " + property);
     89  }
     90 }, "Compare CSS span definitions (only valid if pre-reqs pass)");
     91 
     92 test(function() {
     93  var p = document.getElementsByTagName("p")[0];
     94  var styles = window.getComputedStyle(p);
     95  assert_equals(styles["display"], "block");
     96 }, "p is display: block");
     97 
     98 test(function() {
     99  var ul_li = document.querySelector("ul > li");
    100  var styles = window.getComputedStyle(ul_li);
    101  assert_equals(styles["display"], "list-item");
    102 }, "ul > li is display: list-item");
    103 
    104 test(function() {
    105  var ol_li = document.querySelector("ol > li");
    106  var styles = window.getComputedStyle(ol_li);
    107  assert_equals(styles["display"], "list-item");
    108 }, "ol > li is display: list-item");
    109 
    110 test(function() {
    111  var table = document.getElementsByTagName("table")[0];
    112  var styles = window.getComputedStyle(table);
    113  assert_equals(styles["display"], "table");
    114 }, "table is display: table");
    115 
    116 test(function() {
    117  var tbody = document.getElementsByTagName("tbody")[0];
    118  var styles = window.getComputedStyle(tbody);
    119  assert_equals(styles["display"], "table-row-group");
    120 }, "tbody is display: table-row-group");
    121 
    122 test(function() {
    123  var tr = document.getElementsByTagName("tr")[0];
    124  var styles = window.getComputedStyle(tr);
    125  assert_equals(styles["display"], "table-row");
    126 }, "tr is display: table-row");
    127 
    128 test(function() {
    129  var td = document.getElementsByTagName("td")[0];
    130  var styles = window.getComputedStyle(td);
    131  assert_equals(styles["display"], "table-cell");
    132 }, "td is display: table-cell");
    133 </script>