html-test: Update reference output

7 files changed, 820 insertions, 240 deletions

diff --git a/html-test/ref/Bug294.html b/html-test/ref/Bug294.html
index c5f62da9..1d7e0b32 100644
--- a/html-test/ref/Bug294.html
+++ b/html-test/ref/Bug294.html
@@ -62,16 +62,14 @@ window.onload = function () {pageLoad();setSynopsis("mini_Bug294.html"
 	      ><tr
 		><td class="src clearfix"
 		  ><span class="inst-left"
-		    ><span class="keyword"
+		    ><span id="control.i:id:A:DP:1" class="instance expander" onclick="toggleSection('i:id:A:DP:1')"
+		      ></span
+		      > <span class="keyword"
 		      >data</span
 		      > <a href="#"
 		      >DP</a
 		      > <a href="#"
 		      >A</a
-		      > = <a id="v:ProblemCtor-39-" class="def"
-		      >ProblemCtor'</a
-		      > <a href="#"
-		      >A</a
 		      ></span
 		    > <a href="#" class="selflink"
 		    >#</a
@@ -80,16 +78,32 @@ window.onload = function () {pageLoad();setSynopsis(&quot;mini_Bug294.html&quot;
 		  ></td
 		  ></tr
 		><tr
+		><td colspan="2"
+		  ><div id="section.i:id:A:DP:1" class="inst-details hide"
+		    ><div class="src"
+		      ><span class="keyword"
+			>data</span
+			> <a href="#"
+			>DP</a
+			> <a href="#"
+			>A</a
+			> = <a id="v:ProblemCtor-39-" class="def"
+			>ProblemCtor'</a
+			> <a href="#"
+			>A</a
+			></div
+		      ></div
+		    ></td
+		  ></tr
+		><tr
 		><td class="src clearfix"
 		  ><span class="inst-left"
-		    ><span class="keyword"
+		    ><span id="control.i:id:A:TP:2" class="instance expander" onclick="toggleSection('i:id:A:TP:2')"
+		      ></span
+		      > <span class="keyword"
 		      >data</span
 		      > TP <a href="#"
 		      >A</a
-		      > = <a id="v:ProblemCtor" class="def"
-		      >ProblemCtor</a
-		      > <a href="#"
-		      >A</a
 		      ></span
 		    > <a href="#" class="selflink"
 		    >#</a
@@ -97,6 +111,22 @@ window.onload = function () {pageLoad();setSynopsis(&quot;mini_Bug294.html&quot;
 		  ><td class="doc empty"
 		  ></td
 		  ></tr
+		><tr
+		><td colspan="2"
+		  ><div id="section.i:id:A:TP:2" class="inst-details hide"
+		    ><div class="src"
+		      ><span class="keyword"
+			>data</span
+			> TP <a href="#"
+			>A</a
+			> = <a id="v:ProblemCtor" class="def"
+			>ProblemCtor</a
+			> <a href="#"
+			>A</a
+			></div
+		      ></div
+		    ></td
+		  ></tr
 		></table
 	      ></div
 	    ></div
@@ -156,16 +186,14 @@ window.onload = function () {pageLoad();setSynopsis(&quot;mini_Bug294.html&quot;
 	      ><tr
 		><td class="src clearfix"
 		  ><span class="inst-left"
-		    ><span class="keyword"
+		    ><span id="control.i:if:DP:DP:1" class="instance expander" onclick="toggleSection('i:if:DP:DP:1')"
+		      ></span
+		      > <span class="keyword"
 		      >data</span
 		      > <a href="#"
 		      >DP</a
 		      > <a href="#"
 		      >A</a
-		      > = <a id="v:ProblemCtor-39-" class="def"
-		      >ProblemCtor'</a
-		      > <a href="#"
-		      >A</a
 		      ></span
 		    > <a href="#" class="selflink"
 		    >#</a
@@ -173,6 +201,24 @@ window.onload = function () {pageLoad();setSynopsis(&quot;mini_Bug294.html&quot;
 		  ><td class="doc empty"
 		  ></td
 		  ></tr
+		><tr
+		><td colspan="2"
+		  ><div id="section.i:if:DP:DP:1" class="inst-details hide"
+		    ><div class="src"
+		      ><span class="keyword"
+			>data</span
+			> <a href="#"
+			>DP</a
+			> <a href="#"
+			>A</a
+			> = <a id="v:ProblemCtor-39-" class="def"
+			>ProblemCtor'</a
+			> <a href="#"
+			>A</a
+			></div
+		      ></div
+		    ></td
+		  ></tr
 		></table
 	      ></div
 	    ></div
diff --git a/html-test/ref/Bug310.html b/html-test/ref/Bug310.html
index 894e136f..8c5b45b8 100644
--- a/html-test/ref/Bug310.html
+++ b/html-test/ref/Bug310.html
@@ -49,10 +49,16 @@ window.onload = function () {pageLoad();setSynopsis(&quot;mini_Bug310.html&quot;
 	><li class="src short"
 	  ><span class="keyword"
 	    >type family</span
-	    > a <a href="#"
+	    > (a :: <a href="#"
+	    >Nat</a
+	    >) <a href="#"
 	    >+</a
-	    > b :: <a href="#"
+	    > (b :: <a href="#"
+	    >Nat</a
+	    >) :: <a href="#"
 	    >Nat</a
+	    > <span class="keyword"
+	    >where ...</span
 	    ></li
 	  ></ul
 	></div
@@ -63,10 +69,16 @@ window.onload = function () {pageLoad();setSynopsis(&quot;mini_Bug310.html&quot;
 	><p class="src"
 	  ><span class="keyword"
 	    >type family</span
-	    > a <a id="t:-43-" class="def"
+	    > (a :: <a href="#"
+	    >Nat</a
+	    >) <a id="t:-43-" class="def"
 	    >+</a
-	    > b :: <a href="#"
+	    > (b :: <a href="#"
+	    >Nat</a
+	    >) :: <a href="#"
 	    >Nat</a
+	    > <span class="keyword"
+	    >where ...</span
 	    > <span class="fixity"
 	    >infixl 6</span
 	    ><span class="rightedge"
diff --git a/html-test/ref/Instances.html b/html-test/ref/Instances.html
index e3a2cb78..697bfa1b 100644
--- a/html-test/ref/Instances.html
+++ b/html-test/ref/Instances.html
@@ -1712,7 +1712,9 @@ window.onload = function () {pageLoad();setSynopsis(&quot;mini_Instances.html&qu
 		><tr
 		><td class="src clearfix"
 		  ><span class="inst-left"
-		    ><span class="keyword"
+		    ><span id="control.i:id:Quux:Thud:4" class="instance expander" onclick="toggleSection('i:id:Quux:Thud:4')"
+		      ></span
+		      > <span class="keyword"
 		      >data</span
 		      > <a href="#"
 		      >Thud</a
@@ -1720,27 +1722,43 @@ window.onload = function () {pageLoad();setSynopsis(&quot;mini_Instances.html&qu
 		      >Int</a
 		      > (<a href="#"
 		      >Quux</a
-		      > a [a] c) <ul class="inst"
-		      ><li class="inst"
-			>= <a id="v:Thuud" class="def"
-			  >Thuud</a
-			  > a</li
-			><li class="inst"
-			>| <a id="v:Thuuud" class="def"
-			  >Thuuud</a
-			  > <a href="#"
-			  >Int</a
-			  > <a href="#"
-			  >Int</a
-			  ></li
-			></ul
-		      ></span
+		      > a [a] c)</span
 		    > <a href="#" class="selflink"
 		    >#</a
 		    ></td
 		  ><td class="doc empty"
 		  ></td
 		  ></tr
+		><tr
+		><td colspan="2"
+		  ><div id="section.i:id:Quux:Thud:4" class="inst-details hide"
+		    ><div class="src"
+		      ><span class="keyword"
+			>data</span
+			> <a href="#"
+			>Thud</a
+			> <a href="#"
+			>Int</a
+			> (<a href="#"
+			>Quux</a
+			> a [a] c) <ul class="inst"
+			><li class="inst"
+			  >= <a id="v:Thuud" class="def"
+			    >Thuud</a
+			    > a</li
+			  ><li class="inst"
+			  >| <a id="v:Thuuud" class="def"
+			    >Thuuud</a
+			    > <a href="#"
+			    >Int</a
+			    > <a href="#"
+			    >Int</a
+			    ></li
+			  ></ul
+			></div
+		      ></div
+		    ></td
+		  ></tr
 		></table
 	      ></div
 	    ></div
diff --git a/html-test/ref/PatternSyns.html b/html-test/ref/PatternSyns.html
index ffebdf27..70e9230b 100644
--- a/html-test/ref/PatternSyns.html
+++ b/html-test/ref/PatternSyns.html
@@ -91,13 +91,13 @@ window.onload = function () {pageLoad();setSynopsis(&quot;mini_PatternSyns.html&
 	    >(:&lt;-&gt;)</a
 	    > :: <span class="keyword"
 	    >forall</span
-	    > t t. t -&gt; t -&gt; (<a href="#"
+	    > t t1. t -&gt; t1 -&gt; (<a href="#"
 	    >FooType</a
 	    > t, <a href="#"
 	    >FooType</a
 	    > (<a href="#"
 	    >FooType</a
-	    > t))</li
+	    > t1))</li
 	  ><li class="src short"
 	  ><span class="keyword"
 	    >data</span
@@ -113,9 +113,9 @@ window.onload = function () {pageLoad();setSynopsis(&quot;mini_PatternSyns.html&
 	    >E</a
 	    > :: <span class="keyword"
 	    >forall</span
-	    > k t t. <a href="#"
+	    > k t t1. <a href="#"
 	    >(&gt;&lt;)</a
-	    > k t t</li
+	    > k t t1</li
 	  ></ul
 	></div
       ><div id="interface"
@@ -203,13 +203,13 @@ window.onload = function () {pageLoad();setSynopsis(&quot;mini_PatternSyns.html&
 	    >(:&lt;-&gt;)</a
 	    > :: <span class="keyword"
 	    >forall</span
-	    > t t. t -&gt; t -&gt; (<a href="#"
+	    > t t1. t -&gt; t1 -&gt; (<a href="#"
 	    >FooType</a
 	    > t, <a href="#"
 	    >FooType</a
 	    > (<a href="#"
 	    >FooType</a
-	    > t)) <a href="#" class="selflink"
+	    > t1)) <a href="#" class="selflink"
 	    >#</a
 	    ></p
 	  ><div class="doc"
@@ -261,9 +261,9 @@ window.onload = function () {pageLoad();setSynopsis(&quot;mini_PatternSyns.html&
 	    >E</a
 	    > :: <span class="keyword"
 	    >forall</span
-	    > k t t. <a href="#"
+	    > k t t1. <a href="#"
 	    >(&gt;&lt;)</a
-	    > k t t <a href="#" class="selflink"
+	    > k t t1 <a href="#" class="selflink"
 	    >#</a
 	    ></p
 	  ><div class="doc"
diff --git a/html-test/ref/Test.html b/html-test/ref/Test.html
index 4cb434ad..e493af28 100644
--- a/html-test/ref/Test.html
+++ b/html-test/ref/Test.html
@@ -1825,16 +1825,24 @@ using double quotes: <a href="#"
 	>Auxiliary stuff</h1
 	><div class="doc"
 	><p
-	  >This is some documentation that is attached to a name ($aux1)</p
+	  >This is some documentation that is attached to a name ($aux1)
+ rather than a source declaration.  The documentation may be
+ referred to in the export list using its name.</p
+	  ><pre
+	  > code block in named doc</pre
 	  ></div
 	><div class="doc"
 	><p
 	  >This is some documentation that is attached to a name ($aux2)</p
 	  ></div
-	><div class="doc empty"
-	></div
-	><div class="doc empty"
-	></div
+	><div class="doc"
+	><pre
+	  > code block on its own in named doc</pre
+	  ></div
+	><div class="doc"
+	><pre
+	  > code block on its own in named doc (after newline)</pre
+	  ></div
 	><div class="doc"
 	><p
 	  >a nested, named doc comment</p
@@ -1892,8 +1900,12 @@ test4</pre
 test2
 </pre
 	  ></div
-	><div class="doc empty"
-	></div
+	><div class="doc"
+	><pre
+	  >foo</pre
+	  ><pre
+	  >bar</pre
+	  ></div
 	><div class="doc"
 	><p
 	  >This is some inline documentation in the export list</p
diff --git a/html-test/ref/TypeFamilies.html b/html-test/ref/TypeFamilies.html
index f96ad89e..6062db4f 100644
--- a/html-test/ref/TypeFamilies.html
+++ b/html-test/ref/TypeFamilies.html
@@ -113,7 +113,7 @@ window.onload = function () {pageLoad();setSynopsis(&quot;mini_TypeFamilies.html
 	    >data family</span
 	    > <a href="#"
 	    >Bat</a
-	    > a :: <a href="#"
+	    > (a :: k) :: <a href="#"
 	    >*</a
 	    ></li
 	  ><li class="src short"
@@ -147,13 +147,15 @@ window.onload = function () {pageLoad();setSynopsis(&quot;mini_TypeFamilies.html
 	    >type family</span
 	    > <a href="#"
 	    >Bar</a
-	    > b</li
+	    > b <span class="keyword"
+	    >where ...</span
+	    ></li
 	  ><li class="src short"
 	  ><span class="keyword"
 	    >type family</span
-	    > a <a href="#"
+	    > (a :: k) <a href="#"
 	    >&lt;&gt;</a
-	    > b :: k</li
+	    > (b :: k) :: k</li
 	  ><li class="src short"
 	  ><span class="keyword"
 	    >class</span
@@ -332,14 +334,14 @@ window.onload = function () {pageLoad();setSynopsis(&quot;mini_TypeFamilies.html
 		><tr
 		><td class="src clearfix"
 		  ><span class="inst-left"
-		    ><span class="keyword"
+		    ><span id="control.i:id:X:Foo:4" class="instance expander" onclick="toggleSection('i:id:X:Foo:4')"
+		      ></span
+		      > <span class="keyword"
 		      >type</span
 		      > <a href="#"
 		      >Foo</a
 		      > <a href="#"
 		      >X</a
-		      > = <a href="#"
-		      >Y</a
 		      ></span
 		    > <a href="#" class="selflink"
 		    >#</a
@@ -348,9 +350,27 @@ window.onload = function () {pageLoad();setSynopsis(&quot;mini_TypeFamilies.html
 		  ></td
 		  ></tr
 		><tr
+		><td colspan="2"
+		  ><div id="section.i:id:X:Foo:4" class="inst-details hide"
+		    ><div class="src"
+		      ><span class="keyword"
+			>type</span
+			> <a href="#"
+			>Foo</a
+			> <a href="#"
+			>X</a
+			> = <a href="#"
+			>Y</a
+			></div
+		      ></div
+		    ></td
+		  ></tr
+		><tr
 		><td class="src clearfix"
 		  ><span class="inst-left"
-		    ><span class="keyword"
+		    ><span id="control.i:id:X:-60--62-:5" class="instance expander" onclick="toggleSection('i:id:X:-60--62-:5')"
+		      ></span
+		      > <span class="keyword"
 		      >type</span
 		      > <a href="#"
 		      >(&lt;&gt;)</a
@@ -360,8 +380,6 @@ window.onload = function () {pageLoad();setSynopsis(&quot;mini_TypeFamilies.html
 		      >XXX</a
 		      > <a href="#"
 		      >XX</a
-		      > = <a href="#"
-		      >X</a
 		      ></span
 		    > <a href="#" class="selflink"
 		    >#</a
@@ -370,9 +388,31 @@ window.onload = function () {pageLoad();setSynopsis(&quot;mini_TypeFamilies.html
 		  ></td
 		  ></tr
 		><tr
+		><td colspan="2"
+		  ><div id="section.i:id:X:-60--62-:5" class="inst-details hide"
+		    ><div class="src"
+		      ><span class="keyword"
+			>type</span
+			> <a href="#"
+			>(&lt;&gt;)</a
+			> <a href="#"
+			>X</a
+			> <a href="#"
+			>XXX</a
+			> <a href="#"
+			>XX</a
+			> = <a href="#"
+			>X</a
+			></div
+		      ></div
+		    ></td
+		  ></tr
+		><tr
 		><td class="src clearfix"
 		  ><span class="inst-left"
-		    ><span class="keyword"
+		    ><span id="control.i:id:X:AssocD:6" class="instance expander" onclick="toggleSection('i:id:X:AssocD:6')"
+		      ></span
+		      > <span class="keyword"
 		      >data</span
 		      > <a href="#"
 		      >AssocD</a
@@ -380,8 +420,6 @@ window.onload = function () {pageLoad();setSynopsis(&quot;mini_TypeFamilies.html
 		      >*</a
 		      > <a href="#"
 		      >X</a
-		      > = <a id="v:AssocX" class="def"
-		      >AssocX</a
 		      ></span
 		    > <a href="#" class="selflink"
 		    >#</a
@@ -390,9 +428,29 @@ window.onload = function () {pageLoad();setSynopsis(&quot;mini_TypeFamilies.html
 		  ></td
 		  ></tr
 		><tr
+		><td colspan="2"
+		  ><div id="section.i:id:X:AssocD:6" class="inst-details hide"
+		    ><div class="src"
+		      ><span class="keyword"
+			>data</span
+			> <a href="#"
+			>AssocD</a
+			> <a href="#"
+			>*</a
+			> <a href="#"
+			>X</a
+			> = <a id="v:AssocX" class="def"
+			>AssocX</a
+			></div
+		      ></div
+		    ></td
+		  ></tr
+		><tr
 		><td class="src clearfix"
 		  ><span class="inst-left"
-		    ><span class="keyword"
+		    ><span id="control.i:id:X:AssocT:7" class="instance expander" onclick="toggleSection('i:id:X:AssocT:7')"
+		      ></span
+		      > <span class="keyword"
 		      >type</span
 		      > <a href="#"
 		      >AssocT</a
@@ -400,12 +458,6 @@ window.onload = function () {pageLoad();setSynopsis(&quot;mini_TypeFamilies.html
 		      >*</a
 		      > <a href="#"
 		      >X</a
-		      > = <a href="#"
-		      >Foo</a
-		      > <a href="#"
-		      >*</a
-		      > <a href="#"
-		      >X</a
 		      ></span
 		    > <a href="#" class="selflink"
 		    >#</a
@@ -414,9 +466,33 @@ window.onload = function () {pageLoad();setSynopsis(&quot;mini_TypeFamilies.html
 		  ></td
 		  ></tr
 		><tr
+		><td colspan="2"
+		  ><div id="section.i:id:X:AssocT:7" class="inst-details hide"
+		    ><div class="src"
+		      ><span class="keyword"
+			>type</span
+			> <a href="#"
+			>AssocT</a
+			> <a href="#"
+			>*</a
+			> <a href="#"
+			>X</a
+			> = <a href="#"
+			>Foo</a
+			> <a href="#"
+			>*</a
+			> <a href="#"
+			>X</a
+			></div
+		      ></div
+		    ></td
+		  ></tr
+		><tr
 		><td class="src clearfix"
 		  ><span class="inst-left"
-		    ><span class="keyword"
+		    ><span id="control.i:id:X:Bat:8" class="instance expander" onclick="toggleSection('i:id:X:Bat:8')"
+		      ></span
+		      > <span class="keyword"
 		      >data</span
 		      > <a href="#"
 		      >Bat</a
@@ -424,32 +500,6 @@ window.onload = function () {pageLoad();setSynopsis(&quot;mini_TypeFamilies.html
 		      >*</a
 		      > <a href="#"
 		      >X</a
-		      > <ul class="inst"
-		      ><li class="inst"
-			>= <a id="v:BatX" class="def"
-			  >BatX</a
-			  > <a href="#"
-			  >X</a
-			  ></li
-			><li class="inst"
-			>| <a id="v:BatXX" class="def"
-			  >BatXX</a
-			  > { <ul class="subs"
-			  ><li
-			    ><a id="v:aaa" class="def"
-			      >aaa</a
-			      > :: <a href="#"
-			      >X</a
-			      ></li
-			    ><li
-			    ><a id="v:bbb" class="def"
-			      >bbb</a
-			      > :: <a href="#"
-			      >Y</a
-			      ></li
-			    ></ul
-			  > }</li
-			></ul
 		      ></span
 		    > <a href="#" class="selflink"
 		    >#</a
@@ -460,9 +510,53 @@ window.onload = function () {pageLoad();setSynopsis(&quot;mini_TypeFamilies.html
 		    ></td
 		  ></tr
 		><tr
+		><td colspan="2"
+		  ><div id="section.i:id:X:Bat:8" class="inst-details hide"
+		    ><div class="src"
+		      ><span class="keyword"
+			>data</span
+			> <a href="#"
+			>Bat</a
+			> <a href="#"
+			>*</a
+			> <a href="#"
+			>X</a
+			> <ul class="inst"
+			><li class="inst"
+			  >= <a id="v:BatX" class="def"
+			    >BatX</a
+			    > <a href="#"
+			    >X</a
+			    ></li
+			  ><li class="inst"
+			  >| <a id="v:BatXX" class="def"
+			    >BatXX</a
+			    > { <ul class="subs"
+			    ><li
+			      ><a id="v:aaa" class="def"
+				>aaa</a
+				> :: <a href="#"
+				>X</a
+				></li
+			      ><li
+			      ><a id="v:bbb" class="def"
+				>bbb</a
+				> :: <a href="#"
+				>Y</a
+				></li
+			      ></ul
+			    > }</li
+			  ></ul
+			></div
+		      ></div
+		    ></td
+		  ></tr
+		><tr
 		><td class="src clearfix"
 		  ><span class="inst-left"
-		    ><span class="keyword"
+		    ><span id="control.i:id:X:Foo:9" class="instance expander" onclick="toggleSection('i:id:X:Foo:9')"
+		      ></span
+		      > <span class="keyword"
 		      >type</span
 		      > <a href="#"
 		      >Foo</a
@@ -470,8 +564,6 @@ window.onload = function () {pageLoad();setSynopsis(&quot;mini_TypeFamilies.html
 		      >*</a
 		      > <a href="#"
 		      >X</a
-		      > = <a href="#"
-		      >Y</a
 		      ></span
 		    > <a href="#" class="selflink"
 		    >#</a
@@ -480,9 +572,29 @@ window.onload = function () {pageLoad();setSynopsis(&quot;mini_TypeFamilies.html
 		  ></td
 		  ></tr
 		><tr
+		><td colspan="2"
+		  ><div id="section.i:id:X:Foo:9" class="inst-details hide"
+		    ><div class="src"
+		      ><span class="keyword"
+			>type</span
+			> <a href="#"
+			>Foo</a
+			> <a href="#"
+			>*</a
+			> <a href="#"
+			>X</a
+			> = <a href="#"
+			>Y</a
+			></div
+		      ></div
+		    ></td
+		  ></tr
+		><tr
 		><td class="src clearfix"
 		  ><span class="inst-left"
-		    ><span class="keyword"
+		    ><span id="control.i:id:X:-60--62-:10" class="instance expander" onclick="toggleSection('i:id:X:-60--62-:10')"
+		      ></span
+		      > <span class="keyword"
 		      >type</span
 		      > <a href="#"
 		      >(&lt;&gt;)</a
@@ -490,15 +602,31 @@ window.onload = function () {pageLoad();setSynopsis(&quot;mini_TypeFamilies.html
 		      >*</a
 		      > <a href="#"
 		      >X</a
-		      > a = <a href="#"
-		      >X</a
-		      ></span
+		      > a</span
 		    > <a href="#" class="selflink"
 		    >#</a
 		    ></td
 		  ><td class="doc empty"
 		  ></td
 		  ></tr
+		><tr
+		><td colspan="2"
+		  ><div id="section.i:id:X:-60--62-:10" class="inst-details hide"
+		    ><div class="src"
+		      ><span class="keyword"
+			>type</span
+			> <a href="#"
+			>(&lt;&gt;)</a
+			> <a href="#"
+			>*</a
+			> <a href="#"
+			>X</a
+			> a = <a href="#"
+			>X</a
+			></div
+		      ></div
+		    ></td
+		  ></tr
 		></table
 	      ></div
 	    ></div
@@ -608,7 +736,9 @@ window.onload = function () {pageLoad();setSynopsis(&quot;mini_TypeFamilies.html
 		><tr
 		><td class="src clearfix"
 		  ><span class="inst-left"
-		    ><span class="keyword"
+		    ><span id="control.i:id:Y:Bar:3" class="instance expander" onclick="toggleSection('i:id:Y:Bar:3')"
+		      ></span
+		      > <span class="keyword"
 		      >data</span
 		      > <a href="#"
 		      >Bar</a
@@ -622,9 +752,25 @@ window.onload = function () {pageLoad();setSynopsis(&quot;mini_TypeFamilies.html
 		  ></td
 		  ></tr
 		><tr
+		><td colspan="2"
+		  ><div id="section.i:id:Y:Bar:3" class="inst-details hide"
+		    ><div class="src"
+		      ><span class="keyword"
+			>data</span
+			> <a href="#"
+			>Bar</a
+			> <a href="#"
+			>Y</a
+			></div
+		      ></div
+		    ></td
+		  ></tr
+		><tr
 		><td class="src clearfix"
 		  ><span class="inst-left"
-		    ><span class="keyword"
+		    ><span id="control.i:id:Y:AssocD:4" class="instance expander" onclick="toggleSection('i:id:Y:AssocD:4')"
+		      ></span
+		      > <span class="keyword"
 		      >data</span
 		      > <a href="#"
 		      >AssocD</a
@@ -632,8 +778,6 @@ window.onload = function () {pageLoad();setSynopsis(&quot;mini_TypeFamilies.html
 		      >*</a
 		      > <a href="#"
 		      >Y</a
-		      > = <a id="v:AssocY" class="def"
-		      >AssocY</a
 		      ></span
 		    > <a href="#" class="selflink"
 		    >#</a
@@ -642,9 +786,29 @@ window.onload = function () {pageLoad();setSynopsis(&quot;mini_TypeFamilies.html
 		  ></td
 		  ></tr
 		><tr
+		><td colspan="2"
+		  ><div id="section.i:id:Y:AssocD:4" class="inst-details hide"
+		    ><div class="src"
+		      ><span class="keyword"
+			>data</span
+			> <a href="#"
+			>AssocD</a
+			> <a href="#"
+			>*</a
+			> <a href="#"
+			>Y</a
+			> = <a id="v:AssocY" class="def"
+			>AssocY</a
+			></div
+		      ></div
+		    ></td
+		  ></tr
+		><tr
 		><td class="src clearfix"
 		  ><span class="inst-left"
-		    ><span class="keyword"
+		    ><span id="control.i:id:Y:AssocT:5" class="instance expander" onclick="toggleSection('i:id:Y:AssocT:5')"
+		      ></span
+		      > <span class="keyword"
 		      >type</span
 		      > <a href="#"
 		      >AssocT</a
@@ -652,12 +816,6 @@ window.onload = function () {pageLoad();setSynopsis(&quot;mini_TypeFamilies.html
 		      >*</a
 		      > <a href="#"
 		      >Y</a
-		      > = <a href="#"
-		      >Bat</a
-		      > <a href="#"
-		      >*</a
-		      > <a href="#"
-		      >Y</a
 		      ></span
 		    > <a href="#" class="selflink"
 		    >#</a
@@ -666,9 +824,33 @@ window.onload = function () {pageLoad();setSynopsis(&quot;mini_TypeFamilies.html
 		  ></td
 		  ></tr
 		><tr
+		><td colspan="2"
+		  ><div id="section.i:id:Y:AssocT:5" class="inst-details hide"
+		    ><div class="src"
+		      ><span class="keyword"
+			>type</span
+			> <a href="#"
+			>AssocT</a
+			> <a href="#"
+			>*</a
+			> <a href="#"
+			>Y</a
+			> = <a href="#"
+			>Bat</a
+			> <a href="#"
+			>*</a
+			> <a href="#"
+			>Y</a
+			></div
+		      ></div
+		    ></td
+		  ></tr
+		><tr
 		><td class="src clearfix"
 		  ><span class="inst-left"
-		    ><span class="keyword"
+		    ><span id="control.i:id:Y:Bat:6" class="instance expander" onclick="toggleSection('i:id:Y:Bat:6')"
+		      ></span
+		      > <span class="keyword"
 		      >data</span
 		      > <a href="#"
 		      >Bat</a
@@ -676,10 +858,6 @@ window.onload = function () {pageLoad();setSynopsis(&quot;mini_TypeFamilies.html
 		      >*</a
 		      > <a href="#"
 		      >Y</a
-		      > = <a id="v:BatY" class="def"
-		      >BatY</a
-		      > <a href="#"
-		      >Y</a
 		      ></span
 		    > <a href="#" class="selflink"
 		    >#</a
@@ -690,9 +868,31 @@ window.onload = function () {pageLoad();setSynopsis(&quot;mini_TypeFamilies.html
 		    ></td
 		  ></tr
 		><tr
+		><td colspan="2"
+		  ><div id="section.i:id:Y:Bat:6" class="inst-details hide"
+		    ><div class="src"
+		      ><span class="keyword"
+			>data</span
+			> <a href="#"
+			>Bat</a
+			> <a href="#"
+			>*</a
+			> <a href="#"
+			>Y</a
+			> = <a id="v:BatY" class="def"
+			>BatY</a
+			> <a href="#"
+			>Y</a
+			></div
+		      ></div
+		    ></td
+		  ></tr
+		><tr
 		><td class="src clearfix"
 		  ><span class="inst-left"
-		    ><span class="keyword"
+		    ><span id="control.i:id:Y:Foo:7" class="instance expander" onclick="toggleSection('i:id:Y:Foo:7')"
+		      ></span
+		      > <span class="keyword"
 		      >type</span
 		      > <a href="#"
 		      >Foo</a
@@ -700,8 +900,6 @@ window.onload = function () {pageLoad();setSynopsis(&quot;mini_TypeFamilies.html
 		      >*</a
 		      > <a href="#"
 		      >Y</a
-		      > = <a href="#"
-		      >X</a
 		      ></span
 		    > <a href="#" class="selflink"
 		    >#</a
@@ -710,9 +908,29 @@ window.onload = function () {pageLoad();setSynopsis(&quot;mini_TypeFamilies.html
 		  ></td
 		  ></tr
 		><tr
+		><td colspan="2"
+		  ><div id="section.i:id:Y:Foo:7" class="inst-details hide"
+		    ><div class="src"
+		      ><span class="keyword"
+			>type</span
+			> <a href="#"
+			>Foo</a
+			> <a href="#"
+			>*</a
+			> <a href="#"
+			>Y</a
+			> = <a href="#"
+			>X</a
+			></div
+		      ></div
+		    ></td
+		  ></tr
+		><tr
 		><td class="src clearfix"
 		  ><span class="inst-left"
-		    ><span class="keyword"
+		    ><span id="control.i:id:Y:-60--62-:8" class="instance expander" onclick="toggleSection('i:id:Y:-60--62-:8')"
+		      ></span
+		      > <span class="keyword"
 		      >type</span
 		      > <a href="#"
 		      >(&lt;&gt;)</a
@@ -720,13 +938,29 @@ window.onload = function () {pageLoad();setSynopsis(&quot;mini_TypeFamilies.html
 		      >*</a
 		      > <a href="#"
 		      >Y</a
-		      > a = a</span
+		      > a</span
 		    > <a href="#" class="selflink"
 		    >#</a
 		    ></td
 		  ><td class="doc empty"
 		  ></td
 		  ></tr
+		><tr
+		><td colspan="2"
+		  ><div id="section.i:id:Y:-60--62-:8" class="inst-details hide"
+		    ><div class="src"
+		      ><span class="keyword"
+			>type</span
+			> <a href="#"
+			>(&lt;&gt;)</a
+			> <a href="#"
+			>*</a
+			> <a href="#"
+			>Y</a
+			> a = a</div
+		      ></div
+		    ></td
+		  ></tr
 		></table
 	      ></div
 	    ></div
@@ -774,36 +1008,14 @@ window.onload = function () {pageLoad();setSynopsis(&quot;mini_TypeFamilies.html
 	      ><tr
 		><td class="src clearfix"
 		  ><span class="inst-left"
-		    ><span class="keyword"
+		    ><span id="control.i:id:Z:Bat:1" class="instance expander" onclick="toggleSection('i:id:Z:Bat:1')"
+		      ></span
+		      > <span class="keyword"
 		      >data</span
 		      > <a href="#"
 		      >Bat</a
 		      > <a href="#"
 		      >Z</a
-		      > <span class="keyword"
-		      >where</span
-		      ><ul class="inst"
-		      ><li class="inst"
-			><a id="v:BatZ1" class="def"
-			  >BatZ1</a
-			  > :: <a href="#"
-			  >Bat</a
-			  > <a href="#"
-			  >Z</a
-			  > <a href="#"
-			  >ZA</a
-			  ></li
-			><li class="inst"
-			><a id="v:BatZ2" class="def"
-			  >BatZ2</a
-			  > :: <a href="#"
-			  >Bat</a
-			  > <a href="#"
-			  >Z</a
-			  > <a href="#"
-			  >ZB</a
-			  ></li
-			></ul
 		      ></span
 		    > <a href="#" class="selflink"
 		    >#</a
@@ -813,6 +1025,44 @@ window.onload = function () {pageLoad();setSynopsis(&quot;mini_TypeFamilies.html
 		    >Doc for: data instance Bat Z</p
 		    ></td
 		  ></tr
+		><tr
+		><td colspan="2"
+		  ><div id="section.i:id:Z:Bat:1" class="inst-details hide"
+		    ><div class="src"
+		      ><span class="keyword"
+			>data</span
+			> <a href="#"
+			>Bat</a
+			> <a href="#"
+			>Z</a
+			> <span class="keyword"
+			>where</span
+			><ul class="inst"
+			><li class="inst"
+			  ><a id="v:BatZ1" class="def"
+			    >BatZ1</a
+			    > :: <a href="#"
+			    >Bat</a
+			    > <a href="#"
+			    >Z</a
+			    > <a href="#"
+			    >ZA</a
+			    ></li
+			  ><li class="inst"
+			  ><a id="v:BatZ2" class="def"
+			    >BatZ2</a
+			    > :: <a href="#"
+			    >Bat</a
+			    > <a href="#"
+			    >Z</a
+			    > <a href="#"
+			    >ZB</a
+			    ></li
+			  ></ul
+			></div
+		      ></div
+		    ></td
+		  ></tr
 		></table
 	      ></div
 	    ></div
@@ -912,7 +1162,9 @@ window.onload = function () {pageLoad();setSynopsis(&quot;mini_TypeFamilies.html
 	      ><tr
 		><td class="src clearfix"
 		  ><span class="inst-left"
-		    ><span class="keyword"
+		    ><span id="control.i:if:Foo:Foo:1" class="instance expander" onclick="toggleSection('i:if:Foo:Foo:1')"
+		      ></span
+		      > <span class="keyword"
 		      >type</span
 		      > <a href="#"
 		      >Foo</a
@@ -920,8 +1172,6 @@ window.onload = function () {pageLoad();setSynopsis(&quot;mini_TypeFamilies.html
 		      >*</a
 		      > <a href="#"
 		      >Y</a
-		      > = <a href="#"
-		      >X</a
 		      ></span
 		    > <a href="#" class="selflink"
 		    >#</a
@@ -930,9 +1180,29 @@ window.onload = function () {pageLoad();setSynopsis(&quot;mini_TypeFamilies.html
 		  ></td
 		  ></tr
 		><tr
+		><td colspan="2"
+		  ><div id="section.i:if:Foo:Foo:1" class="inst-details hide"
+		    ><div class="src"
+		      ><span class="keyword"
+			>type</span
+			> <a href="#"
+			>Foo</a
+			> <a href="#"
+			>*</a
+			> <a href="#"
+			>Y</a
+			> = <a href="#"
+			>X</a
+			></div
+		      ></div
+		    ></td
+		  ></tr
+		><tr
 		><td class="src clearfix"
 		  ><span class="inst-left"
-		    ><span class="keyword"
+		    ><span id="control.i:if:Foo:Foo:2" class="instance expander" onclick="toggleSection('i:if:Foo:Foo:2')"
+		      ></span
+		      > <span class="keyword"
 		      >type</span
 		      > <a href="#"
 		      >Foo</a
@@ -940,8 +1210,6 @@ window.onload = function () {pageLoad();setSynopsis(&quot;mini_TypeFamilies.html
 		      >*</a
 		      > <a href="#"
 		      >X</a
-		      > = <a href="#"
-		      >Y</a
 		      ></span
 		    > <a href="#" class="selflink"
 		    >#</a
@@ -949,6 +1217,24 @@ window.onload = function () {pageLoad();setSynopsis(&quot;mini_TypeFamilies.html
 		  ><td class="doc empty"
 		  ></td
 		  ></tr
+		><tr
+		><td colspan="2"
+		  ><div id="section.i:if:Foo:Foo:2" class="inst-details hide"
+		    ><div class="src"
+		      ><span class="keyword"
+			>type</span
+			> <a href="#"
+			>Foo</a
+			> <a href="#"
+			>*</a
+			> <a href="#"
+			>X</a
+			> = <a href="#"
+			>Y</a
+			></div
+		      ></div
+		    ></td
+		  ></tr
 		></table
 	      ></div
 	    ></div
@@ -959,7 +1245,7 @@ window.onload = function () {pageLoad();setSynopsis(&quot;mini_TypeFamilies.html
 	    >data family</span
 	    > <a id="t:Bat" class="def"
 	    >Bat</a
-	    > a :: <a href="#"
+	    > (a :: k) :: <a href="#"
 	    >*</a
 	    > <a href="#" class="selflink"
 	    >#</a
@@ -976,36 +1262,14 @@ window.onload = function () {pageLoad();setSynopsis(&quot;mini_TypeFamilies.html
 	      ><tr
 		><td class="src clearfix"
 		  ><span class="inst-left"
-		    ><span class="keyword"
+		    ><span id="control.i:if:Bat:Bat:1" class="instance expander" onclick="toggleSection('i:if:Bat:Bat:1')"
+		      ></span
+		      > <span class="keyword"
 		      >data</span
 		      > <a href="#"
 		      >Bat</a
 		      > <a href="#"
 		      >Z</a
-		      > <span class="keyword"
-		      >where</span
-		      ><ul class="inst"
-		      ><li class="inst"
-			><a id="v:BatZ1" class="def"
-			  >BatZ1</a
-			  > :: <a href="#"
-			  >Bat</a
-			  > <a href="#"
-			  >Z</a
-			  > <a href="#"
-			  >ZA</a
-			  ></li
-			><li class="inst"
-			><a id="v:BatZ2" class="def"
-			  >BatZ2</a
-			  > :: <a href="#"
-			  >Bat</a
-			  > <a href="#"
-			  >Z</a
-			  > <a href="#"
-			  >ZB</a
-			  ></li
-			></ul
 		      ></span
 		    > <a href="#" class="selflink"
 		    >#</a
@@ -1016,9 +1280,49 @@ window.onload = function () {pageLoad();setSynopsis(&quot;mini_TypeFamilies.html
 		    ></td
 		  ></tr
 		><tr
+		><td colspan="2"
+		  ><div id="section.i:if:Bat:Bat:1" class="inst-details hide"
+		    ><div class="src"
+		      ><span class="keyword"
+			>data</span
+			> <a href="#"
+			>Bat</a
+			> <a href="#"
+			>Z</a
+			> <span class="keyword"
+			>where</span
+			><ul class="inst"
+			><li class="inst"
+			  ><a id="v:BatZ1" class="def"
+			    >BatZ1</a
+			    > :: <a href="#"
+			    >Bat</a
+			    > <a href="#"
+			    >Z</a
+			    > <a href="#"
+			    >ZA</a
+			    ></li
+			  ><li class="inst"
+			  ><a id="v:BatZ2" class="def"
+			    >BatZ2</a
+			    > :: <a href="#"
+			    >Bat</a
+			    > <a href="#"
+			    >Z</a
+			    > <a href="#"
+			    >ZB</a
+			    ></li
+			  ></ul
+			></div
+		      ></div
+		    ></td
+		  ></tr
+		><tr
 		><td class="src clearfix"
 		  ><span class="inst-left"
-		    ><span class="keyword"
+		    ><span id="control.i:if:Bat:Bat:2" class="instance expander" onclick="toggleSection('i:if:Bat:Bat:2')"
+		      ></span
+		      > <span class="keyword"
 		      >data</span
 		      > <a href="#"
 		      >Bat</a
@@ -1026,10 +1330,6 @@ window.onload = function () {pageLoad();setSynopsis(&quot;mini_TypeFamilies.html
 		      >*</a
 		      > <a href="#"
 		      >Y</a
-		      > = <a id="v:BatY" class="def"
-		      >BatY</a
-		      > <a href="#"
-		      >Y</a
 		      ></span
 		    > <a href="#" class="selflink"
 		    >#</a
@@ -1040,9 +1340,31 @@ window.onload = function () {pageLoad();setSynopsis(&quot;mini_TypeFamilies.html
 		    ></td
 		  ></tr
 		><tr
+		><td colspan="2"
+		  ><div id="section.i:if:Bat:Bat:2" class="inst-details hide"
+		    ><div class="src"
+		      ><span class="keyword"
+			>data</span
+			> <a href="#"
+			>Bat</a
+			> <a href="#"
+			>*</a
+			> <a href="#"
+			>Y</a
+			> = <a id="v:BatY" class="def"
+			>BatY</a
+			> <a href="#"
+			>Y</a
+			></div
+		      ></div
+		    ></td
+		  ></tr
+		><tr
 		><td class="src clearfix"
 		  ><span class="inst-left"
-		    ><span class="keyword"
+		    ><span id="control.i:if:Bat:Bat:3" class="instance expander" onclick="toggleSection('i:if:Bat:Bat:3')"
+		      ></span
+		      > <span class="keyword"
 		      >data</span
 		      > <a href="#"
 		      >Bat</a
@@ -1050,32 +1372,6 @@ window.onload = function () {pageLoad();setSynopsis(&quot;mini_TypeFamilies.html
 		      >*</a
 		      > <a href="#"
 		      >X</a
-		      > <ul class="inst"
-		      ><li class="inst"
-			>= <a id="v:BatX" class="def"
-			  >BatX</a
-			  > <a href="#"
-			  >X</a
-			  ></li
-			><li class="inst"
-			>| <a id="v:BatXX" class="def"
-			  >BatXX</a
-			  > { <ul class="subs"
-			  ><li
-			    ><a id="v:aaa" class="def"
-			      >aaa</a
-			      > :: <a href="#"
-			      >X</a
-			      ></li
-			    ><li
-			    ><a id="v:bbb" class="def"
-			      >bbb</a
-			      > :: <a href="#"
-			      >Y</a
-			      ></li
-			    ></ul
-			  > }</li
-			></ul
 		      ></span
 		    > <a href="#" class="selflink"
 		    >#</a
@@ -1085,6 +1381,48 @@ window.onload = function () {pageLoad();setSynopsis(&quot;mini_TypeFamilies.html
 		    >Doc for: data instance Bat X</p
 		    ></td
 		  ></tr
+		><tr
+		><td colspan="2"
+		  ><div id="section.i:if:Bat:Bat:3" class="inst-details hide"
+		    ><div class="src"
+		      ><span class="keyword"
+			>data</span
+			> <a href="#"
+			>Bat</a
+			> <a href="#"
+			>*</a
+			> <a href="#"
+			>X</a
+			> <ul class="inst"
+			><li class="inst"
+			  >= <a id="v:BatX" class="def"
+			    >BatX</a
+			    > <a href="#"
+			    >X</a
+			    ></li
+			  ><li class="inst"
+			  >| <a id="v:BatXX" class="def"
+			    >BatXX</a
+			    > { <ul class="subs"
+			    ><li
+			      ><a id="v:aaa" class="def"
+				>aaa</a
+				> :: <a href="#"
+				>X</a
+				></li
+			      ><li
+			      ><a id="v:bbb" class="def"
+				>bbb</a
+				> :: <a href="#"
+				>Y</a
+				></li
+			      ></ul
+			    > }</li
+			  ></ul
+			></div
+		      ></div
+		    ></td
+		  ></tr
 		></table
 	      ></div
 	    ></div
@@ -1265,7 +1603,9 @@ window.onload = function () {pageLoad();setSynopsis(&quot;mini_TypeFamilies.html
 	    >type family</span
 	    > <a id="t:Bar" class="def"
 	    >Bar</a
-	    > b <a href="#" class="selflink"
+	    > b <span class="keyword"
+	    >where ...</span
+	    > <a href="#" class="selflink"
 	    >#</a
 	    ></p
 	  ><div class="doc"
@@ -1305,9 +1645,9 @@ window.onload = function () {pageLoad();setSynopsis(&quot;mini_TypeFamilies.html
 	><p class="src"
 	  ><span class="keyword"
 	    >type family</span
-	    > a <a id="t:-60--62-" class="def"
+	    > (a :: k) <a id="t:-60--62-" class="def"
 	    >&lt;&gt;</a
-	    > b :: k <a href="#" class="selflink"
+	    > (b :: k) :: k <a href="#" class="selflink"
 	    >#</a
 	    ></p
 	  ><div class="subs instances"
@@ -1318,7 +1658,9 @@ window.onload = function () {pageLoad();setSynopsis(&quot;mini_TypeFamilies.html
 	      ><tr
 		><td class="src clearfix"
 		  ><span class="inst-left"
-		    ><span class="keyword"
+		    ><span id="control.i:if:-60--62-:-60--62-:1" class="instance expander" onclick="toggleSection('i:if:-60--62-:-60--62-:1')"
+		      ></span
+		      > <span class="keyword"
 		      >type</span
 		      > <a href="#"
 		      >(&lt;&gt;)</a
@@ -1328,8 +1670,6 @@ window.onload = function () {pageLoad();setSynopsis(&quot;mini_TypeFamilies.html
 		      >XXX</a
 		      > <a href="#"
 		      >XX</a
-		      > = <a href="#"
-		      >X</a
 		      ></span
 		    > <a href="#" class="selflink"
 		    >#</a
@@ -1338,9 +1678,31 @@ window.onload = function () {pageLoad();setSynopsis(&quot;mini_TypeFamilies.html
 		  ></td
 		  ></tr
 		><tr
+		><td colspan="2"
+		  ><div id="section.i:if:-60--62-:-60--62-:1" class="inst-details hide"
+		    ><div class="src"
+		      ><span class="keyword"
+			>type</span
+			> <a href="#"
+			>(&lt;&gt;)</a
+			> <a href="#"
+			>X</a
+			> <a href="#"
+			>XXX</a
+			> <a href="#"
+			>XX</a
+			> = <a href="#"
+			>X</a
+			></div
+		      ></div
+		    ></td
+		  ></tr
+		><tr
 		><td class="src clearfix"
 		  ><span class="inst-left"
-		    ><span class="keyword"
+		    ><span id="control.i:if:-60--62-:-60--62-:2" class="instance expander" onclick="toggleSection('i:if:-60--62-:-60--62-:2')"
+		      ></span
+		      > <span class="keyword"
 		      >type</span
 		      > <a href="#"
 		      >(&lt;&gt;)</a
@@ -1348,7 +1710,7 @@ window.onload = function () {pageLoad();setSynopsis(&quot;mini_TypeFamilies.html
 		      >*</a
 		      > <a href="#"
 		      >Y</a
-		      > a = a</span
+		      > a</span
 		    > <a href="#" class="selflink"
 		    >#</a
 		    ></td
@@ -1356,9 +1718,27 @@ window.onload = function () {pageLoad();setSynopsis(&quot;mini_TypeFamilies.html
 		  ></td
 		  ></tr
 		><tr
+		><td colspan="2"
+		  ><div id="section.i:if:-60--62-:-60--62-:2" class="inst-details hide"
+		    ><div class="src"
+		      ><span class="keyword"
+			>type</span
+			> <a href="#"
+			>(&lt;&gt;)</a
+			> <a href="#"
+			>*</a
+			> <a href="#"
+			>Y</a
+			> a = a</div
+		      ></div
+		    ></td
+		  ></tr
+		><tr
 		><td class="src clearfix"
 		  ><span class="inst-left"
-		    ><span class="keyword"
+		    ><span id="control.i:if:-60--62-:-60--62-:3" class="instance expander" onclick="toggleSection('i:if:-60--62-:-60--62-:3')"
+		      ></span
+		      > <span class="keyword"
 		      >type</span
 		      > <a href="#"
 		      >(&lt;&gt;)</a
@@ -1366,15 +1746,31 @@ window.onload = function () {pageLoad();setSynopsis(&quot;mini_TypeFamilies.html
 		      >*</a
 		      > <a href="#"
 		      >X</a
-		      > a = <a href="#"
-		      >X</a
-		      ></span
+		      > a</span
 		    > <a href="#" class="selflink"
 		    >#</a
 		    ></td
 		  ><td class="doc empty"
 		  ></td
 		  ></tr
+		><tr
+		><td colspan="2"
+		  ><div id="section.i:if:-60--62-:-60--62-:3" class="inst-details hide"
+		    ><div class="src"
+		      ><span class="keyword"
+			>type</span
+			> <a href="#"
+			>(&lt;&gt;)</a
+			> <a href="#"
+			>*</a
+			> <a href="#"
+			>X</a
+			> a = <a href="#"
+			>X</a
+			></div
+		      ></div
+		    ></td
+		  ></tr
 		></table
 	      ></div
 	    ></div
diff --git a/html-test/ref/TypeFamilies2.html b/html-test/ref/TypeFamilies2.html
index 0da8e6c9..f7909bff 100644
--- a/html-test/ref/TypeFamilies2.html
+++ b/html-test/ref/TypeFamilies2.html
@@ -90,15 +90,15 @@ window.onload = function () {pageLoad();setSynopsis(&quot;mini_TypeFamilies2.htm
 	      ><tr
 		><td class="src clearfix"
 		  ><span class="inst-left"
-		    ><span class="keyword"
+		    ><span id="control.i:id:W:Bar:1" class="instance expander" onclick="toggleSection('i:id:W:Bar:1')"
+		      ></span
+		      > <span class="keyword"
 		      >data</span
 		      > <a href="#"
 		      >Bar</a
 		      > <a href="#"
 		      >W</a
-		      > = <a id="v:BarX" class="def"
-		      >BarX</a
-		      > Z</span
+		      ></span
 		    > <a href="#" class="selflink"
 		    >#</a
 		    ></td
@@ -108,9 +108,27 @@ window.onload = function () {pageLoad();setSynopsis(&quot;mini_TypeFamilies2.htm
 		    ></td
 		  ></tr
 		><tr
+		><td colspan="2"
+		  ><div id="section.i:id:W:Bar:1" class="inst-details hide"
+		    ><div class="src"
+		      ><span class="keyword"
+			>data</span
+			> <a href="#"
+			>Bar</a
+			> <a href="#"
+			>W</a
+			> = <a id="v:BarX" class="def"
+			>BarX</a
+			> Z</div
+		      ></div
+		    ></td
+		  ></tr
+		><tr
 		><td class="src clearfix"
 		  ><span class="inst-left"
-		    ><span class="keyword"
+		    ><span id="control.i:id:W:Foo:2" class="instance expander" onclick="toggleSection('i:id:W:Foo:2')"
+		      ></span
+		      > <span class="keyword"
 		      >type</span
 		      > <a href="#"
 		      >Foo</a
@@ -123,6 +141,20 @@ window.onload = function () {pageLoad();setSynopsis(&quot;mini_TypeFamilies2.htm
 		  ><td class="doc empty"
 		  ></td
 		  ></tr
+		><tr
+		><td colspan="2"
+		  ><div id="section.i:id:W:Foo:2" class="inst-details hide"
+		    ><div class="src"
+		      ><span class="keyword"
+			>type</span
+			> <a href="#"
+			>Foo</a
+			> <a href="#"
+			>W</a
+			></div
+		      ></div
+		    ></td
+		  ></tr
 		></table
 	      ></div
 	    ></div
@@ -148,7 +180,9 @@ window.onload = function () {pageLoad();setSynopsis(&quot;mini_TypeFamilies2.htm
 	      ><tr
 		><td class="src clearfix"
 		  ><span class="inst-left"
-		    ><span class="keyword"
+		    ><span id="control.i:if:Foo:Foo:1" class="instance expander" onclick="toggleSection('i:if:Foo:Foo:1')"
+		      ></span
+		      > <span class="keyword"
 		      >type</span
 		      > <a href="#"
 		      >Foo</a
@@ -162,16 +196,30 @@ window.onload = function () {pageLoad();setSynopsis(&quot;mini_TypeFamilies2.htm
 		  ></td
 		  ></tr
 		><tr
+		><td colspan="2"
+		  ><div id="section.i:if:Foo:Foo:1" class="inst-details hide"
+		    ><div class="src"
+		      ><span class="keyword"
+			>type</span
+			> <a href="#"
+			>Foo</a
+			> <a href="#"
+			>W</a
+			></div
+		      ></div
+		    ></td
+		  ></tr
+		><tr
 		><td class="src clearfix"
 		  ><span class="inst-left"
-		    ><span class="keyword"
+		    ><span id="control.i:if:Foo:Foo:2" class="instance expander" onclick="toggleSection('i:if:Foo:Foo:2')"
+		      ></span
+		      > <span class="keyword"
 		      >type</span
 		      > <a href="#"
 		      >Foo</a
 		      > <a href="#"
 		      >X</a
-		      > = <a href="#"
-		      >Y</a
 		      ></span
 		    > <a href="#" class="selflink"
 		    >#</a
@@ -179,6 +227,22 @@ window.onload = function () {pageLoad();setSynopsis(&quot;mini_TypeFamilies2.htm
 		  ><td class="doc empty"
 		  ></td
 		  ></tr
+		><tr
+		><td colspan="2"
+		  ><div id="section.i:if:Foo:Foo:2" class="inst-details hide"
+		    ><div class="src"
+		      ><span class="keyword"
+			>type</span
+			> <a href="#"
+			>Foo</a
+			> <a href="#"
+			>X</a
+			> = <a href="#"
+			>Y</a
+			></div
+		      ></div
+		    ></td
+		  ></tr
 		></table
 	      ></div
 	    ></div
@@ -204,15 +268,15 @@ window.onload = function () {pageLoad();setSynopsis(&quot;mini_TypeFamilies2.htm
 	      ><tr
 		><td class="src clearfix"
 		  ><span class="inst-left"
-		    ><span class="keyword"
+		    ><span id="control.i:if:Bar:Bar:1" class="instance expander" onclick="toggleSection('i:if:Bar:Bar:1')"
+		      ></span
+		      > <span class="keyword"
 		      >data</span
 		      > <a href="#"
 		      >Bar</a
 		      > <a href="#"
 		      >W</a
-		      > = <a id="v:BarX" class="def"
-		      >BarX</a
-		      > Z</span
+		      ></span
 		    > <a href="#" class="selflink"
 		    >#</a
 		    ></td
@@ -222,9 +286,27 @@ window.onload = function () {pageLoad();setSynopsis(&quot;mini_TypeFamilies2.htm
 		    ></td
 		  ></tr
 		><tr
+		><td colspan="2"
+		  ><div id="section.i:if:Bar:Bar:1" class="inst-details hide"
+		    ><div class="src"
+		      ><span class="keyword"
+			>data</span
+			> <a href="#"
+			>Bar</a
+			> <a href="#"
+			>W</a
+			> = <a id="v:BarX" class="def"
+			>BarX</a
+			> Z</div
+		      ></div
+		    ></td
+		  ></tr
+		><tr
 		><td class="src clearfix"
 		  ><span class="inst-left"
-		    ><span class="keyword"
+		    ><span id="control.i:if:Bar:Bar:2" class="instance expander" onclick="toggleSection('i:if:Bar:Bar:2')"
+		      ></span
+		      > <span class="keyword"
 		      >data</span
 		      > <a href="#"
 		      >Bar</a
@@ -237,6 +319,20 @@ window.onload = function () {pageLoad();setSynopsis(&quot;mini_TypeFamilies2.htm
 		  ><td class="doc empty"
 		  ></td
 		  ></tr
+		><tr
+		><td colspan="2"
+		  ><div id="section.i:if:Bar:Bar:2" class="inst-details hide"
+		    ><div class="src"
+		      ><span class="keyword"
+			>data</span
+			> <a href="#"
+			>Bar</a
+			> <a href="#"
+			>Y</a
+			></div
+		      ></div
+		    ></td
+		  ></tr
 		></table
 	      ></div
 	    ></div