testing/web-platform/tests/cssom/getComputedStyle-pseudo.html
author Emilio Cobos Álvarez <emilio@crisal.io>
Wed, 26 Jul 2017 02:12:05 +0200
changeset 615446 e84cdeabac52de87f7c7c676700de2cd2db7ef8d
parent 600200 ef997eeca061000b9830d8bd31863743be41ccce
permissions -rw-r--r--
Bug 1384065: Tests. r?heycam MozReview-Commit-ID: BHcyfvgBhaK

<!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;
}
#none {
  display: none;
}
#none::before,
#none::after {
  content: "Foo";
}
</style>
<div id="test">
  <div id="contents"></div>
  <div id="none"></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");
test(function() {
  var none = document.getElementById('none');
  [":before", ":after"].forEach(function(pseudo) {
    assert_equals(getComputedStyle(none, pseudo).content, "Foo",
                  "Pseudo-styles of display: none elements should be correct");
  });
}, "Resolution of pseudo-element styles in display: none elements");
</script>