| <!doctype html> |
| <html> |
| <head> |
| <title>Test for first-letter that is removed or added by style change</title> |
| <style> |
| .test:first-letter { color: green; font-size:64px; float:inherit; } |
| .test { clear:both; } |
| .boxed { border: solid 1px; } |
| .bef:before { content:"Before "; } |
| </style> |
| <script src="../../resources/js-test.js"></script> |
| </head> |
| <body> |
| <div id="description"></div> |
| |
| Test 1:<br/> |
| <div class="test boxed" id="test1">Block to Inline</div><br/> |
| <div class="test boxed" id="ref1" style="display:inline">Block to Inline</div><br/> |
| <hr/> |
| |
| Test 2:<br/> |
| <span class="test boxed" id="test2">Inline to Block</span> |
| <span class="test boxed" id="ref2" style="display:block">Inline to Block</span> |
| <hr/> |
| |
| Test 3:<br/> |
| <div class="test"><span id="test3" class="boxed bef">pseudo</span></div> |
| <div class="test"><span id="ref3" class="boxed">pseudo</span></div> |
| <hr/> |
| |
| Test 4:<br/> |
| <div class="test"><span id="test4" class="boxed">pseudo</span></div> |
| <div class="test"><span id="ref4" class="boxed bef">pseudo</span></div> |
| <hr/> |
| |
| Test 5:<br/> |
| <div class="test"><span id="test5" class="boxed" style="float:none">To Float</span></div> |
| <div class="test"><span id="ref5" class="boxed" style="float:left">To Float</span></div> |
| <br/> |
| <hr/> |
| |
| Test 6:<br/> |
| <div class="test"><span id="test6" class="boxed" style="float:left">To Non Float</span></div> |
| <div class="test"><span id="ref6" class="boxed" style="float:none">To Non Float</span></div> |
| <hr/> |
| |
| Test 7:<br/> |
| <div class="test"><div id="test7" class="boxed" style="float:none">To Float</div></div> |
| <div class="test"><div id="ref7" class="boxed" style="float:left">To Float</div></div> |
| <br/> |
| <hr/> |
| |
| Test 8:<br/> |
| <div class="test"><div id="test8" class="boxed" style="float:left">To Non Float</div></div> |
| <div class="test"><div id="ref8" class="boxed" style="float:none">To Non Float</div></div> |
| <hr/> |
| |
| <div id="console"></div> |
| |
| <script> |
| description("The following pairs should look the same."); |
| |
| document.body.offsetTop; // Force layout |
| |
| document.getElementById("test1").style.display = "inline"; |
| document.getElementById("test2").style.display = "block"; |
| document.getElementById("test3").className = "boxed"; |
| document.getElementById("test4").className = "boxed bef"; |
| document.getElementById("test5").style.float = "left"; |
| document.getElementById("test6").style.float = "none"; |
| document.getElementById("test7").style.float = "left"; |
| document.getElementById("test8").style.float = "none"; |
| |
| shouldBeTrue("document.getElementById('test1').offsetWidth == document.getElementById('ref1').offsetWidth"); |
| shouldBeTrue("document.getElementById('test2').offsetHeight == document.getElementById('ref2').offsetHeight"); |
| shouldBeTrue("document.getElementById('test3').offsetWidth == document.getElementById('ref3').offsetWidth"); |
| shouldBeTrue("document.getElementById('test4').offsetWidth == document.getElementById('ref4').offsetWidth"); |
| shouldBeTrue("document.getElementById('test5').offsetWidth == document.getElementById('ref5').offsetWidth"); |
| shouldBeTrue("document.getElementById('test6').offsetWidth == document.getElementById('ref6').offsetWidth"); |
| shouldBeTrue("document.getElementById('test7').offsetWidth == document.getElementById('ref7').offsetWidth"); |
| shouldBeTrue("document.getElementById('test8').offsetWidth == document.getElementById('ref8').offsetWidth"); |
| </script> |
| </body> |
| </html> |
