testing/web-platform/tests/cssom/getComputedStyle-pseudo.html
author Emilio Cobos Álvarez <emilio@crisal.io>
Sat, 24 Jun 2017 07:51:16 +0200
changeset 600193 159ff7c48cceab0883b4440ddb46907427117cab
parent 568485 5693d8a26b49f7a5ee7d81bcf7c0bd1bf27485fb
child 615446 e84cdeabac52de87f7c7c676700de2cd2db7ef8d
child 615448 71e209499f83167943a64355ffe9d69d5af4ca03
permissions -rw-r--r--
Bug 1364880: Test non-existent pseudo-element styles. r?bz MozReview-Commit-ID: 5DH6s2EyXii

<!doctype html>
<meta charset="utf-8">
<title>CSSOM: Correct resolution of resolved value for display-affected pseudo-elements</title>
<link rel="help" href="https://drafts.csswg.org/cssom/#dom-window-getcomputedstyle">
<link rel="help" href="https://drafts.csswg.org/cssom/#resolved-values">
<link rel="author" title="Emilio Cobos Álvarez" href="mailto:emilio@crisal.io">
<script src=/resources/testharness.js></script>
<script src=/resources/testharnessreport.js></script>
<style>
#test { width: 100px; }

#contents {
  display: contents;
  border: 10px solid red;
}

#test::before,
#test::after,
#contents::before,
#contents::after {
  content: " ";
  width: 50%;
  height: 10px;
  display: block;
}
</style>
<div id="test">
  <div id="contents"></div>
</div>
<script>
test(function() {
  var div = document.getElementById('test');
  [":before", ":after"].forEach(function(pseudo) {
    assert_equals(getComputedStyle(div, pseudo).width, "50px");
  });
}, "Resolution of width is correct for ::before and ::after pseudo-elements");
test(function() {
  var contents = document.getElementById('contents');
  [":before", ":after"].forEach(function(pseudo) {
    assert_equals(getComputedStyle(contents, pseudo).width, "50px");
  });
}, "Resolution of width is correct for ::before and ::after pseudo-elements of display: contents elements");
test(function() {
  var has_no_pseudos = document.body;
  has_no_pseudos.style.position = "relative";
  [":before", ":after"].forEach(function(pseudo) {
    assert_equals(getComputedStyle(has_no_pseudos, pseudo).position, "static",
                  "Nonexistent " + pseudo + " pseudo-element shouldn't claim to have " +
                  "the same style as the originating element");
  });
}, "Resolution of nonexistent pseudo-element styles");
</script>