CSS-Inliner
view release on metacpan or search on metacpan
t/Parser/basic.t view on Meta::CPAN
plan(tests => 2);
use_ok('CSS::Inliner::Parser');
my $css = <<END;
.foo {
color: red;
}
.bar {
color: blue;
font-weight: bold;
}
.biz {
color: green;
font-size: 10px;
}
.foo {
color: red;
}
.bar {
color: blue;
font-weight: bold;
}
END
my $simple = CSS::Inliner::Parser->new();
$simple->read({ css => $css });
my $ordered = $simple->write();
# check to make sure that our shuffled hashes matched up...
t/Parser/hacks.t view on Meta::CPAN
use Test::More;
plan(tests => 2);
use_ok('CSS::Inliner::Parser');
my $css = <<END;
.foo {
*color: red;
}
.bar {
_font-weight: bold;
}
.biz {
-font-size: 10px;
}
.foo2 {
w\\idth: 500px;
width: 130px;
}
END
t/basic_redeclare.t view on Meta::CPAN
<html>
<head>
<style type="text/css">
.selector1 {
color: #ff0000;
}
.selector2 {
color: #1e00ff;
}
.selector1 {
font-weight: bold;
}
</style>
</head>
<body>
<div class="selector1 selector2" style="color: #1e00ff;font-weight: bold;">
Example Text
</div>
</body>
</html>
END
my $correct_result = <<'END';
<html>
<head>
</head>
<body>
<div style="color: #1e00ff; font-weight: bold;"> Example Text </div>
</body>
</html>
END
my $inliner = CSS::Inliner->new({ strip_attrs => 1 });
$inliner->read({ html => $html });
my $inlined = $inliner->inlinify();
ok($inlined eq $correct_result, 'result was correct');
t/cascade.t view on Meta::CPAN
<head>
<title>Moderate Document</title>
<style type="text/css">
h1 { font-size: 20px }
h1.alert { color: red }
h1.cool { color: blue }
.intro { color: #555555; font-size: 10px; }
div p { color: #123123; font-size: 8px }
p:hover { color: yellow }
p.poor { font-weight: lighter }
p.rich { font-weight: bold }
</style>
</head>
<body>
<h1 class="alert">Lorem ipsum dolor sit amet</h1>
<h1 class="cool">Consectetur adipiscing elit</h1>
<p class="intro">Aliquam ornare luctus egestas.</p>
<p>Nulla vulputate tellus vitae justo luctus scelerisque accumsan nunc porta.</p>
<div>
<p>Phasellus pharetra viverra sollicitudin. <strong>Vivamus ac enim ante.</strong></p>
<p>Nunc augue massa, <em>dictum id eleifend non</em> posuere nec purus.</p>
t/cascade.t view on Meta::CPAN
$inliner->read({ html => $html });
my $inlined = $inliner->inlinify();
ok($inlined =~ m/<h1 class="alert" style="font-size: 20px; color: red;">Lorem ipsum/, 'h1.alert rule inlined');
ok($inlined =~ m/<h1 class="cool" style="font-size: 20px; color: blue;">Consectetur/, 'h1.cool rule inlined');
ok($inlined =~ m/<p class="intro" style="color: #555555; font-size: 10px;">Aliquam/, '.intro rule inlined');
ok($inlined =~ m/<p style="color: #123123; font-size: 8px;">Phasellus/, 'div p rule inlined');
ok($inlined =~ m/<p style="color: #123123; font-size: 8px;">Nunc augue/, 'div p rule inlined again');
ok($inlined =~ m/<p>Nulla/, 'no rule for just "p"');
ok($inlined =~ m/<p class="poor rich" style="font-weight: bold;">Luctus/, 'rich before the poor');
ok($inlined !~ m/<style/, 'no style blocks left');
ok($inlined !~ m/yellow/, ':hover pseudo-attribute was ignored');
# a more complicated example with ids, class, attribute selectors
# in a cascading layout
$html = <<'END';
<html>
<head>
<title>Complicated Document</title>
<style type="text/css">
t/html/acidtest.html view on Meta::CPAN
div#id-one p.class-two * {
color:#00CC66;
}
p.class-two em {
font-size:24px;
}
div#id-one p.class-one > span {
font-weight:bold;
padding-left:100px;
}
div em {
text-decoration:underline;
}
div>em {
t/html/acidtest.html view on Meta::CPAN
a, a:link, a:visited {
color:#f5a100;
}
a:link, a:visited {
font-size:30px;
}
a {
font-weight:bold;
text-decoration:underline;
}
-->
</style></head>
<body>
(body)
<div id="id-one">
(div id="id-one")
t/html/acidtest_result.html view on Meta::CPAN
<body style="line-height: 20px;"> (body) <div id="id-one" style="line-height: 20px; color: #990033; font-size: 18px; width: 800px;"> (div id="id-one") <h1 style="line-height: 20px;">(h1)(/h1)</h1>
<h1 style="line-height: 20px; font-size: 60px;" title="lorum">(h1 title="lorum")(/h1)</h1>
<h1 class="example" style="line-height: 20px; font-size: 100px;">(h1 class="example")(/h1)</h1>
<h1 class="another one" style="line-height: 20px; font-style: italic; color: #FF3399;">(h1 class="another one")(/h1)</h1>
<h1 class="last-one" rel="last" style="line-height: 20px; color: #b34b22; font-size: 60px;" title="myheading">(h1 title="myheading" class="last-one" rel="last")(/h1)</h1>
<h1 class="last-one" style="line-height: 20px;">(h1 class="last-one")</h1>
<div style="line-height: 20px;"> (div) <p style="line-height: 20px;"> (p) <em style="line-height: 20px; text-decoration: overline;"> (em) <span class="sub-class" style="line-height: 20px; color: #FFFF00;">(span class="sub-class")(/span)<...
<div class="class-three" style="line-height: 20px;"> (div class="class-three") <p style="line-height: 20px;"> (p) <em style="line-height: 20px; text-decoration: overline;"> (em) <span class="sub-class" style="line-height: 20px; color: #F...
<div class="class-four" style="line-height: 20px; margin-left: 200px;"> (div class="class-four") <p style="line-height: 20px;">(p)(/p)</p><em style="line-height: 20px; text-decoration: line-through;">(em)(/em)</em> (/div) </div>
<p class="class-two" style="line-height: 20px; font-style: italic;"> (p class="class-two")(/p) </p>
<p class="class-one" style="line-height: 20px; color: #FF33CC; font-size: 11px; background-color: #FFFFCC; width: 400px; font-style: italic;"> (p class="class-one") <span style="line-height: 20px; font-style: italic; font-weight: bold; p...
<div class="class-four" style="line-height: 20px;"> (div class="class-four") <p style="line-height: 20px;">(p)(/p)</p><em style="line-height: 20px; text-decoration: line-through;">(em)(/em)</em> (/div) </div>
<p class="class-two" style="line-height: 20px; font-style: italic;"> (p class="class-two")(/p) </p> (/div) </div>
<p class="class-one" style="line-height: 20px; color: #0000CC; font-size: 11px; width: 600px;"> (p class="class-one")<span style="line-height: 20px; font-style: italic;">(span)(/span)</span> text <span style="line-height: 20px; font-style...
<p class="class-two" style="line-height: 20px; font-style: italic;"> (p class="class-two") <em style="line-height: 20px; font-size: 24px;">(em)(/em)</em> text <span style="line-height: 20px;">(span)(/span)</span><a href="#" style="line-he...
</html>
t/html/embedded_style.html view on Meta::CPAN
}
p {
text-decoration:line-through;
background: url(/images/background.png);
}
a, a:link, a:visited {
font-size:30px;
color:#f5a100;
font-weight:bold;
text-decoration:underline;
}
</style>
</head>
<body>
<table id="layout">
<tr>
<td id="header">
<div id="top">
<p>Email not displaying correctly? <a href="/view.html" title="View this email in your browser.">View it in your browser</a></p>
t/html/embedded_style_result.html view on Meta::CPAN
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-type" />
</head>
<body>
<table id="layout" style="color: #0084ff; text-align: left;">
<tr>
<td id="header" style="color: #ff0000;">
<div id="top" style="color: #259e00;">
<p style="text-decoration: line-through; background: url('https://rawgit.com/images/background.png');">Email not displaying correctly? <a href="https://rawgit.com/view.html" style="font-size: 30px; color: #f5a100; font-weight: bold; text-decora...
</div>
</td>
</tr>
</table>
</body>
</html>
t/html/embedded_style_result_encoded.html view on Meta::CPAN
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-type" />
</head>
<body>
<table id="layout" style="color: #0084ff; text-align: left;">
<tr>
<td id="header" style="color: #ff0000;">
<div id="top" style="color: #259e00;">
<p style="text-decoration: line-through; background: url('https://rawgit.com/images/background.png');">Email not displaying correctly? <a href="https://rawgit.com/view.html" style="font-size: 30px; color: #f5a100; font-weight: bold; tex...
</div>
</td>
</tr>
</table>
</body>
</html>
t/html/linktest.html view on Meta::CPAN
color:#259e00;
}
p {
text-decoration:line-through;
}
a, a:link, a:visited {
font-size:30px;
color:#f5a100;
font-weight:bold;
text-decoration:underline;
}
</style>
</head>
<body>
<table id="layout">
t/html/linktest_result.html view on Meta::CPAN
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-type" />
</head>
<body>
<table id="layout" style="color: #0084ff; text-align: left;">
<tr>
<td id="header" style="color: #ff0000;">
<div id="top" style="color: #259e00;">
<p style="text-decoration: line-through;">Email not displaying correctly? <a href="#" style="font-size: 30px; color: #f5a100; font-weight: bold; text-decoration: underline;" title="View this email in your browser.">View it in your browser</a></...
</div>
</td>
</tr>
</table>
</body>
</html>
t/html/mediaquerytest.html view on Meta::CPAN
}
.contentBorder {
border: 1px none #ffffff/* @editable */;
}
.heading_1 {
color: #333333;
font-size: 20px;
font-family: Tahoma;
font-weight: bold;
font-style: normal;
}
.heading_2 {
color: #6c8b9e;
font-size: 16px;
font-family: Tahoma;
font-weight: normal;
font-style: normal;
}
t/html/mediaquerytest_result.html view on Meta::CPAN
}
.contentBorder {
border: 1px none #ffffff/* @editable */;
}
.heading_1 {
color: #333333;
font-size: 20px;
font-family: Tahoma;
font-weight: bold;
font-style: normal;
}
.heading_2 {
color: #6c8b9e;
font-size: 16px;
font-family: Tahoma;
font-weight: normal;
font-style: normal;
}
t/html/mediaquerytest_result.html view on Meta::CPAN
</td>
</tr>
<tr>
<td class="mastheadArea" style="vertical-align: top; background-color: #ffffff; text-align: center;"><img mm:masthead="masthead" src="http://www.mailermailer.com/images/tmpl/mastheads/news_and_updates/newsletter.jpg" style="border: none; di...
</tr>
</table>
<table cellpadding="0" cellspacing="0" class="nested" style="width: 100%;">
<tr>
<td class="topArea" style="vertical-align: top; background-color: #ffffff; padding: 20px; color: #000000; font-size: 12px; font-family: Tahoma; font-weight: normal; font-style: normal; text-align: left;" valign="top"><img mm:image="image_to...
<div mm:edit="top">
<p style="margin: 0 0 0 0; padding: 0 0 0 0;"><span class="heading_1" style="color: #333333; font-size: 20px; font-family: Tahoma; font-weight: bold; font-style: normal;">Heading</span></p>
<p style="margin: 0 0 0 0; padding: 0 0 0 0;"> </p>
<p style="margin: 0 0 0 0; padding: 0 0 0 0;">Normal text.</p>
<p style="margin: 0 0 0 0; padding: 0 0 0 0;"> </p>
<p style="margin: 0 0 0 0; padding: 0 0 0 0;"><span class="heading_2" style="color: #6c8b9e; font-size: 16px; font-family: Tahoma; font-weight: normal; font-style: normal;">Sub-Heading</span></p>
<p style="margin: 0 0 0 0; padding: 0 0 0 0;"> </p>
<p style="margin: 0 0 0 0; padding: 0 0 0 0;">Normal text.</p>
</div>
</td>
</tr>
</table>
<table cellpadding="0" cellspacing="0" class="nested" style="width: 100%;">
<tr>
<td class="firstAreaWrapper" style="vertical-align: top; background-color: #ffffff; padding: 20px;" valign="top">
<table cellpadding="0" cellspacing="0" class="col-3">
<tr>
<td class="firstArea" style="vertical-align: top; color: #000000; font-size: 12px; font-family: Tahoma; font-weight: normal; font-style: normal; text-align: left;" valign="top"><img alt="" mm:image="image_first" src="http://images.mailer...
<div mm:edit="first">
<p style="margin: 0 0 0 0; padding: 0 0 0 0;"><span class="heading_1" style="color: #333333; font-size: 20px; font-family: Tahoma; font-weight: bold; font-style: normal;">Heading</span></p>
<p style="margin: 0 0 0 0; padding: 0 0 0 0;"> </p>
<p style="margin: 0 0 0 0; padding: 0 0 0 0;">Normal text.</p>
<p style="margin: 0 0 0 0; padding: 0 0 0 0;"> </p>
<p style="margin: 0 0 0 0; padding: 0 0 0 0;"><span class="heading_2" style="color: #6c8b9e; font-size: 16px; font-family: Tahoma; font-weight: normal; font-style: normal;">Sub-Heading</span></p>
<p style="margin: 0 0 0 0; padding: 0 0 0 0;"> </p>
<p style="margin: 0 0 0 0; padding: 0 0 0 0;">Normal text.</p>
</div>
</td>
</tr>
</table>
</td>
<td class="secondAreaWrapper" style="vertical-align: top; background-color: #ffffff; padding: 20px;" valign="top">
<table cellpadding="0" cellspacing="0" class="col-3">
<tr>
<td class="secondArea" style="vertical-align: top; color: #000000; font-size: 12px; font-family: Tahoma; font-weight: normal; font-style: normal; text-align: left;" valign="top"><img alt="" mm:image="image_second" src="http://images.mail...
<div mm:edit="second">
<p style="margin: 0 0 0 0; padding: 0 0 0 0;"><span class="heading_1" style="color: #333333; font-size: 20px; font-family: Tahoma; font-weight: bold; font-style: normal;">Heading</span></p>
<p style="margin: 0 0 0 0; padding: 0 0 0 0;"> </p>
<p style="margin: 0 0 0 0; padding: 0 0 0 0;">Normal text.</p>
<p style="margin: 0 0 0 0; padding: 0 0 0 0;"> </p>
<p style="margin: 0 0 0 0; padding: 0 0 0 0;"><span class="heading_2" style="color: #6c8b9e; font-size: 16px; font-family: Tahoma; font-weight: normal; font-style: normal;">Sub-Heading</span></p>
<p style="margin: 0 0 0 0; padding: 0 0 0 0;"> </p>
<p style="margin: 0 0 0 0; padding: 0 0 0 0;">Normal text.</p>
</div>
</td>
</tr>
</table>
</td>
<td class="thirdAreaWrapper" style="vertical-align: top; background-color: #ffffff; padding: 20px;" valign="top">
<table cellpadding="0" cellspacing="0" class="col-3">
<tr>
<td class="thirdArea" style="vertical-align: top; color: #000000; font-size: 12px; font-family: Tahoma; font-weight: normal; font-style: normal; text-align: left;" valign="top"><img alt="" mm:image="image_third" src="http://images.mailer...
<div mm:edit="third">
<p style="margin: 0 0 0 0; padding: 0 0 0 0;"><span class="heading_1" style="color: #333333; font-size: 20px; font-family: Tahoma; font-weight: bold; font-style: normal;">Heading</span></p>
<p style="margin: 0 0 0 0; padding: 0 0 0 0;"> </p>
<p style="margin: 0 0 0 0; padding: 0 0 0 0;">Normal text.</p>
<p style="margin: 0 0 0 0; padding: 0 0 0 0;"> </p>
<p style="margin: 0 0 0 0; padding: 0 0 0 0;"><span class="heading_2" style="color: #6c8b9e; font-size: 16px; font-family: Tahoma; font-weight: normal; font-style: normal;">Sub-Heading</span></p>
<p style="margin: 0 0 0 0; padding: 0 0 0 0;"> </p>
<p style="margin: 0 0 0 0; padding: 0 0 0 0;">Normal text.</p>
</div>
</td>
</tr>
</table>
t/ordering.t view on Meta::CPAN
use CSS::Inliner;
plan(tests => 7);
my $html = <<END;
<html>
<head>
<title>Test Document</title>
<style type="text/css">
.foo { color: red }
.bar { color: blue; font-weight: bold; }
.biz { color: green; font-size: 10px; }
</style>
<body>
<h1 class="foo bar biz">Howdy!</h1>
<h1 class="foo biz bar">Ahoy!</h1>
<h1 class="bar biz foo">Hello!</h1>
<h1 class="bar foo biz">Hola!</h1>
<h1 class="biz foo bar">Gudentag!</h1>
<h1 class="biz bar foo">Dziendobre!</h1>
</body>
t/ordering.t view on Meta::CPAN
my $shuffle1 = 0;
foreach (keys %{$css}) { $shuffle1++;}
#shuffle stored styles around more
my $shuffle2 = 0;
while ( each %{$css} ) {$shuffle2++;}
my $inlined = $inliner->inlinify();
ok($shuffle1 == $shuffle2);
ok($inlined =~ m/<h1 class="foo bar biz" style="font-weight: bold; color: green; font-size: 10px;">Howdy!<\/h1>/, 'order #1');
ok($inlined =~ m/<h1 class="foo biz bar" style="font-weight: bold; color: green; font-size: 10px;">Ahoy!<\/h1>/, 'order #2');
ok($inlined =~ m/<h1 class="bar biz foo" style="font-weight: bold; color: green; font-size: 10px;">Hello!<\/h1>/, 'order #3');
ok($inlined =~ m/<h1 class="bar foo biz" style="font-weight: bold; color: green; font-size: 10px;">Hola!<\/h1>/, 'order #4');
ok($inlined =~ m/<h1 class="biz foo bar" style="font-weight: bold; color: green; font-size: 10px;">Gudentag!<\/h1>/, 'order #5');
ok($inlined =~ m/<h1 class="biz bar foo" style="font-weight: bold; color: green; font-size: 10px;">Dziendobre!<\/h1>/, 'order #6');
( run in 1.075 second using v1.01-cache-2.11-cpan-39bf76dae61 )