wolframarnold · January 8, 2011 14:38 · n00ge · Jan 22, 2013 · stanmx · Aug 3, 2013
diff --git a/nokogiri-first-of-type-bug.rb b/nokogiri-first-of-type-bug.rb
 html = %Q{
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html>
 <body>
 <form action="/">
    <p>First child</p>
    <div class="doc_form">
        first doc form, should be blue
    </div>
    <div class="doc_form">
        second doc form, should be green
    </div>
 </form>
 </body>
 <!- This is for verifying that the browser's CSS parser interprets first-of-type correctly ->
 <style>
    form .doc_form:first-of-type {
        color:blue;
    }
    form .doc_form:last-of-type {
        color:green;
    }
 </style>
 </html>
 }

 require 'rubygems'
 require 'nokogiri'

 # To check browser CSS rules, load this file into a browser
 File.new("css-first-of-type-example.html", 'w') { |f| f << html }

 doc = Nokogiri::HTML.parse(html)

 # first-of-type produces an empty array, but shouldn't
 puts "CSS rule: 'form .doc_form:first-of-type' should not be empty but returns: '#{doc.css('form .doc_form:first-of-type').inspect}'"

 # nth-of-type(1) produces an empty array, but shouldn't
 puts "CSS rule: 'form .doc_form:nth-of-type(1)' should not be empty but returns: '#{doc.css('form .doc_form:nth-of-type(1)').inspect}'"

 # nth-of-type(2) produces the first entry, but should be the 2nd -- counting is off
 puts "CSS rule: 'form .doc_form:nth-of-type(2)' should have content 'second doc form...' but return: '#{doc.css('form .doc_form:nth-of-type(2)').text}'"

 # nth-of-type(3) produces the second entry, but should be the 3rd -- counting is off
 puts "CSS rule: 'form .doc_form:nth-of-type(3)' should not have content, but returns: '#{doc.css('form .doc_form:nth-of-type(3)').text}'"


 # last-of-type works correctly
 puts "CSS rule: 'form .doc_form:last-of-type' should have content 'second doc form, should be green' and returns: #{doc.css('form .doc_form:last-of-type').text}"
	html = %Q{
	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
	<html>
	<body>
	<form action="/">
	<p>First child</p>
	<div class="doc_form">
	first doc form, should be blue
	</div>
	<div class="doc_form">
	second doc form, should be green
	</div>
	</form>
	</body>
	<!- This is for verifying that the browser's CSS parser interprets first-of-type correctly ->
	<style>
	form .doc_form:first-of-type {
	color:blue;
	}
	form .doc_form:last-of-type {
	color:green;
	}
	</style>
	</html>
	}

	require 'rubygems'
	require 'nokogiri'

	# To check browser CSS rules, load this file into a browser
	File.new("css-first-of-type-example.html", 'w') { \|f\| f << html }

	doc = Nokogiri::HTML.parse(html)

	# first-of-type produces an empty array, but shouldn't
	puts "CSS rule: 'form .doc_form:first-of-type' should not be empty but returns: '#{doc.css('form .doc_form:first-of-type').inspect}'"

	# nth-of-type(1) produces an empty array, but shouldn't
	puts "CSS rule: 'form .doc_form:nth-of-type(1)' should not be empty but returns: '#{doc.css('form .doc_form:nth-of-type(1)').inspect}'"

	# nth-of-type(2) produces the first entry, but should be the 2nd -- counting is off
	puts "CSS rule: 'form .doc_form:nth-of-type(2)' should have content 'second doc form...' but return: '#{doc.css('form .doc_form:nth-of-type(2)').text}'"

	# nth-of-type(3) produces the second entry, but should be the 3rd -- counting is off
	puts "CSS rule: 'form .doc_form:nth-of-type(3)' should not have content, but returns: '#{doc.css('form .doc_form:nth-of-type(3)').text}'"


	# last-of-type works correctly
	puts "CSS rule: 'form .doc_form:last-of-type' should have content 'second doc form, should be green' and returns: #{doc.css('form .doc_form:last-of-type').text}"