test_frame_reconstruction_for_pseudo_elements.html (1959B)
1 <!DOCTYPE HTML> 2 <html> 3 <!-- 4 https://bugzilla.mozilla.org/show_bug.cgi?id=1110277 5 --> 6 <head> 7 <meta charset="utf-8"> 8 <title>Test for Bug 1110277</title> 9 <script src="/tests/SimpleTest/SimpleTest.js"></script> 10 <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/> 11 <style> 12 .testspan { 13 color: yellow; 14 } 15 .testspan[attributestate], 16 .testspan[attributestate]::before, .testspan[attributestate]::after { 17 color: blue; 18 } 19 20 #firstlinetest::first-line { 21 color: purple; 22 } 23 #firstlinetest > .testspan::before { 24 content: "[*]"; 25 } 26 27 #aftertest > .testspan::after { 28 content: "[*]"; 29 } 30 </style> 31 <script type="application/javascript"> 32 33 /** Test for Bug 1110277 */ 34 35 SimpleTest.waitForExplicitFinish(); 36 37 function run() { 38 runtest("first line test", "#firstlinetest > .testspan"); 39 runtest("after test", "#aftertest > .testspan"); 40 SimpleTest.finish(); 41 } 42 43 function runtest(description, selector) { 44 var utils = SpecialPowers.getDOMWindowUtils(window); 45 var span = document.querySelector(selector); 46 var cs = getComputedStyle(span, ""); 47 48 var startcolor = cs.color; 49 var startcount = utils.framesConstructed; 50 is(startcolor, "rgb(255, 255, 0)", description + ": initial color"); 51 52 span.setAttribute("attributestate", "true"); 53 54 var endcolor = cs.color; 55 var endcount = utils.framesConstructed; 56 is(endcolor, "rgb(0, 0, 255)", description + ": final color"); 57 is(endcount, startcount, 58 description + ": should not do frame construction") 59 } 60 61 </script> 62 </head> 63 <body onload="run()"> 64 <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1110277">Mozilla Bug 1110277</a> 65 <div id="firstlinetest"> 66 <span class="testspan">This <span style="display:block">is a</span> test.</span> 67 </div> 68 <div id="aftertest"> 69 <span class="testspan">This <span style="display:block">is a</span> test.</span> 70 </div> 71 <pre id="test"> 72 </pre> 73 </body> 74 </html>