layout/style/test/test_computed_style_grid_with_pseudo.html
author Emilio Cobos Álvarez <emilio@crisal.io>
Sun, 25 Mar 2018 17:31:55 +0200
changeset 417756 70754a946fde161c04f86df1b67e3913c8ec590a
parent 391923 cd4e8b6932498eb87729bf7dffa2c754e1129dd1
child 469640 c9c0c6f2eed54a187e124942e53c3660b4cf17d8
permissions -rw-r--r--
Bug 509958: Unprefix :-moz-selection. r=dbaron,xidorn Our implementation is totally not what the spec says, but totally what other UAs do, see https://github.com/w3c/csswg-drafts/issues/2474. So given this is causing webcompat pain, I think we should be pragmatic and just unprefix this. We could keep serialization and getComputedStyle with ::selection working with a bit more effort, like we do for :-moz-placeholder, but I'd prefer not doing at least the serialization bit, and just alias in nsCSSPseudoElements :-moz-selection to selection too. MozReview-Commit-ID: 6lxctozRDqv

<!DOCTYPE HTML>
<html>
<!--
https://bugzilla.mozilla.org/show_bug.cgi?id=1350780
-->
<head>
<title>Test for Bug 1350780</title>
<script type="application/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
<link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>

<style>
#container {
  width: 100px;
}

.gridBefore::before {
  content: "";
  display: grid;
  grid-template-columns: auto;
}

.gridBeforeNoContent::before {
  display: grid;
  grid-template-columns: 40px;
}
</style>

<script type="application/javascript">

SimpleTest.waitForExplicitFinish();

function checkTemplateWithData(data) {
  let obj = document.createElement("div");

  // We need either a template or an additionalClass.
  if (typeof(data.template != "undefined")) {
    obj.style.display = "grid";
    obj.style.gridTemplateColumns = data.template;
  }

  if (typeof(data.additionalClass != "undefined")) {
    obj.className = data.additionalClass;
  }

  let container = document.getElementById("container");
  container.appendChild(obj);

  let computedStyle = getComputedStyle(obj, data.pseudo);
  let computedTemplate = computedStyle.getPropertyValue("grid-template-columns");

  let message = "Got expected template with pseudo " + data.pseudo;
  if (typeof(data.additionalClass != "undefined")) {
    message += " with class " + data.additionalClass;
  }
  message += ".";

  is(computedTemplate, data.expected, message);

  container.removeChild(obj);
}

function runTest() {
  let dataToTest = [
    { template: "40px",
      pseudo: "::selection",
      expected: "none"},
    { template: "40px",
      pseudo: "::before",
      expected: "none" },
    { additionalClass: "gridBefore",
      pseudo: "::before",
      expected: "100px" },
    { additionalClass: "gridBeforeNoContent",
      pseudo: "::before",
      expected: "40px" },
  ];

  for (let i = 0; i < dataToTest.length; ++i) {
    checkTemplateWithData(dataToTest[i]);
  }

  SimpleTest.finish();
}

</script>
</head>
<body onload="runTest()">
<div id="container"></div>
<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1350780">Mozilla Bug 1350780</a>
</body>
</html>