test_computed_style_grid_with_pseudo.html (2136B)
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>