Skip to content

Add a real, spec-compliant CSS3/4 engine (ported from ExCSS via PeachPDF) #244

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
jhaygood86 wants to merge 21 commits into
base: master
Choose a base branch
from
Open

Add a real, spec-compliant CSS3/4 engine (ported from ExCSS via PeachPDF) #244

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
21 commits
Select commit Hold shift + click to select a range
c4ed378
Port of CSS engine from PeachPDF (ExCSS-based)
jhaygood86 Jul 16, 2026
50cb46d
Fix CalcSerializer
jhaygood86 Jul 16, 2026
e690f19
Replace custom CSS with standards
jhaygood86 Jul 17, 2026
dfde8ca
Fixes <br>
jhaygood86 Jul 17, 2026
410907c
CSS engine: sync enumerations, tokens and leaf value types
jhaygood86 Jul 25, 2026
ea3951e
CSS engine: sync CSS Color 4/5 color science
jhaygood86 Jul 25, 2026
abfc38c
CSS engine: sync @property and the calc() time/resolution leaves
jhaygood86 Jul 25, 2026
75b9c0e
CSS engine: sync CSS logical box-model properties
jhaygood86 Jul 25, 2026
f12341d
CSS engine: sync clip-path, aspect-ratio and box-shadow
jhaygood86 Jul 25, 2026
30691aa
CSS engine: sync value converter infrastructure and grid grammars
jhaygood86 Jul 25, 2026
f927e9f
CSS engine: sync CSS Grid properties and factory registrations
jhaygood86 Jul 25, 2026
71e7f09
CSS engine: sync @layer and the user-preference media features
jhaygood86 Jul 25, 2026
c8166e1
CSS engine: sync font-palette, @font-palette-values and palette-mix()
jhaygood86 Jul 25, 2026
27a1638
CSS engine: sync CSS Nesting, :where() and the parser conformance fixes
jhaygood86 Jul 25, 2026
2ae26df
CSS engine: sync trimming/AOT hardening and remaining property updates
jhaygood86 Jul 25, 2026
a2cdc82
Remove upstream-project references from source comments
jhaygood86 Jul 25, 2026
f0fb0a4
CssData: index nested and layered rules; resolve colours through the …
jhaygood86 Jul 25, 2026
fe17adb
Evaluate @media against the platform, via two new adapter properties
jhaygood86 Jul 25, 2026
91647b3
Re-evaluate @media when the viewport changes
jhaygood86 Jul 25, 2026
eed9037
Remove the -peachpdf-pdf-tag-type property
jhaygood86 Jul 25, 2026
3ab58a7
Re-evaluate @media when the system colour scheme changes
jhaygood86 Jul 25, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
The table of contents is too big for display.
Diff view
Diff view
  •  
  •  
  •  
4 changes: 2 additions & 2 deletions Source/Demo/Common/DemoUtils.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -74,8 +74,8 @@ public static string GetStylesheet(string src)
a:link { text-decoration: none; }
a:hover { text-decoration: underline; }
.gray { color:gray; }
.example { background-color:#efefef; corner-radius:5px; padding:0.5em; }
.whitehole { background-color:white; corner-radius:10px; padding:15px; }
.example { background-color:#efefef; border-radius:5px; padding:0.5em; }
.whitehole { background-color:white; border-radius:10px; padding:15px; }
.caption { font-size: 1.1em }
.comment { color: green; margin-bottom: 5px; margin-left: 3px; }
.comment2 { color: green; }";
Expand Down
1 change: 1 addition & 0 deletions Source/Demo/Common/HtmlRenderer.Demo.Common.csproj
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,6 +66,7 @@
<EmbeddedResource Include="TestSamples\20.Fonts decorations.htm" />
<EmbeddedResource Include="TestSamples\21.Bullets.htm" />
<EmbeddedResource Include="TestSamples\22.RTL.htm" />
<EmbeddedResource Include="TestSamples\23.Media queries and color scheme.htm" />
<EmbeddedResource Include="TestSamples\30.Misc.htm" />
<EmbeddedResource Include="TestSamples\31.ACID 1.htm" />
<EmbeddedResource Include="TestSamples\32.Image in css content.htm" />
Expand Down
2 changes: 1 addition & 1 deletion Source/Demo/Common/Samples/00.Intro.htm
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
<title>Intro</title>
<link rel="Stylesheet" href="StyleSheet">
</head>
<body style="background-color: #333; background-gradient: #707; background-gradient-angle: 60; margin: 0;">
<body style="background-image: linear-gradient(60deg, #333, #707); margin: 0;">
<h1 align="center" style="color: white">
HTML Renderer Project - $$Platform$$
<br />
Expand Down
81 changes: 36 additions & 45 deletions Source/Demo/Common/Samples/07.Additional features.htm
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,20 +6,18 @@
<style>
<!--
.g1, .g2, .g3, .g4, .g5 {
background-color: red;
background-gradient: yellow;
padding: 22px;
}

.g1 { background-gradient-angle: 0; }
.g1 { background-image: linear-gradient(0deg, red, yellow); }

.g2 { background-gradient-angle: 45; }
.g2 { background-image: linear-gradient(45deg, red, yellow); }

.g3 { background-gradient-angle: 90; }
.g3 { background-image: linear-gradient(90deg, red, yellow); }

.g4 { background-gradient-angle: 135; }
.g4 { background-image: linear-gradient(135deg, red, yellow); }

.g5 { background-gradient-angle: 180; }
.g5 { background-image: linear-gradient(180deg, red, yellow); }

.c1, .c2, .c3, .c4, .c5 {
background-color: olive;
Expand All @@ -28,16 +26,16 @@
vertical-align: middle;
}

.c1 { corner-radius: 0px; }
.c1 { border-radius: 0px; }

.c2 { corner-radius: 10px; }
.c2 { border-radius: 10px; }

.c3 { corner-radius: 0px 10px 10px 0px; }
.c3 { border-radius: 0px 10px 10px 0px; }

.c4 { corner-radius: 18px; }
.c4 { border-radius: 18px; }

.c5 {
corner-radius: 10px;
border-radius: 10px;
border: outset #BBBB00 2px;
}

Expand All @@ -60,24 +58,17 @@ <h1>
<h2>
Graphic features</h2>
<p>
I have always wanted the W3C to add this features to the CSS spec (and so far, not
there yet :)</p>
Standard CSS backgrounds and border radii, same as any modern browser.</p>
<ul>
<li><b>Gradients on backgrounds</b></li>
<li><b>Rounded corners</b></li>
</ul>
<p>
And I think many many web designers would agree. Is it so hard or what?.</p>
<h3>
Background Gradients</h3>
<p>
It is a simple two color linear gradient, achieved by the adding of two CSS properties:</p>
<ol>
<li><code>background-gradient: (#Color)</code> - Second color of the gradient background,
the first one is given by <code>background-color</code>. Not inherited.</li>
<li><code>background-gradient-angle: (number)</code> - Angle (in degrees, clockwise) of
the gradient. Not inherited. Initial value:90</li>
</ol>
A <code>background-image</code> can be a <code>linear-gradient()</code> (or
<code>repeating-linear-gradient()</code>) function: an angle or <code>to &lt;side&gt;</code>
direction, followed by two or more comma-separated color stops.</p>
<b>Some examples</b>
<!-- Gradients table -->
<table width="300px">
Expand All @@ -95,19 +86,19 @@ <h3>
</tr>
<tr>
<td>
0 degrees
0deg
</td>
<td>
45 degrees
45deg
</td>
<td>
90 degrees
90deg
</td>
<td>
135 degrees
135deg
</td>
<td>
180 degrees
180deg
</td>
</tr>
</table>
Expand All @@ -120,18 +111,18 @@ <h3>
website you visit nowadays makes use of rounded corners, where a not very nice trick
with images and tables must be used.</p>
<p>
In this renderer, the rounded corners are achieved by adding this CSS properties:</p>
In this renderer, the rounded corners are achieved with the standard CSS properties:</p>
<ul>
<li><code>corner-ne-radius: (length)</code> Indicates the radius of the north-east corner.
Not ineritted</li>
<li><code>corner-se-radius: (length)</code> Indicates the radius of the south-east corner.
Not ineritted</li>
<li><code>corner-sw-radius: (length)</code> Indicates the radius of the south-west corner.
Not ineritted</li>
<li><code>corner-nw-radius: (length)</code> Indicates the radius of the north-west corner.
Not ineritted</li>
<li><code>corner-radius: (length){1,4}</code> Shorthand for the other corner properties.
Not ineritted</li>
<li><code>border-top-left-radius: (length){1,2}</code> Indicates the radius of the top-left
corner. Not inherited</li>
<li><code>border-top-right-radius: (length){1,2}</code> Indicates the radius of the top-right
corner. Not inherited</li>
<li><code>border-bottom-right-radius: (length){1,2}</code> Indicates the radius of the bottom-right
corner. Not inherited</li>
<li><code>border-bottom-left-radius: (length){1,2}</code> Indicates the radius of the bottom-left
corner. Not inherited</li>
<li><code>border-radius: (length){1,4} [ / (length){1,4} ]?</code> Shorthand for the other
corner properties, with an optional "/" for elliptical corners. Not inherited</li>
</ul>
<!-- Corners table -->
<b>Some examples</b>
Expand Down Expand Up @@ -161,11 +152,11 @@ <h3>
</tr>
</table>
<pre>.c1, .c2, .c3, .c4, .c5 { background-color:olive; border:0px; color:white; vertical-align:middle; }
.c1 { corner-radius: 0px }
.c2 { corner-radius: 10px }
.c3 { corner-radius: 0px 10px 10px 0px }
.c4 { corner-radius: 18px }
.c5 { corner-radius: 10px; border: outset #bb0 2px; }</pre>
.c1 { border-radius: 0px }
.c2 { border-radius: 10px }
.c3 { border-radius: 0px 10px 10px 0px }
.c4 { border-radius: 18px }
.c5 { border-radius: 10px; border: outset #bb0 2px; }</pre>
</blockquote>
</body>
</html>
</html>
5 changes: 2 additions & 3 deletions Source/Demo/Common/Samples/08.Tooltip.htm
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,9 +22,8 @@ <h2>Default tooltip style</h2>
<pre>
.htmltooltip {
border:solid 1px #767676;
background-color:white;
background-gradient:#E4E5F0;
padding: 8px;
background-color:#E4E5F0;
padding: 8px;
Font: 9pt Tahoma;
}</pre>
<h2>Examples</h2>
Expand Down
156 changes: 78 additions & 78 deletions Source/Demo/Common/TestSamples/12.Text.htm
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,79 +1,79 @@
<!DOCTYPE html>
<html>
<head>
<title>Text</title>
<link rel="Stylesheet" href="StyleSheet">
<style>
.right {
text-align: right;
border-width: 1px;
border-style: solid;
border-color: blue;
}
</style>
</head>
<body>
<h2>Case 1</h2>
<p>
<font size="5" color="red">Warning:</font>P tags must be closed. In fact all tags with the
end tag <a href="http://www.w3.org/TR//REC-html401-19991224/index/elements.html">marked as optional</a>, must be closed. It may be fixed by next release.
</p>
<hr />
<h2>Text align justify with background colors</h2>
<p style="text-align: justify">
Lorem ipsum dolor sit amet, <span style="background-color: gold;">consectetur</span> adipisicing
elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua tempor incididunt ut labore et dolore magna aliqua incididunt ut labore et dolore magna aliqua.
</p>
<hr />
<h2>Right align adjusts</h2>
<table style="border-spacing: 0px;">
<tr>
<td class="right">978</td>
</tr>
<tr>
<td class="right">32</td>
</tr>
</table>
<hr />
<h2>Transparent text</h2>
<p style="color: rgba(255, 0, 0, 100)">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ornare mollis elit. Integer sagittis. Fusce elementum commodo felis. Vivamus lacinia eleifend libero. Donec
lacus. Nam sit amet urna. Nullam nulla. Donec accumsan porta magna. Mauris a dolor eu elit rutrum commodo. Nam iaculis turpis non augue. Nullam lobortis egestas risus. Nulla
elementum dolor ac mauris. Ut tristique. In varius volutpat metus. Integer leo dolor, tristique a, dignissim ac, iaculis eget, elit. Donec arcu.
</p>
<p style="background-color: rgba(255, 215, 0, 50)">
<span style="color: rgba(0, 255, 0, 140)">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ornare mollis elit. Integer sagittis. Fusce elementum commodo felis. Vivamus lacinia eleifend libero. Donec
lacus.
</span>
<br />
<span style="color: rgba(0, 0, 255, 100)">
Nam sit amet urna. Nullam nulla. Donec accumsan porta magna. Mauris a dolor eu elit rutrum commodo. Nam iaculis turpis non augue. Nullam lobortis egestas risus. Nulla
elementum dolor ac mauris. Ut tristique. In varius volutpat metus. Integer leo dolor, tristique a, dignissim ac, iaculis eget, elit. Donec arcu.
</span>
</p>
<p style="background-color: #a33; background-gradient: rgb(255, 215, 0); background-gradient-angle: 0">
<span style="color: rgba(0, 255, 0, 140)">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ornare mollis elit. Integer_sagittis_Fusce_elementum_commodo_felis_Vivamus_lacinia_eleifend_libero_Donec
lacus.
</span>
<br />
<span style="color: rgba(0, 0, 255, 100)">
Nam sit amet urna. Nullam nulla. Donec accumsan porta magna. Mauris a dolor eu elit rutrum commodo. Nam iaculis turpis non augue. Nullam lobortis egestas risus. Nulla
elementum dolor ac mauris. Ut tristique. In varius volutpat metus. Integer leo dolor, tristique a, dignissim ac, iaculis eget, elit. Donec arcu.
</span>
</p>
<hr />
<h2>RTL text</h2>
<p style="text-align: right; direction: Rtl;">
<span>בדיקה של טקסט ימין לשמאל</span>
</p>
<p>
<span dir="rTL" lang="HE">בדיקה של טקסט ימין לשמאל</span> normal text
</p>
<p>
<span>בדיקה של טקסט ימין לשמאל</span> normal text
</p>
</body>
<!DOCTYPE html>
<html>
<head>
<title>Text</title>
<link rel="Stylesheet" href="StyleSheet">
<style>
.right {
text-align: right;
border-width: 1px;
border-style: solid;
border-color: blue;
}
</style>
</head>
<body>
<h2>Case 1</h2>
<p>
<font size="5" color="red">Warning:</font>P tags must be closed. In fact all tags with the
end tag <a href="http://www.w3.org/TR//REC-html401-19991224/index/elements.html">marked as optional</a>, must be closed. It may be fixed by next release.
</p>
<hr />
<h2>Text align justify with background colors</h2>
<p style="text-align: justify">
Lorem ipsum dolor sit amet, <span style="background-color: gold;">consectetur</span> adipisicing
elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua tempor incididunt ut labore et dolore magna aliqua incididunt ut labore et dolore magna aliqua.
</p>
<hr />
<h2>Right align adjusts</h2>
<table style="border-spacing: 0px;">
<tr>
<td class="right">978</td>
</tr>
<tr>
<td class="right">32</td>
</tr>
</table>
<hr />
<h2>Transparent text</h2>
<p style="color: rgba(255, 0, 0, 100)">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ornare mollis elit. Integer sagittis. Fusce elementum commodo felis. Vivamus lacinia eleifend libero. Donec
lacus. Nam sit amet urna. Nullam nulla. Donec accumsan porta magna. Mauris a dolor eu elit rutrum commodo. Nam iaculis turpis non augue. Nullam lobortis egestas risus. Nulla
elementum dolor ac mauris. Ut tristique. In varius volutpat metus. Integer leo dolor, tristique a, dignissim ac, iaculis eget, elit. Donec arcu.
</p>

<p style="background-color: rgba(255, 215, 0, 50)">
<span style="color: rgba(0, 255, 0, 140)">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ornare mollis elit. Integer sagittis. Fusce elementum commodo felis. Vivamus lacinia eleifend libero. Donec
lacus.
</span>
<br />
<span style="color: rgba(0, 0, 255, 100)">
Nam sit amet urna. Nullam nulla. Donec accumsan porta magna. Mauris a dolor eu elit rutrum commodo. Nam iaculis turpis non augue. Nullam lobortis egestas risus. Nulla
elementum dolor ac mauris. Ut tristique. In varius volutpat metus. Integer leo dolor, tristique a, dignissim ac, iaculis eget, elit. Donec arcu.
</span>
</p>
<p style="background-image: linear-gradient(to right, #a33, rgb(255, 215, 0))">
<span style="color: rgba(0, 255, 0, 140)">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ornare mollis elit. Integer_sagittis_Fusce_elementum_commodo_felis_Vivamus_lacinia_eleifend_libero_Donec
lacus.
</span>
<br />
<span style="color: rgba(0, 0, 255, 100)">
Nam sit amet urna. Nullam nulla. Donec accumsan porta magna. Mauris a dolor eu elit rutrum commodo. Nam iaculis turpis non augue. Nullam lobortis egestas risus. Nulla
elementum dolor ac mauris. Ut tristique. In varius volutpat metus. Integer leo dolor, tristique a, dignissim ac, iaculis eget, elit. Donec arcu.
</span>
</p>
<hr />
<h2>RTL text</h2>
<p style="text-align: right; direction: Rtl;">
<span>בדיקה של טקסט ימין לשמאל</span>
</p>
<p>
<span dir="rTL" lang="HE">בדיקה של טקסט ימין לשמאל</span> normal text
</p>
<p>
<span>בדיקה של טקסט ימין לשמאל</span> normal text
</p>
</body>
</html>
12 changes: 6 additions & 6 deletions Source/Demo/Common/TestSamples/16.Borders.htm
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,11 +11,11 @@
<div style="padding: 5px; border: 3px solid red">
simple border 3px
</div>
<div style="padding: 5px; border: 1px solid black; corner-radius: 5px;">
border 1px with corner-radius 5px
<div style="padding: 5px; border: 1px solid black; border-radius: 5px;">
border 1px with border-radius 5px
</div>
<div style="padding: 5px; border: 2px solid black; corner-radius: 10px;">
border 2px with corner-radius 10px
<div style="padding: 5px; border: 2px solid black; border-radius: 10px;">
border 2px with border-radius 10px
</div>
<div style="padding: 5px; border: 1px dotted blue;">
dotted border 1px
Expand All @@ -26,8 +26,8 @@
<div style="padding: 5px; border: 1px dashed darkred;">
dashed border 1px
</div>
<div style="padding: 5px; border: 2px dashed darkred; corner-radius: 10px;">
dashed border 2px with corner-radius 10px
<div style="padding: 5px; border: 2px dashed darkred; border-radius: 10px;">
dashed border 2px with border-radius 10px
</div>
</div>
</body>
Expand Down
Loading
Loading