html-elements.html

Enable keyboard shortcuts

This WPT test may be referenced by the following Test IDs:
- /infrastructure/assumptions/html-elements.html - WPT Dashboard Interop Dashboard

<!doctype html>

<title>HTML styles</title>

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

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

<style>

#parent {

  display: none;

div.b {

  all: initial;

  direction: initial;

  unicode-bidi: isolate;

  display: block;

div.c {

  background: red;

  background: initial;

span.b {

  all: initial;

  direction: initial;

  unicode-bidi: initial;

  display: inline;

</style>

<div id="parent">

  <div class="a"></div>

  <div class="b"></div>

  <div class="c"></div>

  <span class="a"></span>

  <span class="b"></span>

  <p></p>

  <ul>

    <li>

  </ul>

  <ol>

    <li>

  </ol>

  <table>

    <tbody>

      <tr>

        <td>

  </table>

</div>

<script>

test(function() {

  assert_true('all' in document.documentElement.style);

}, "(pre-req for comparison tests) all CSS short-hand supported");

test(function() {

  assert_in_array(window.getComputedStyle(document.querySelector("div.c")).backgroundColor,

                  ["rgba(0, 0, 0, 0)", "transparent"]);

}, "(pre-req for comparison tests) initial CSS value supported");

test(function() {

  var a = document.querySelector("div.a");

  var b = document.querySelector("div.b");

  var a_styles = window.getComputedStyle(a);

  var b_styles = window.getComputedStyle(b);

  assert_equals(a_styles.length, b_styles.length, "Same properties on both div.a and div.b");

  for (var i = 0; i < a_styles.length; i++) {

    var property = a_styles[i];

    assert_equals(property, b_styles[i], "Same property on div.a and div.b");

    if (property !== "unicode-bidi") {

      assert_equals(a_styles[property], b_styles[property], "Different value for " + property);

}, "Compare CSS div definitions (only valid if pre-reqs pass)");

test(function() {

  var a = document.querySelector("span.a");

  var b = document.querySelector("span.b");

  var a_styles = window.getComputedStyle(a);

  var b_styles = window.getComputedStyle(b);

  assert_equals(a_styles.length, b_styles.length, "Same properties on both span.a and span.b");

  for (var i = 0; i < a_styles.length; i++) {

    var property = a_styles[i];

    assert_equals(property, b_styles[i], "Same property on span.a and span.b");

    assert_equals(a_styles[property], b_styles[property], "Different value for " + property);

}, "Compare CSS span definitions (only valid if pre-reqs pass)");

test(function() {

  var p = document.getElementsByTagName("p")[0];

  var styles = window.getComputedStyle(p);

  assert_equals(styles["display"], "block");

}, "p is display: block");

test(function() {

  var ul_li = document.querySelector("ul > li");

  var styles = window.getComputedStyle(ul_li);

  assert_equals(styles["display"], "list-item");

}, "ul > li is display: list-item");

test(function() {

  var ol_li = document.querySelector("ol > li");

  var styles = window.getComputedStyle(ol_li);

  assert_equals(styles["display"], "list-item");

}, "ol > li is display: list-item");

test(function() {

  var table = document.getElementsByTagName("table")[0];

  var styles = window.getComputedStyle(table);

  assert_equals(styles["display"], "table");

}, "table is display: table");

test(function() {

  var tbody = document.getElementsByTagName("tbody")[0];

  var styles = window.getComputedStyle(tbody);

  assert_equals(styles["display"], "table-row-group");

}, "tbody is display: table-row-group");

test(function() {

  var tr = document.getElementsByTagName("tr")[0];

  var styles = window.getComputedStyle(tr);

  assert_equals(styles["display"], "table-row");

}, "tr is display: table-row");

test(function() {

  var td = document.getElementsByTagName("td")[0];

  var styles = window.getComputedStyle(td);

  assert_equals(styles["display"], "table-cell");

}, "td is display: table-cell");

</script>