layout/style/test/test_computed_style_grid_with_pseudo.html

   1 <!DOCTYPE HTML>
   2 <html>
   3 <!--
   4 https://bugzilla.mozilla.org/show_bug.cgi?id=1350780
   5 -->
   6 <head>
   7 <title>Test for Bug 1350780</title>
   8 <script src="/tests/SimpleTest/SimpleTest.js"></script>
   9 <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
  10
  11 <style>
  12 #container {
  13   width: 100px;
  14 }
  15
  16 .gridBefore::before {
  17   content: "";
  18   display: grid;
  19   grid-template-columns: auto;
  20 }
  21
  22 .gridBeforeNoContent::before {
  23   display: grid;
  24   grid-template-columns: 40px;
  25 }
  26 </style>
  27
  28 <script type="application/javascript">
  29
  30 SimpleTest.waitForExplicitFinish();
  31
  32 function checkTemplateWithData(data) {
  33   let obj = document.createElement("div");
  34
  35   // We need either a template or an additionalClass.
  36   if (typeof(data.template != "undefined")) {
  37     obj.style.display = "grid";
  38     obj.style.gridTemplateColumns = data.template;
  39   }
  40
  41   if (typeof(data.additionalClass != "undefined")) {
  42     obj.className = data.additionalClass;
  43   }
  44
  45   let container = document.getElementById("container");
  46   container.appendChild(obj);
  47
  48   let computedStyle = getComputedStyle(obj, data.pseudo);
  49   let computedTemplate = computedStyle.getPropertyValue("grid-template-columns");
  50
  51   let message = "Got expected template with pseudo " + data.pseudo;
  52   if (typeof(data.additionalClass != "undefined")) {
  53     message += " with class " + data.additionalClass;
  54   }
  55   message += ".";
  56
  57   is(computedTemplate, data.expected, message);
  58
  59   container.removeChild(obj);
  60 }
  61
  62 function runTest() {
  63   let dataToTest = [
  64     { template: "40px",
  65       pseudo: "::selection",
  66       expected: "none"},
  67     { template: "40px",
  68       pseudo: "::before",
  69       expected: "none" },
  70     { additionalClass: "gridBefore",
  71       pseudo: "::before",
  72       expected: "100px" },
  73     { additionalClass: "gridBeforeNoContent",
  74       pseudo: "::before",
  75       expected: "40px" },
  76   ];
  77
  78   for (let i = 0; i < dataToTest.length; ++i) {
  79     checkTemplateWithData(dataToTest[i]);
  80   }
  81
  82   SimpleTest.finish();
  83 }
  84
  85 </script>
  86 </head>
  87 <body onload="runTest()">
  88 <div id="container"></div>
  89 <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1350780">Mozilla Bug 1350780</a>
  90 </body>
  91 </html>