use strict; use warnings; use Test::More; use CSS::Coverage; use Data::Section -setup; my $css = ${ __PACKAGE__->section_data('css') }; my $html = ${ __PACKAGE__->section_data('html') }; my $report = CSS::Coverage->new( css => \$css, documents => [\$html], )->check; is_deeply( [$report->unmatched_selectors], [ "ul#talks", "#talks .title a", "#talks .date", "#post #date", "#talk #date", "#talks li", "#talks .conference", "#about ul", "#about a", "#about li", "#projects ul", "#projects li", "#projects li a", "#projects li .name", "#projects li img.icon", "#projects li img.icon", "#projects li:hover img.icon", "#projects li .details", "#projects li:hover .details", "#post h1", "#talk h1", "#post h1", "#talk h1", "#post h2", "#talk h2", "#post h3", "#talk h3", "#post h4", "#talk h4", "#post h5", "#talk h5", "#post article", "#talk article", ".spoiler", ".spoiler:hover", "sup", "sub", "sup", "sub", ".code_snippet", "pre", ".code_snippet", ".code_snippet:hover", ".synComment", ".synConstant", ".synIdentifier", ".synStatement", ".synPreProc", ".synTodo", ".synSpecial", ".synType", "dt", "#talks .metadata", "#talk .metadata", "dd", "#slides", "#post", "#talk", "blockquote", ], ); done_testing; __DATA__ __[ css ]__ a { color: blue; text-decoration: none; } a:hover { text-decoration: underline; } nav { text-align: center; position: fixed; top: 0; left: 10px; width: 140px; } nav .sartak a { color: black; } nav h1, nav img, nav ul, nav li { margin: 0; padding: 0; } nav li { padding-bottom: 0.3em; } nav ul { list-style-type: none; } nav img { border: 0; border-radius: 17px; } #content { margin-left: 140px; width: 800px; } ul#posts, ul#talks { margin-top: 0; list-style-type: none; } #posts .title a, #talks .title a { font-size: 1.1em; line-height: 1.2em; } #posts .date, #talks .date, #post #date, #talk #date { float: right; color: #AAAAAA; } #posts .date { color: #AAAAAA; -webkit-transition: color 1s ease-out; -moz-transition: color 1s ease-out; -o-transition: color 1s ease-out; -ms-transition: color 1s ease-out; transition: color 1s ease-out; } #posts li:hover .date { color: #000000; -webkit-transition: color .25s; -moz-transition: color .25s; -o-transition: color .25s; -ms-transition: color .25s; transition: color .25s; } #posts li, #talks li { padding-bottom: 0.4em; } #talks .conference { font-size: 0.7em; } #about ul { list-style-type: none; } #about a { font-weight: bold; font-size: 1.3em; } #about li { margin-bottom: 1em; } #projects ul { list-style-type: none; } #projects li { display: inline-block; vertical-align: top; text-align: center; width: 228px; height: 228px; } #projects li a { text-decoration: none; color: black; } #projects li .name { font-weight: bold; display: block; } #projects li img.icon { height: 114px; width: 114px; border-radius: 20px; } #projects li img.icon { -webkit-filter: grayscale(80%) blur(1px); filter: grayscale(80%) blur(1px); border: 2px solid #333; -webkit-transition: all .25s ease-out; -moz-transition: all .25s ease-out; -o-transition: all .25s ease-out; -ms-transition: all .25s ease-out; transition: all .25s ease-out; } #projects li:hover img.icon { -webkit-filter: grayscale(0%) blur(0); filter: grayscale(0%) blur(0); border: 2px solid #000; } #projects li .details { opacity: 0.2; -webkit-transition: all .5s ease-out; -moz-transition: all .5s ease-out; -o-transition: all .5s ease-out; -ms-transition: all .5s ease-out; transition: all .5s ease-out; } #projects li:hover .details { opacity: 1; } #post h1, #talk h1 { margin: 0; } #post h1, #talk h1, #post h2, #talk h2, #post h3, #talk h3, #post h4, #talk h4, #post h5, #talk h5 { font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif; } #post article, #talk article { font-family: "Baskerville", "Georgia", serif; font-size: 1.2em; } .spoiler { color: black; background: black; padding: .1em; } .spoiler:hover { color: white; } sup, sub { height: 0; line-height: 1; vertical-align: baseline; position: relative; } sup { bottom: 1ex; } sub { top: .5ex; } .code_snippet, pre { font-family: "Consolas","Bitstream Vera Sans Mono","Courier New",Courier,monospace; } .code_snippet { width: 100%; color: #DDDDDD; background: black; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; padding: 1em 1em 1em 1em; overflow: hidden; } .code_snippet:hover { overflow: auto; } .synComment { color: #DDDD00 } .synConstant { color: #DD0000 } .synIdentifier { color: #00DDDD } .synStatement { color: #B8860B } .synPreProc { color: #DD00DD } /* shebang */ .synTodo { } /* # XXX: */ .synSpecial { color: #DD00DD } /* \n etc */ .synType { color: #00DD00 } /* ctermbg in vimrc */ /* .synUnderlined { color: #FFFFFF ; text-decoration: underline } .synError { color: #FFFFFF } */ dt { font-size: 1.2em; } #talks .metadata, #talk .metadata { font-size: .8em; } dd { margin-bottom: 1em; } #slides { max-width: 500px; margin-left: auto; margin-right: auto; } #post, #talk { font-size: 1.1em; } .xyzzy { color: white; } .xyzzy:hover { color: blue; } blockquote { font-style: italic; } __[ html ]__ sartak