pdf annotation in c# : Add hyperlink to pdf in SDK Library API wpf .net web page sharepoint 10.1007%2F978-3-540-68524-1_180-part1725

ApplyingModel-BasedTestingtoHTML
RenderingEngines–ACaseStudy
Jens R. Calamé
1
and Jaco van de Pol
2
1
Centrum voor Wiskunde en Informatica,
P.O. Box 94079, 1090 GB Amsterdam, The Netherlands
jens.calame@cwi.nl
2
University of Twente, Faculty EEMCS
P.O. Box 217, 7500 AE Enschede, The Netherlands
vdpol@cs.utwente.nl
Abstract. Conformance testing isa widely usedapproach to validate a
system correct w.r.t. its specification. This approach is mainly used for
behavior-oriented systems. BAiT (Behavior Adaptation in Testing) is a
conformance testing approachfor data-intensive reactive systems. Inthis
paper, we validate the applicability of BAiT to systems, which are not
behavior-oriented (reactive) but document-centered.
In particular, we apply BAiT to the test of the HTML rendering
engine Gecko,whichis usedby Mozilla Firefox. In orderto do so, we for-
mally specify a part of the CSSbox model in the specification language
µCRL and implement a wrapper for the Gecko renderer. Then, we au-
tomatically generate test cases and run tests with BAiT in a controlled
experiment in order to demonstrate our approach on the relevant part
of Gecko.
1 Introduction
Testing as a dynamic approach to software quality assurance is widely accepted
in industry and is a well-studied field in academia. State-of-the-art testing ap-
proaches are model-based [4], i.e. tests are not generated in an ad-hoc manner,
but founded on the specification of the software product under consideration.
One of the most rigorous model-based test approaches is conformance testing,
which tests whether an implementation conforms its specification focusing on
functional requirements. These notions are made precise in the formal methods
community [12].
In this paper, we want to apply conformance testing to rendering engines of
webbrowsers.In state-of-the-artwebdesign,contentanddesign arekeptseparate
fromeachother.Contentisdefined in theHypertextMarkupLanguage(HTML),
while the design is specified in a Cascading Style Sheet (CSS). When a web
page is rendered, the information from the CSS is used to position elements
of content on the rendered page. If a web document has a complex structure,
Part of this research has been funded by the Dutch BSIK/BRICKSproject.
K.Suzukietal.(Eds.):TestCom/FATES2008, LNCS5047, pp.250–265, 2008.
c IFIP International Federation for InformationProcessing 2008
Add hyperlink to pdf in - insert, remove PDF links in C#.net, ASP.NET, MVC, Ajax, WinForms, WPF
Free C# example code is offered for users to edit PDF document hyperlink (url), like inserting and deleting
chrome pdf from link; add links to pdf acrobat
Add hyperlink to pdf in - VB.NET PDF url edit library: insert, remove PDF links in vb.net, ASP.NET, MVC, Ajax, WinForms, WPF
Help to Insert a Hyperlink to Specified PDF Document Page
add hyperlink pdf document; add hyperlink to pdf online
ApplyingModel-Based Testing to HTML Rendering Engines
251
rendering algorithms can turn out to be erroneous, leading to “broken” web
pages with mispositioned elements.Rendering a modern web application,whose
appearance isdynamicallychanged on the client side using scriptlanguages,like
web applications based on Asynchronous JavaScript and XML (AJAX, [16]), is
even moredemanding for rendering engines.Performing a sufficient conformance
test in thiscontext is tedious,so that an automated solution ispreferable.Inthis
paper, we present a feasibility study for automated testing of rendering engines
using the test tool BAiT.
Here, we validate the applicability of BAiT [5,6], a blackbox test execution
tool for non-deterministic, data-oriented reactive systems, to test the rendering
engine of a web browser w.r.t. the positioning of boxes in the CSS box model.
Boxesin HTML areentities like for instancea completeHTML document (body
element) or a paragraph (elements p or div), which contain content or other
boxes and which are positioned either absolutely or relative to each other. The
box model is part of the W3C CSS Specification [15, Sect. 8].
Wepresenta feasibilitystudy,applyingconformancetestingusing BAiT tothe
rendering engine Gecko
1
,which is used by the open source web browser Mozilla
Firefox
2
.In order to perform the tests, we formalize the CSS specification and
design test purposes.Furthermore,weimplement a wrapper component between
the tester and Gecko in order to achieve a mapping between an action-oriented
specification and the document-oriented rendering engine. For several setups of
web pages, we then automatically generate parameterizable test cases. Those
test cases can be instantiated with varying data settings for the positions of
boxes, so that they are reusable for different page layouts. Then, the test cases
are executed automatically against the test wrapper and the results retrieved
from Gecko are interpreted in order to automatically assign verdicts.
1.1 Related Work
There exists a number of static test suites for the rendering capabilities of web
browsers.Each of thosetestsuitesconsistsofa set of HTMLand CSS documents
with different page layouts. The most well-known one is probably the ACID 2
Test
3
. It tests web browsers for their full compliance to the actual version of
CSS by rendering a web page with a vast amount of CSS features enabled.
Another set of test suites for the standard compliance of web browsers arethe
W3C Cascading Style Sheets Test Suites
4
.Here, again, we have a set of static
documents,which test renderingcapabilities fordistinctfeatures ofCSS.Finally,
Mozilla Firefox itself provides a set of static layout regression tests
5
,which can
be run in debug builds of the software.
Most of the named test suites are, however, not automated. In fact, the files
in the test suites, i.e.the test cases, have to be loaded into the browser and then
1
http://www.mozilla.org/newlayout/
2
http://www.mozilla.com/en-US/firefox
3
http://acid2.acidtests.org/
4
http://www.w3.org/Style/CSS/Test/
5
http://www.mozilla.org/newlayout/doc/regression_tests.html
VB.NET Create PDF from Word Library to convert docx, doc to PDF in
Change Word hyperlink to PDF hyperlink and bookmark. VB.NET Demo Code for Converting Word to PDF. Add necessary references: RasterEdge.Imaging.Basic.dll.
add hyperlinks pdf file; add a link to a pdf in acrobat
VB.NET Create PDF from Excel Library to convert xlsx, xls to PDF
Change Excel hyperlink to PDF hyperlink and bookmark. VB.NET Demo Code for Converting Excel to PDF. Add necessary references: RasterEdge.Imaging.Basic.dll.
active links in pdf; adding hyperlinks to pdf files
252
J.R. Calamé and J. van de Pol
the result of rendering the page has to be visually assessed. This process is not
automatic at all, neither on the level of test case generation, nor on that of test
execution.This means,that acertain amount oftestcaseshasto bedesignedand
executed manuallyand the results haveto be visually evaluated. This process is
time-consuming compared to an automated test process,where test cases – or at
least test data – is generated for a number of standard and critical cases.In this
case,the number of test cases to be generated and executed can be optimized in
order to reducetheabsolutenumberof test cases.Theregression tests ofMozilla
Firefox are at least automated on the level of test execution, however, they are
still founded on a static set of test cases.
Theapproach,which weproposein thispaper,providesnotonlyanautomated
test execution and evaluation of rendering results for a fragment of the CSS
features,thebox model,but also an automatic generation andvariationoftested
web page layouts. We chose this fragment, because rendering results, i.e. the
position of a box, can be objectively measured (in pixels) rather than having
to be visually assessed. The approach of a fully automatic test case generation
and execution has the advantage regarding the other named approaches, that
the executed test cases can cover more variation w.r.t. data parameters (i.e.the
position of boxes), but also regarding the structure of the rendered web pages.
The first issue enables us to reuse equally structured test cases (i.e. web pages)
and bythatto reducethenumber of generated test cases.Thelatter allows us to
test rendering web pages with a different interrelation of elements and by that
cover a larger variety of possible failures in the IUT.
We are aware of severalcase study reports of model-based testing, concerning
topics like the Conference Protocol [2], the Storm Surge Barrier in the Nether-
lands [9], smart card applications [8], the telecommunication sector [3] or – ver-
tical to our work – the generation of test purposes for the Session Initiation
Protocol[1]. To the best of our knowledge, however,this is the first application
of model-based automatic test generation and testing techniques to document-
centered applications, esp. to HTML rendering engines.
2 The Test Environment
Thetestenvironmentforourcasestudyconsistsoftwo maincomponents.Onthe
onehand,wehavethetester,whichcontrolstherunoftheexperiment.Thetester
will be discussed in Sect. 2.1. On the other hand, we have the implementation
under test (IUT), which we will discuss in Sect. 2.3. This is the object under
consideration, which we will actually be testing throughout the case study. In
Sect. 2.2, we will give an introduction to the CSS box model.
2.1 Firefox and Cascading Style Sheets
Firefox. Mozilla Firefox is a stand-alone web browser, which has its roots in
the Netscape Communicator from the 1990s. Most of its code was put under an
open-source license in 1998 and founded the basis for the Mozilla Suite, from
which Firefox arose as a stand-alone browser in 2004.
How to C#: Basic SDK Concept of XDoc.PDF for .NET
You may add PDF document protection functionality into your C# program. Hyperlink Edit. XDoc.PDF for .NET allows C# developers to edit hyperlink of PDF document
pdf link open in new window; pdf link to attached file
VB.NET PDF: Basic SDK Concept of XDoc.PDF
You may add PDF document protection functionality into your VB.NET program. Hyperlink Edit. XDoc.PDF for .NET allows VB.NET developers to edit hyperlink of PDF
add links pdf document; add hyperlink pdf
ApplyingModel-Based Testing to HTML Rendering Engines
253
Web page content (HTML):
...
<div class="warning">
...
<div class="warning"
id="warning1">...</div>
...
</div>
...
Web page layout (CSS):
div.warning {
border-style: solid;
border-color: red;
color:red;
}
div.warning#warning1 {
font-style: italic;
}
Fig.1. Two differently formatted boxes
Aweb browser reads and interprets HTML structured data to display web
pages. The task of actually displaying is carried out by a rendering component.
While loading a web page, this component incrementally builds up a Document
Object Model (DOM) tree from the HTML document to be displayed together
with declarative layout information. Mozilla Firefox uses the renderer Mozilla
Gecko, whose version 1.8.1 we consider in this paper as the IUT.
Cascading Style Sheets (CSS). In the 1990s, a declarative stylesheet language
was developed for structured documents in order to properly divide the content
of a web page from its design. Currently, the de-facto standard for CSS is in
version 2.1 [15].Thisversionis currentlynotfullysupported byallwebbrowsers,
including Mozilla Firefox. This issue, however,does not affect our case study.
The CSS design definition for a web page can be provided in three different
ways:as an externalCSS file,which is linked to the HTML file of the web page,
inline the HTML web page and inline a particular element of the web page. In
the first two cases, a stylesheet is a collection of blocks of the following form:
element.class#id {property_1: value_1; ...; property_n: value_n; }
The literal element denotes one of the possible elements of HTML [14], like
–for simple boxes – div or span. The literal class denotes a user-defined spe-
cialization of an HTML element, while id denotes a user-specific identifier for a
particular occurrence of this element in an HTML document. For each of these
elements, we can define pairs of properties and values.
Fig. 1 shows a small example: Boxes of class warning are rendered with a
red border and red text. The one warning box with the identifier warning1
additionally has the text in italic. Since this box is a warning box, too, it also
takes over allproperties fromthe warning boxes (red border and red text). As a
result, the shown HTML code fragment is rendered as two red boxes,embedded
into each other, of which the inner box has italic text.
If a CSS design definition is provided in a separate file,it is linked to the web
page by using the link element of HTML in the following way:
<link rel="stylesheet" type="text/css" href="mycss.css" />
C# Create PDF from Word Library to convert docx, doc to PDF in C#.
Change Word hyperlink to PDF hyperlink and bookmark. C#.NET Sample Code: Convert Word to PDF in C#.NET Project. Add necessary references:
change link in pdf; add hyperlink pdf file
.NET PDF Document Viewing, Annotation, Conversion & Processing
Extract hyperlink inside PDF. PDF Write. Insert text, text box into PDF. Edit, delete text from PDF. Insert images into PDF. Edit, remove images from PDF. Add,
accessible links in pdf; add url link to pdf
254
J.R. Calamé and J. van de Pol
CSS information can also be provided inline the HTML document by nesting it
in a style element. Inline CSS on HTML element level, which we will be using
in our case study, omits the block structure from Fig. 1. The definition of the
outer box from the figure using CSS inline the element itself looks as follows:
<div style="border-style:solid;border-color:red;color:red;"></div>
2.2 The CSS Box Model
In our case study, we will regard the positioning of div-boxes by the Gecko
rendering engine. Therefore, we have to regard both the dimensions of a box
as well as other parameters, which determine the box’s position or its distance
to other elements on a web page. The interrelation of boxes on a web page is
defined by the CSS box model [15,Sect.8],which we will briefly introduce here.
Thedimensionsofa div-boxareessentiallydeterminedbytwo CSSproperties:
width and height. Furthermore, a minimum width and height can be defined
as well as their maximum counterparts.
In addition to its width and height, a box also has a number of distances to
contained or surrounding content. Those settings are displayed in Fig. 2. First
of all, this is the distance to surrounding content (CSS properties margin or
left-/top-/right-/bottom-margin, resp.). Furthermore, the distance of the
box’s border to any contained content can be defined (properties padding or
left-/top-/right-/bottom-padding,resp.). Finally,thewidth of a box’s bor-
der isdefined by the propertiesborder or left-/top-/right-/bottom-border,
resp. We will later come back to these settings.
Boxes can be positioned in a variety of possibilities. The positioning mode
is set in the CSS property position, which can have one of the four values
static, absolute, fixed and relative. The default setting is static, which
does not affect the standard element flow (top to bottom on the web page).
Boxes can furthermore be positioned absolutely to either the HTML document
under consideration (absolute) or the viewport, i.e. the browser window or a
page in print (fixed). Finally, boxes can be positioned relative to each other,
using the setting relative.
Margin
Border
Padding
Content
top
bottom
left
right
Fig.2. CSS Box Model [15], box dimensions
VB.NET Create PDF from PowerPoint Library to convert pptx, ppt to
Export PowerPoint hyperlink to PDF. VB.NET Demo Code for Converting PowerPoint to PDF. Add necessary references: RasterEdge.Imaging.Basic.dll.
adding an email link to a pdf; add link to pdf file
C# Create PDF from PowerPoint Library to convert pptx, ppt to PDF
Export PowerPoint hyperlink to PDF in .NET console application. C#.NET Demo Code: Convert PowerPoint to PDF in C#.NET Application. Add necessary references:
convert excel to pdf with hyperlinks; change link in pdf file
ApplyingModel-Based Testing to HTML Rendering Engines
255
An absolutely positioned box is provided with up to four additional param-
eters determining its position: a left, right, top and bottom offset. A box,
which is positioned w.r.t. the upper left corner of the HTML document can, for
instance, be determined by a left and a top offset in addition to its widthand
height. A box with the lower right corner as its fix point would accordingly be
defined using thebottomand rightoffsetparametersand leaving the other ones
undefined.Forboxes,which are overdefined,e.g.by defining a left and a right
offset as well as a width,the W3C documents define the correct handling.
While the position of an absolutely positioned box is only determined by
the given offsets, the position of a relatively positioned box must be computed
regarding the other boxes on the same web page. One issue which determines
the position of a relatively positioned div-box w.r.t. another one is its position
in the DOM-tree of the HTML document. If a box A appears in the tree before
another box B, then A is rendered above or left of B. If A appears after B, then
it is rendered either right of B or below B. Furthermore, A can enclose B, if B
is a child node of A in the DOM tree.
The absolute position of the box is then computed as the summation of the
other boxes’ measurements. Assume,thebox under consideration is anchored to
the upper left corner of the web page. Then, its top offset is the sum of all top
and bottom margins, widths of the top and bottom borders and the heights of
all boxes above the one under consideration. Thebox’s left offset is computed as
the sum ofallleft and right margins,widths of the left and rightbordersand the
widths of allboxes left theoneunder consideration.Therightand bottom offsets
areleftundefined.Thepaddingoftheonebox,whichsurroundsallthementioned
boxes,istakeninto accountbyassuming,thatthetopmarginofthetop-mostbox
and the left margin of the left-most box is at least as wide as the padding of the
surrounding box.
2.3 BAiT: Testing and Test Data Selection
Behavior-Adaptation in Testing (BAiT,[5,6,7]) is a toolset,that implements the
test generation and execution process displayed in Fig. 3. The process starts
from a specification of the IUT. In our case, such a specification is given in the
formalspecificationlanguageμCRL[10],whichisbasedona processalgebra with
abstract datatypes. In a first step, behavior and data are separately extracted
fromthe specification.The behaviorpartforms theabstractspecification,which
is further used for the generation of parameterizable test cases. Data relations
in the regarded system form the test oracle, which is later used to actually
parameterize the generated test cases.
The test generation branch of the process regards behavior after having ab-
stracted data using a so-named chaotic data abstraction [6,7], by which variable
parameters are replaced by a distinct constant chaos. In doing so, we avoid the
problem of state space explosion during the test generation process. The gen-
eration of parameterizable, abstract test cases is performed by the tool Test
Generation with Verification Techniques (TGV, [11]), which performs a guided
searchover the whole state space ofthe abstract specification. Thetest engineer
256
J.R. Calamé and J. van de Pol
ApplyingModel-Based Testing to HTML Rendering Engines
257
does not succeed, the test ends with verdict Inconc. If a trace to Pass could be
successfully executed to its end, then the test run ends with verdict Pass.
3 Objective of the Case Study
The objective of our case study is to apply BAiT to testing the implementation
of the Gecko rendering engine. BAiT has originally been designed as a tool for
the test of data-oriented reactive systems in general. In this paper, we report
on a feasibility study to validate the applicability of BAiT to HTML rendering
engines. These systems (or system components, resp.) are not reactive systems
in the original sense.
Reactive systems are based on events being sent forth and back between sev-
eral systems. These events can be parameterized with data. A rendering engine
works differently: It is document-centered, i.e. it receives a document and ren-
ders it. While sending the document to the rendering engine is still comparable
to the reactive systems described above, rendering this document is not. It is
no reaction in the original sense, since no evaluable events are sent back from
the IUT. The only event sent back from the renderer states, that rendering is
finished, but it does not contain the actual result of rendering. In many cases,
the result of rendering must even be evaluated visually, while for some aspects,
the relevant information can be retrieved from the rendering engine and can be
computer-processed.
Such an aspect arethepositions of div-boxestowhichwewillrestrictthe test.
Rules for positioning such boxes are defined in the CSS Box Model, which has
been described in Sect. 2.2. We will, however, not consider the full box model,
but restrict to a fragment of it.
First of all, we concentrate on the settings absolute and relative with a
binding to the top left corner of the web page for the possible positioning of
boxes. Secondly, we consider empty boxes of an explicitly defined width and
height only in order to keep the results of rendering predictable by the test
oracle. Boxes filled with content may lead to overflowing content which results
in a correction by the rendering enginebased on information about the viewport
dimensions andtheusedfontdimensions.Treatingthosedetailsinthis feasibility
study would not be purposeful and furthermore would have required arithmetic
division operations, which would complicate the specification in μCRL. For this
reason, we do not regard (overflowing) content in this case study.
Thirdly, we limit the possible scales used in the design definition of a div-
box. Normally, the position and size of a div-box is determined by distances,
which can be defined in a variety of scales. Some of those some are absolute
(pixels, didot points, pico points, inches,millimeters and centimeters) and other
are relativeto either the actual font setting (scales em and ex) or the rest of the
page layout (percentages or the auto setting). In this paper, we only consider
absolute lengths of scale px (pixel) in order to avoid scale conversions.
Finally,weuse a “flat” modelin our case study rather than one, which resem-
bles the whole nested structure of a web page. This means, that we regard only
258
J.R. Calamé and J. van de Pol
adistinct box testbox and its absolute position on the web page. When we add
another box to the web page, then we recompute the position of testbox as it
has changed due to the newly added other box. This means for instance, that,
if we add another box above the regarded testbox, the top offset of testbox is
recomputed as the summation of the previous top offset, the top and bottom
margins of the new box, the top and bottom border width of the new box and
the new box’s height.By doing so,wecan easily keep track of the position ofthe
regarded testbox without having to keep the whole HTML document structure
in our model.
Apart from the applicability of BAiT to HTML rendering engines in partic-
ular, we also aim at two other targets with this case study. On the one hand,
we want to test the adaptability of BAiT to nondeterministic behavior of the
IUT further byintroducing some artificial nondeterminismw.r.t. to thesystem’s
feedback about the rendered boxes. On the other hand, we want to regard the
feasibility of μCRL as a language for the design of test purposes.
4 Realizing the Test Environment
In order to test Gecko, we first had to create a test environment. This environ-
ment, as schematically depicted in Fig. 4, consists of a tester and an implemen-
tation under test (IUT). The tester is in our case the tool BAiT. The IUT is
acomponent named Gecko Wrapper, which wraps Gecko internally. Both the
tester and the IUT are Java components which communicate with each other
using bidirectional procedure-based communication.
In order to generate and run the tests following the schema from Fig. 3, we
also need a system specification of the CSS box model for Gecko and a test
purpose to sketch out the later test cases. While the design of the tests and
hence also that of the test purposes will be the topic of Sect. 5, we will in the
remainder of this sectiondiscuss thespecification oftheboxmodel. Furthermore,
we will give some details on the Gecko Wrapper.
4.1 Modelling CSS in μCRL
We modeled a fragment of the CSS box model with the limitations from Sect. 3
in μCRL [10]. The modeled fragment of CSS allows to position boxes relative to
Tester
Gecko Wrapper
Gecko
Fig.4. Test Environment
ApplyingModel-Based Testing to HTML Rendering Engines
259
Table 1. Actions for the CSS box model
Action
Functionality
Input actions:
resetBoxes
Wipes all boxes andstarts again with a fresh document.
setupTestbox
Defines the distinctly regarded test box.
putBoxRelative
Puts a box relatively to the other boxes yet defined in the actual
HTML document. It can be defined, whether this box appears left
of, right of, above, beneath or around all yet defined boxes. Finally,
the measurements can be defined.
putBoxAbsolute
Puts a box with an absolute position.
render
Renders the actually defined document and starts returning results
(offsets, see below)
Output actions:
offsetLeft
Returns absolute left offset of test box.
offsetRight
Returns absolute right offset of test box.
offsetTop
Returns absolute top offset of test box.
offsetBottom
Returns absolute bottom offset of test box.
each otheror absolutely. In our model,recursivestructures ofboxes areflattened
by regarding only one distinct box and its position, rather than a structure of
boxes. Whenever a box is added, only the consequences on the position of the
regarded box are computed and applied.
While rendering a web page is in principle a document-centered task, our
specification of the box model is behavior-oriented. Hence, we defined a set of
input actions, which allow us to put boxes into a box structure. Furthermore,
we defined some output actions, which provide information about the current
offset of the regarded box to the tester. The actions are defined in Table 1.
The system behavior for the CSS box model is specified as follows: As a
first step, a testbox must be set up (setupTestbox).The action setupTestbox
accepts parameters, which determine the box’s width and height. Other boxes
can be put in the vicinity of this testbox using the actions putBoxRelative
and putBoxAbsolute in any order. The action putBoxRelative accepts 15 pa-
rameters: The first one determines, whether the box appears above, below, left,
right or around theother boxes,which haveyet been inserted into theweb page.
This parameterisnamed “position”,butisactuallynotrelatedthethe position-
propertyofCSS.Thenext two parametersdeterminethebox’swidth andheight.
Thelast12 parameters,finally,definethe widthofthebox’s padding,borderand
margin as depicted in Fig.2. TheactionputBoxAbsoluteonly accepts sevenpa-
rameters. The first three are identical with those from putBoxRelative, while
the remaining four parameters define the box’s absolute position on the page
w.r.t. the four margins of the web page.
Any of these three actions can be followed by an action resetBoxes in order
to delete all boxes and start from scratch, or by an action render. In this case,
the IUT renders the defined structure of div-boxes. Afterwards, the different
Documents you may be interested
Documents you may be interested