chromium/src/third_party/blink/web_tests/fast/multicol/dynamic/insert-spanner-pseudo-before-following-content.html - manifest_repos/chromium_src - Git at Google

 <!DOCTYPE html>
 <script>
     onload = function() {
         document.body.offsetTop; // trigger layout
         document.getElementById('elm').className = "x";
     }
 </script>
 <style>
     .x::before { display:block; -webkit-column-span:all; background:yellow; content:".........."; }
 </style>
 <p>Test adding a ::before pseudo element. The DOM element is preceded by content.</p>
 <p>There should be three rectangles with identical sizes below. The first and third one
     should be blue with nothing inside. The second one should be yellow with some dots
     inside.</p>
 <div style="-webkit-columns:4; line-height:100px; background:blue;">
     <span>&nbsp;</span>
     <span id="elm">&nbsp;</span>
 </div>
	<!DOCTYPE html>
	<script>
	onload = function() {
	document.body.offsetTop; // trigger layout
	document.getElementById('elm').className = "x";
	}
	</script>
	<style>
	.x::before { display:block; -webkit-column-span:all; background:yellow; content:".........."; }
	</style>
	<p>Test adding a ::before pseudo element. The DOM element is preceded by content.</p>
	<p>There should be three rectangles with identical sizes below. The first and third one
	should be blue with nothing inside. The second one should be yellow with some dots
	inside.</p>
	<div style="-webkit-columns:4; line-height:100px; background:blue;">
	<span> </span>
	<span id="elm"> </span>
	</div>