mirror/html2canvas
1
0
Fork 0
mirror of https://github.com/niklasvh/html2canvas.git synced 2023-08-10 21:13:10 +03:00
Code Issues Projects Releases Wiki Activity

Use tree order when z-index is the same

Browse Source
This commit is contained in:
Niklas von Hertzen 2017-08-09 11:52:42 +08:00
parent ed92d2354c
commit 77393074ba
36 changed files with 392 additions and 337 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/NodeContainer.js
View File

@ -80,9 +80,11 @@ export default class NodeContainer {
bounds: Bounds;
curvedBounds: BoundCurves;
image: ?string;
index: number;
constructor(node: HTMLElement, parent: ?NodeContainer, imageLoader: ImageLoader) {
constructor(node: HTMLElement, parent: ?NodeContainer, imageLoader: ImageLoader, index: number) {
this.parent = parent;
this.index = index;
this.childNodes = [];
const defaultView = node.ownerDocument.defaultView;
const style = defaultView.getComputedStyle(node, null);

15
src/NodeParser.js
View File

@ -17,11 +17,13 @@ export const NodeParser = (
logger.log(`Starting node parsing`);
}
const container = new NodeContainer(node, null, imageLoader);
let index = 0;
const container = new NodeContainer(node, null, imageLoader, index++);
const stack = new StackingContext(container, null, true);
createPseudoHideStyles(node.ownerDocument);
parseNodeTree(node, container, stack, imageLoader);
parseNodeTree(node, container, stack, imageLoader, index);
if (__DEV__) {
logger.log(`Finished parsing node tree`);
@ -41,7 +43,8 @@ const parseNodeTree = (
node: HTMLElement,
parent: NodeContainer,
stack: StackingContext,
imageLoader: ImageLoader
imageLoader: ImageLoader,
index: number
): void => {
for (let childNode = node.firstChild, nextNode; childNode; childNode = nextNode) {
nextNode = childNode.nextSibling;
@ -57,7 +60,7 @@ const parseNodeTree = (
if (IGNORED_NODE_NAMES.indexOf(childNode.nodeName) === -1) {
inlinePseudoElement(childNode, PSEUDO_BEFORE);
inlinePseudoElement(childNode, PSEUDO_AFTER);
const container = new NodeContainer(childNode, parent, imageLoader);
const container = new NodeContainer(childNode, parent, imageLoader, index++);
if (container.isVisible()) {
if (childNode.tagName === 'INPUT') {
// $FlowFixMe
@ -89,12 +92,12 @@ const parseNodeTree = (
);
parentStack.contexts.push(childStack);
if (SHOULD_TRAVERSE_CHILDREN) {
parseNodeTree(childNode, container, childStack, imageLoader);
parseNodeTree(childNode, container, childStack, imageLoader, index);
}
} else {
stack.children.push(container);
if (SHOULD_TRAVERSE_CHILDREN) {
parseNodeTree(childNode, container, stack, imageLoader);
parseNodeTree(childNode, container, stack, imageLoader, index);
}
}
}

3
src/Renderer.js
View File

@ -395,5 +395,6 @@ const sortByZIndex = (a: StackingContext, b: StackingContext): number => {
} else if (a.container.style.zIndex.order < b.container.style.zIndex.order) {
return -1;
}
return 0;
return a.container.index > b.container.index ? 1 : -1;
};

4
tests/reftests/border/radius.txt
View File

@ -30,7 +30,7 @@ Shape: rgb(0,128,0) Path (BezierCurve(x0: 401, y0: 635, x1: 408, y1: 653, cx0: 4
Shape: rgb(0,0,0) Path (BezierCurve(x0: 401, y0: 881, x1: 383, y1: 888, cx0: 396, cy0: 885, cx1: 390, cy1: 888) > BezierCurve(x0: 133, y0: 888, x1: 115, y1: 881, cx0: 126, cy0: 888, cx1: 120, cy1: 885) > BezierCurve(x0: 158, y0: 845, x1: 158, y1: 838, cx0: 158, cy0: 841, cx1: 158, cy1: 838) > BezierCurve(x0: 358, y0: 838, x1: 358, y1: 845, cx0: 358, cy0: 838, cx1: 358, cy1: 841))
Clip: Path (BezierCurve(x0: 522, y0: 738, x1: 623, y1: 637, cx0: 522, cy0: 682, cx1: 567, cy1: 637) > BezierCurve(x0: 623, y0: 637, x1: 724, y1: 738, cx0: 679, cy0: 637, cx1: 724, cy1: 682) > BezierCurve(x0: 724, y0: 738, x1: 623, y1: 839, cx0: 724, cy0: 794, cx1: 679, cy1: 839) > BezierCurve(x0: 623, y0: 839, x1: 522, y1: 738, cx0: 567, cy0: 839, cx1: 522, cy1: 794))
Fill: rgb(111,66,140)
Shape: rgb(0,0,0) Path (BezierCurve(x0: 552, y0: 666, x1: 623, y1: 637, cx0: 570, cy0: 648, cx1: 595, cy1: 637) > BezierCurve(x0: 623, y0: 637, x1: 695, y1: 666, cx0: 651, cy0: 637, cx1: 676, cy1: 648) > BezierCurve(x0: 694, y0: 667, x1: 623, y1: 638, cx0: 676, cy0: 649, cx1: 651, cy1: 638) > BezierCurve(x0: 623, y0: 638, x1: 552, y1: 667, cx0: 596, cy0: 638, cx1: 570, cy1: 649))
Shape: rgb(0,0,0) Path (BezierCurve(x0: 552, y0: 666, x1: 623, y1: 637, cx0: 570, cy0: 648, cx1: 595, cy1: 637) > BezierCurve(x0: 623, y0: 637, x1: 695, y1: 666, cx0: 651, cy0: 637, cx1: 676, cy1: 648) > BezierCurve(x0: 694, y0: 667, x1: 623, y1: 638, cx0: 676, cy0: 649, cx1: 651, cy1: 638) > BezierCurve(x0: 623, y0: 638, x1: 552, y1: 667, cx0: 596, cy0: 638, cx1: 571, cy1: 649))
Shape: rgb(0,0,0) Path (BezierCurve(x0: 695, y0: 666, x1: 724, y1: 738, cx0: 713, cy0: 685, cx1: 724, cy1: 710) > BezierCurve(x0: 724, y0: 738, x1: 695, y1: 810, cx0: 724, cy0: 766, cx1: 713, cy1: 791) > BezierCurve(x0: 694, y0: 809, x1: 723, y1: 738, cx0: 712, cy0: 791, cx1: 723, cy1: 766) > BezierCurve(x0: 723, y0: 738, x1: 694, y1: 667, cx0: 723, cy0: 710, cx1: 712, cy1: 685))
Shape: rgb(0,0,0) Path (BezierCurve(x0: 695, y0: 810, x1: 623, y1: 839, cx0: 676, cy0: 828, cx1: 651, cy1: 839) > BezierCurve(x0: 623, y0: 839, x1: 552, y1: 810, cx0: 595, cy0: 839, cx1: 570, cy1: 828) > BezierCurve(x0: 552, y0: 809, x1: 623, y1: 838, cx0: 570, cy0: 827, cx1: 596, cy1: 838) > BezierCurve(x0: 623, y0: 838, x1: 694, y1: 809, cx0: 651, cy0: 838, cx1: 676, cy1: 827))
Shape: rgb(0,0,0) Path (BezierCurve(x0: 695, y0: 810, x1: 623, y1: 839, cx0: 676, cy0: 828, cx1: 651, cy1: 839) > BezierCurve(x0: 623, y0: 839, x1: 552, y1: 810, cx0: 595, cy0: 839, cx1: 570, cy1: 828) > BezierCurve(x0: 552, y0: 809, x1: 623, y1: 838, cx0: 571, cy0: 827, cx1: 596, cy1: 838) > BezierCurve(x0: 623, y0: 838, x1: 694, y1: 809, cx0: 651, cy0: 838, cx1: 676, cy1: 827))
Shape: rgb(0,0,0) Path (BezierCurve(x0: 552, y0: 810, x1: 522, y1: 738, cx0: 533, cy0: 791, cx1: 522, cy1: 766) > BezierCurve(x0: 522, y0: 738, x1: 552, y1: 666, cx0: 522, cy0: 710, cx1: 533, cy1: 685) > BezierCurve(x0: 552, y0: 667, x1: 523, y1: 738, cx0: 534, cy0: 685, cx1: 523, cy1: 710) > BezierCurve(x0: 523, y0: 738, x1: 552, y1: 809, cx0: 523, cy0: 766, cx1: 534, cy1: 791))

5
tests/reftests/text/fontawesome.html
View File

@ -5,6 +5,11 @@
<title>fontawesome icons</title>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<script type="text/javascript" src="../../test.js"></script>
<style>
body {
font-family: Arial;
}
</style>
</head>
<body>
<div>

142
tests/reftests/text/fontawesome.txt
View File

@ -1,88 +1,88 @@
Window: [800, 600]
Rectangle: [0, 0, 800, 600] rgba(0,0,0,0)
Opacity: 1
Text: rgb(0,0,0) normal normal 400 16px Times New Roman
Text: rgb(0,0,0) normal normal 400 16px Arial
[8, 8]: Fontawesome
[101, 8]: icons
Text: rgb(0,0,0) normal normal 400 16px Times New Roman
[92, 98]: fa
[104, 98]: -
[110, 98]: 5x
Shape: rgb(0,0,0) Path (Vector(x: 8, y: 35) > Vector(x: 792, y: 35) > Vector(x: 791, y: 36) > Vector(x: 9, y: 36))
Shape: rgb(0,0,0) Path (Vector(x: 792, y: 35) > Vector(x: 792, y: 37) > Vector(x: 791, y: 36) > Vector(x: 791, y: 36))
Shape: rgb(0,0,0) Path (Vector(x: 792, y: 37) > Vector(x: 8, y: 37) > Vector(x: 9, y: 36) > Vector(x: 791, y: 36))
Shape: rgb(0,0,0) Path (Vector(x: 8, y: 37) > Vector(x: 8, y: 35) > Vector(x: 9, y: 36) > Vector(x: 9, y: 36))
Text: rgb(0,0,0) normal normal 400 16px Times New Roman
[55, 242]: fa
[67, 242]: -
[72, 242]: twitter
[118, 242]: on
[138, 242]: fa
[151, 242]: -
[156, 242]: square
[198, 242]: -
[203, 242]: o
Text: rgb(0,0,0) normal normal 400 16px Times New Roman
[55, 285]: fa
[67, 285]: -
[72, 285]: flag
[101, 285]: on
[121, 285]: fa
[134, 285]: -
[139, 285]: circle
Text: rgb(0,0,0) normal normal 400 16px Times New Roman
[55, 328]: fa
[67, 328]: -
[72, 328]: terminal
[130, 328]: on
[150, 328]: fa
[162, 328]: -
[168, 328]: square
Text: rgb(0,0,0) normal normal 400 16px Times New Roman
[55, 371]: fa
[67, 371]: -
[72, 371]: ban
[100, 371]: on
[120, 371]: fa
[132, 371]: -
[137, 371]: camera
[113, 8]: icons
Text: rgb(0,0,0) normal normal 400 16px Arial
[92, 97]: fa
[106, 97]: -
[111, 97]: 5x
Shape: rgb(0,0,0) Path (Vector(x: 8, y: 34) > Vector(x: 792, y: 34) > Vector(x: 791, y: 35) > Vector(x: 9, y: 35))
Shape: rgb(0,0,0) Path (Vector(x: 792, y: 34) > Vector(x: 792, y: 36) > Vector(x: 791, y: 35) > Vector(x: 791, y: 35))
Shape: rgb(0,0,0) Path (Vector(x: 792, y: 36) > Vector(x: 8, y: 36) > Vector(x: 9, y: 35) > Vector(x: 791, y: 35))
Shape: rgb(0,0,0) Path (Vector(x: 8, y: 36) > Vector(x: 8, y: 34) > Vector(x: 9, y: 35) > Vector(x: 9, y: 35))
Text: rgb(0,0,0) normal normal 400 16px Arial
[55, 239]: fa
[68, 239]: -
[74, 239]: twitter
[121, 239]: on
[143, 239]: fa
[156, 239]: -
[162, 239]: square
[211, 239]: -
[216, 239]: o
Text: rgb(0,0,0) normal normal 400 16px Arial
[55, 282]: fa
[68, 282]: -
[74, 282]: flag
[104, 282]: on
[126, 282]: fa
[140, 282]: -
[145, 282]: circle
Text: rgb(0,0,0) normal normal 400 16px Arial
[55, 325]: fa
[68, 325]: -
[74, 325]: terminal
[135, 325]: on
[157, 325]: fa
[171, 325]: -
[176, 325]: square
Text: rgb(0,0,0) normal normal 400 16px Arial
[55, 368]: fa
[68, 368]: -
[74, 368]: ban
[105, 368]: on
[127, 368]: fa
[140, 368]: -
[146, 368]: camera
Text: rgb(0,0,0) normal normal 400 80px FontAwesome
[8, 44]: 
Text: rgb(0,0,0) normal normal 400 16px Times New Roman
[42, 141]: List
[71, 141]: icons
[8, 43]: 
Text: rgb(0,0,0) normal normal 400 16px Arial
[42, 140]: List
[71, 140]: icons
Text: rgb(0,0,0) normal normal 400 16px FontAwesome
[18, 143]: 
Text: rgb(0,0,0) normal normal 400 16px Times New Roman
[42, 160]: can
[69, 160]: be
[87, 160]: used
[18, 142]: 
Text: rgb(0,0,0) normal normal 400 16px Arial
[42, 158]: can
[73, 158]: be
[95, 158]: used
Text: rgb(0,0,0) normal normal 400 16px FontAwesome
[18, 162]: 
Text: rgb(0,0,0) normal normal 400 16px Times New Roman
[42, 179]: as
[59, 179]: bullets
Transform: (24, 186) [0.99, 0.16, -0.16, 0.99, 0, 0]
[18, 160]: 
Text: rgb(0,0,0) normal normal 400 16px Arial
[42, 176]: as
[63, 176]: bullets
Transform: (24, 182) [0.97, 0.26, -0.26, 0.97, 0, 0]
Text: rgb(0,0,0) normal normal 400 16px FontAwesome
[17, 180]: 
Text: rgb(0,0,0) normal normal 400 16px Times New Roman
[42, 198]: in
[59, 198]: lists
[16, 177]: 
Text: rgb(0,0,0) normal normal 400 16px Arial
[42, 194]: in
[59, 194]: lists
Text: rgb(0,0,0) normal normal 400 16px FontAwesome
[18, 199]: 
[18, 196]: 
Text: rgb(0,0,0) normal normal 400 42.6667px FontAwesome
[13, 232]: 
[13, 228]: 
Text: rgb(0,0,0) normal normal 400 21.3333px FontAwesome
[19, 242]: 
[19, 238]: 
Text: rgb(0,0,0) normal normal 400 42.6667px FontAwesome
[11, 274]: 
[11, 270]: 
Text: rgb(255,255,255) normal normal 400 21.3333px FontAwesome
[19, 285]: 
[19, 281]: 
Text: rgb(0,0,0) normal normal 400 42.6667px FontAwesome
[11, 317]: 
[11, 313]: 
Text: rgb(255,255,255) normal normal 400 21.3333px FontAwesome
[19, 328]: 
[19, 324]: 
Text: rgb(0,0,0) normal normal 400 21.3333px FontAwesome
[18, 370]: 
[18, 366]: 
Text: rgb(0,0,0) normal normal 400 42.6667px FontAwesome
[11, 360]: 
[11, 356]: 

5
tests/reftests/text/shadow.html
View File

@ -35,8 +35,11 @@
.red-text-shadow {
text-shadow: 0 -2px;
}
</style>
body {
font-family: Arial;
}
</style>
</head>
<body>
<div class="shadow1">

166
tests/reftests/text/shadow.txt
View File

@ -1,88 +1,88 @@
Window: [800, 600]
Rectangle: [0, 0, 800, 600] rgba(0,0,0,0)
Opacity: 1
Text: rgb(0,0,0) normal normal 400 16px Times New Roman
Text: rgb(0,0,0) normal normal 400 16px Arial
[8, 8]: Some
[48, 8]: text
Text: rgb(0,0,0) normal normal 400 16px Times New Roman
[271, 8]: followed
[332, 8]: by
[352, 8]: more
[388, 8]: text
[416, 8]: without
[469, 8]: shadow.
Text: rgb(0,0,0) normal normal 400 16px Times New Roman
[653, 8]: and
[680, 8]: some
[718, 8]: more
[754, 8]: text
[8, 27]: without
[61, 27]: shadow
[54, 8]: text
Text: rgb(0,0,0) normal normal 400 16px Arial
[292, 8]: followed
[355, 8]: by
[376, 8]: more
[417, 8]: text
[447, 8]: without
[502, 8]: shadow.
Text: rgb(0,0,0) normal normal 400 16px Arial
[704, 8]: and
[736, 8]: some
[8, 26]: more
[49, 26]: text
[79, 26]: without
[134, 26]: shadow
Text: rgb(255,255,255) normal normal 400 24px Georgia Shadows: (rgb(0,0,0) 1px 1px 2px, rgb(0,0,255) 0px 0px 24px)
[8, 180]: Sed
[53, 180]: ut
[80, 180]: perspiciatis
[208, 180]: unde
[268, 180]: omnis
[339, 180]: iste
[382, 180]: natus
[446, 180]: error
[506, 180]: sit
[538, 180]: voluptatem
[8, 207]: accusantium
[148, 207]: doloremque
[282, 207]: laudantium,
[418, 207]: totam
[486, 207]: rem
[534, 207]: aperiam,
[634, 207]: eaque
[702, 207]: ipsa
[8, 234]: quae
[65, 234]: ab
[96, 234]: illo
[136, 234]: inventore.
Text: rgb(0,0,0) normal normal 400 16px Times New Roman Shadows: (rgb(0,0,0) 0px -2px 0px)
[8, 286]: Sed
[36, 286]: ut
[52, 286]: perspiciatis
[129, 286]: unde
[164, 286]: omnis
[208, 286]: iste
[234, 286]: natus
[272, 286]: error
[307, 286]: sit
[326, 286]: voluptatem
[402, 286]: accusantium
[486, 286]: doloremque
[566, 286]: laudantium,
[646, 286]: totam
[686, 286]: rem
[715, 286]: aperiam,
[8, 305]: eaque
[49, 305]: ipsa
[79, 305]: quae
[113, 305]: ab
[132, 305]: illo
[158, 305]: inventore.
Text: rgb(0,0,0) normal normal 400 16px Times New Roman Shadows: (rgb(136,136,136) 1px 1px 3px)
[76, 8]: followed
[137, 8]: by
[157, 8]: text
[185, 8]: with
[218, 8]: shadow
Text: rgb(0,0,0) normal normal 700 16px Times New Roman Shadows: (rgb(0,0,0) 1px 1px 2px, rgb(0,0,255) 0px 0px 16px)
[525, 8]: Multi
[567, 8]: text
[597, 8]: shadow
Text: rgba(0,0,0,0) normal normal 400 48px Times New Roman Shadows: (rgb(0,0,255) 0px 0px 5px, rgb(255,0,0) 2px 2px 0px)
[8, 46]: testing
[148, 46]: with
[245, 46]: transparent
Text: rgba(0,255,0,0.5) normal normal 700 48px Times New Roman Shadows: (rgb(0,0,255) 0px 0px 5px, rgb(255,0,0) 2px 2px 0px) solid rgba(0,255,0,0.5) underline
[470, 46]: testing
[606, 46]:
[618, 46]: with
[709, 46]:
[8, 102]: low
[80, 102]:
[92, 102]: opacity
[8, 178]: Sed
[53, 178]: ut
[80, 178]: perspiciatis
[208, 178]: unde
[268, 178]: omnis
[339, 178]: iste
[382, 178]: natus
[446, 178]: error
[506, 178]: sit
[538, 178]: voluptatem
[8, 206]: accusantium
[148, 206]: doloremque
[282, 206]: laudantium,
[418, 206]: totam
[486, 206]: rem
[534, 206]: aperiam,
[634, 206]: eaque
[702, 206]: ipsa
[8, 233]: quae
[65, 233]: ab
[96, 233]: illo
[136, 233]: inventore.
Text: rgb(0,0,0) normal normal 400 16px Arial Shadows: (rgb(0,0,0) 0px -2px 0px)
[8, 284]: Sed
[41, 284]: ut
[59, 284]: perspiciatis
[143, 284]: unde
[183, 284]: omnis
[230, 284]: iste
[260, 284]: natus
[303, 284]: error
[342, 284]: sit
[362, 284]: voluptatem
[445, 284]: accusantium
[539, 284]: doloremque
[628, 284]: laudantium,
[715, 284]: totam
[760, 284]: rem
[8, 302]: aperiam,
[75, 302]: eaque
[124, 302]: ipsa
[158, 302]: quae
[198, 302]: ab
[220, 302]: illo
[244, 302]: inventore.
Text: rgb(0,0,0) normal normal 400 16px Arial Shadows: (rgb(136,136,136) 1px 1px 3px)
[84, 8]: followed
[148, 8]: by
[169, 8]: text
[199, 8]: with
[232, 8]: shadow
Text: rgb(0,0,0) normal normal 700 16px Arial Shadows: (rgb(0,0,0) 1px 1px 2px, rgb(0,0,255) 0px 0px 16px)
[566, 8]: Multi
[607, 8]: text
[640, 8]: shadow
Text: rgba(0,0,0,0) normal normal 400 48px Arial Shadows: (rgb(0,0,255) 0px 0px 5px, rgb(255,0,0) 2px 2px 0px)
[8, 45]: testing
[163, 45]: with
[262, 45]: transparent
Text: rgba(0,255,0,0.5) normal normal 700 48px Arial Shadows: (rgb(0,0,255) 0px 0px 5px, rgb(255,0,0) 2px 2px 0px) solid rgba(0,255,0,0.5) underline
[518, 45]: testing
[675, 45]:
[688, 45]: with
[784, 45]:
[8, 100]: low
[88, 100]:
[101, 100]: opacity

5
tests/reftests/transform/nested.html
View File

@ -35,8 +35,11 @@
display: inline-block;
}
</style>
body {
font-family: Arial;
}
</style>
</head>
<body>
<div id="first">First level content <div id="second">with second level content <div id="third">and third level content</div>, ending second</div>, ending first</div>

70
tests/reftests/transform/nested.txt
View File

@ -1,42 +1,42 @@
Window: [800, 600]
Rectangle: [0, 0, 800, 600] rgba(0,0,0,0)
Opacity: 1
Clip: Path (Vector(x: 8, y: 108) > Vector(x: 649, y: 108) > Vector(x: 649, y: 157) > Vector(x: 8, y: 157))
Clip: Path (Vector(x: 8, y: 108) > Vector(x: 708, y: 108) > Vector(x: 708, y: 156) > Vector(x: 8, y: 156))
Fill: rgb(205,92,92)
Text: rgb(0,0,0) normal normal 400 16px Times New Roman
[8, 124]: First
[41, 124]: level
[76, 124]: content
Text: rgb(0,0,0) normal normal 400 16px Times New Roman
[568, 124]: ,
[576, 124]: ending
[624, 124]: first
Clip: Path (Vector(x: 653, y: 123) > Vector(x: 749, y: 123) > Vector(x: 749, y: 142) > Vector(x: 653, y: 142))
Text: rgb(0,0,0) normal normal 400 16px Arial
[8, 123]: First
[44, 123]: level
[81, 123]: content
Text: rgb(0,0,0) normal normal 400 16px Arial
[620, 123]: ,
[630, 123]: ending
[682, 123]: first
Clip: Path (Vector(x: 8, y: 156) > Vector(x: 116, y: 156) > Vector(x: 116, y: 174) > Vector(x: 8, y: 174))
Fill: rgb(188,143,143)
Text: rgb(0,0,0) normal normal 400 16px Times New Roman
[653, 124]: something
[724, 124]: else
Transform: (348, 132) [0.99, 0.13, -0.13, 0.99, 0, 0]
Clip: Path (Vector(x: 128, y: 108) > Vector(x: 568, y: 108) > Vector(x: 568, y: 157) > Vector(x: 128, y: 157))
Text: rgb(0,0,0) normal normal 400 16px Arial
[8, 156]: something
[86, 156]: else
Transform: (379, 132) [0.99, 0.13, -0.13, 0.99, 0, 0]
Clip: Path (Vector(x: 138, y: 108) > Vector(x: 621, y: 108) > Vector(x: 621, y: 156) > Vector(x: 138, y: 156))
Fill: rgb(143,188,143)
Shape: rgb(255,0,0) Path (Vector(x: 128, y: 108) > Vector(x: 568, y: 108) > Vector(x: 553, y: 123) > Vector(x: 143, y: 123))
Shape: rgb(255,0,0) Path (Vector(x: 568, y: 108) > Vector(x: 568, y: 157) > Vector(x: 553, y: 142) > Vector(x: 553, y: 123))
Shape: rgb(255,0,0) Path (Vector(x: 568, y: 157) > Vector(x: 128, y: 157) > Vector(x: 143, y: 142) > Vector(x: 553, y: 142))
Shape: rgb(255,0,0) Path (Vector(x: 128, y: 157) > Vector(x: 128, y: 108) > Vector(x: 143, y: 123) > Vector(x: 143, y: 142))
Text: rgb(0,0,0) normal normal 400 16px Times New Roman
[143, 123]: with
[175, 123]: second
[224, 123]: level
[258, 123]: content
Text: rgb(0,0,0) normal normal 400 16px Times New Roman
[453, 123]: ,
[461, 123]: ending
[509, 123]: second
Transform: (381, 132) [0.33, -0.94, 0.94, 0.33, 0, 0]
Clip: Path (Vector(x: 310, y: 123) > Vector(x: 453, y: 123) > Vector(x: 453, y: 142) > Vector(x: 310, y: 142))
Shape: rgb(255,0,0) Path (Vector(x: 138, y: 108) > Vector(x: 621, y: 108) > Vector(x: 606, y: 123) > Vector(x: 153, y: 123))
Shape: rgb(255,0,0) Path (Vector(x: 621, y: 108) > Vector(x: 621, y: 156) > Vector(x: 606, y: 141) > Vector(x: 606, y: 123))
Shape: rgb(255,0,0) Path (Vector(x: 621, y: 156) > Vector(x: 138, y: 156) > Vector(x: 153, y: 141) > Vector(x: 606, y: 141))
Shape: rgb(255,0,0) Path (Vector(x: 138, y: 156) > Vector(x: 138, y: 108) > Vector(x: 153, y: 123) > Vector(x: 153, y: 141))
Text: rgb(0,0,0) normal normal 400 16px Arial
[153, 123]: with
[186, 123]: second
[242, 123]: level
[279, 123]: content
Text: rgb(0,0,0) normal normal 400 16px Arial
[493, 123]: ,
[501, 123]: ending
[554, 123]: second
Transform: (414, 132) [0.33, -0.94, 0.94, 0.33, 0, 0]
Clip: Path (Vector(x: 336, y: 123) > Vector(x: 493, y: 123) > Vector(x: 493, y: 141) > Vector(x: 336, y: 141))
Fill: rgb(95,158,160)
Text: rgb(0,0,0) normal normal 400 16px Times New Roman
[310, 123]: and
[337, 123]: third
[371, 123]: level
[406, 123]: content
Text: rgb(0,0,0) normal normal 400 16px Arial
[336, 123]: and
[367, 123]: third
[403, 123]: level
[440, 123]: content

6
tests/reftests/transform/rotate.html
View File

@ -36,7 +36,11 @@
-o-transform: rotate(45deg); /* Opera 10.50-12.00 */
transform:rotate(45deg);
}
</style
body {
font-family: Arial;
}
</style>
</head>
<body>
<div class="container">

5
tests/reftests/transform/translate.html
View File

@ -36,8 +36,11 @@
display: inline-block;
padding: 10px;
}
</style>
body {
font-family: Arial;
}
</style>
</head>
<body>
<div id="first">First level content <div id="second">with second level content <div id="third">and third level content</div>, ending second</div>, ending first</div>

60
tests/reftests/transform/translate.txt
View File

@ -1,37 +1,37 @@
Window: [800, 600]
Rectangle: [0, 0, 800, 600] rgba(0,0,0,0)
Opacity: 1
Clip: Path (Vector(x: 8, y: 108) > Vector(x: 699, y: 108) > Vector(x: 699, y: 207) > Vector(x: 8, y: 207))
Clip: Path (Vector(x: 8, y: 108) > Vector(x: 758, y: 108) > Vector(x: 758, y: 206) > Vector(x: 8, y: 206))
Fill: rgb(205,92,92)
Text: rgb(0,0,0) normal normal 400 16px Times New Roman
Text: rgb(0,0,0) normal normal 400 16px Arial
[18, 148]: First
[51, 148]: level
[86, 148]: content
Text: rgb(0,0,0) normal normal 400 16px Times New Roman
[608, 148]: ,
[616, 148]: ending
[664, 148]: first
Transform: (373, 157) [1, 0, 0, 1, 125, 0]
Clip: Path (Vector(x: 138, y: 118) > Vector(x: 608, y: 118) > Vector(x: 608, y: 197) > Vector(x: 138, y: 197))
[54, 148]: level
[91, 148]: content
Text: rgb(0,0,0) normal normal 400 16px Arial
[660, 148]: ,
[670, 148]: ending
[722, 148]: first
Transform: (404, 157) [1, 0, 0, 1, 125, 0]
Clip: Path (Vector(x: 148, y: 118) > Vector(x: 661, y: 118) > Vector(x: 661, y: 196) > Vector(x: 148, y: 196))
Fill: rgb(143,188,143)
Shape: rgb(255,0,0) Path (Vector(x: 138, y: 118) > Vector(x: 608, y: 118) > Vector(x: 598, y: 128) > Vector(x: 148, y: 128))
Shape: rgb(255,0,0) Path (Vector(x: 608, y: 118) > Vector(x: 608, y: 197) > Vector(x: 598, y: 187) > Vector(x: 598, y: 128))
Shape: rgb(255,0,0) Path (Vector(x: 608, y: 197) > Vector(x: 138, y: 197) > Vector(x: 148, y: 187) > Vector(x: 598, y: 187))
Shape: rgb(255,0,0) Path (Vector(x: 138, y: 197) > Vector(x: 138, y: 118) > Vector(x: 148, y: 128) > Vector(x: 148, y: 187))
Text: rgb(0,0,0) normal normal 400 16px Times New Roman
[158, 148]: with
[190, 148]: second
[238, 148]: level
[274, 148]: content
Text: rgb(0,0,0) normal normal 400 16px Times New Roman
[488, 148]: ,
[496, 148]: ending
[544, 148]: second
Transform: (425, 188) [1, 0, 0, 1, 100, -25]
Clip: Path (Vector(x: 325, y: 138) > Vector(x: 488, y: 138) > Vector(x: 488, y: 177) > Vector(x: 325, y: 177))
Shape: rgb(255,0,0) Path (Vector(x: 148, y: 118) > Vector(x: 661, y: 118) > Vector(x: 651, y: 128) > Vector(x: 158, y: 128))
Shape: rgb(255,0,0) Path (Vector(x: 661, y: 118) > Vector(x: 661, y: 196) > Vector(x: 651, y: 186) > Vector(x: 651, y: 128))
Shape: rgb(255,0,0) Path (Vector(x: 661, y: 196) > Vector(x: 148, y: 196) > Vector(x: 158, y: 186) > Vector(x: 651, y: 186))
Shape: rgb(255,0,0) Path (Vector(x: 148, y: 196) > Vector(x: 148, y: 118) > Vector(x: 158, y: 128) > Vector(x: 158, y: 186))
Text: rgb(0,0,0) normal normal 400 16px Arial
[168, 148]: with
[201, 148]: second
[257, 148]: level
[294, 148]: content
Text: rgb(0,0,0) normal normal 400 16px Arial
[527, 148]: ,
[537, 148]: ending
[589, 148]: second
Transform: (451, 188) [1, 0, 0, 1, 100, -25]
Clip: Path (Vector(x: 351, y: 138) > Vector(x: 528, y: 138) > Vector(x: 528, y: 176) > Vector(x: 351, y: 176))
Fill: rgb(95,158,160)
Text: rgb(0,0,0) normal normal 400 16px Times New Roman
[335, 148]: and
[362, 148]: third
[396, 148]: level
[431, 148]: content
Text: rgb(0,0,0) normal normal 400 16px Arial
[361, 148]: and
[392, 148]: third
[428, 148]: level
[465, 148]: content

5
tests/reftests/visibility.html
View File

@ -11,8 +11,11 @@
.none {
display:none
}
</style>
body {
font-family: Arial;
}
</style>
</head>
<body>
<div>

36
tests/reftests/visibility.txt
View File

@ -2,24 +2,24 @@ Window: [800, 600]
Rectangle: [0, 0, 800, 600] rgba(0,0,0,0)
Opacity: 1
Shape: rgb(0,0,0) Path (Vector(x: 8, y: 8) > Vector(x: 792, y: 8) > Vector(x: 790, y: 10) > Vector(x: 10, y: 10))
Shape: rgb(0,0,0) Path (Vector(x: 792, y: 8) > Vector(x: 792, y: 178) > Vector(x: 790, y: 176) > Vector(x: 790, y: 10))
Shape: rgb(0,0,0) Path (Vector(x: 792, y: 178) > Vector(x: 8, y: 178) > Vector(x: 10, y: 176) > Vector(x: 790, y: 176))
Shape: rgb(0,0,0) Path (Vector(x: 8, y: 178) > Vector(x: 8, y: 8) > Vector(x: 10, y: 10) > Vector(x: 10, y: 176))
Text: rgb(0,0,0) normal normal 700 32px Times New Roman
Shape: rgb(0,0,0) Path (Vector(x: 792, y: 8) > Vector(x: 792, y: 176) > Vector(x: 790, y: 174) > Vector(x: 790, y: 10))
Shape: rgb(0,0,0) Path (Vector(x: 792, y: 176) > Vector(x: 8, y: 176) > Vector(x: 10, y: 174) > Vector(x: 790, y: 174))
Shape: rgb(0,0,0) Path (Vector(x: 8, y: 176) > Vector(x: 8, y: 8) > Vector(x: 10, y: 10) > Vector(x: 10, y: 174))
Text: rgb(0,0,0) normal normal 700 32px Arial
[10, 32]: Display:none
[198, 32]: and
[257, 32]: visible:hidden
[457, 32]: tests
Shape: rgb(0,0,0) Path (Vector(x: 10, y: 89) > Vector(x: 790, y: 89) > Vector(x: 788, y: 91) > Vector(x: 12, y: 91))
Shape: rgb(0,0,0) Path (Vector(x: 790, y: 89) > Vector(x: 790, y: 112) > Vector(x: 788, y: 110) > Vector(x: 788, y: 91))
[220, 32]: and
[286, 32]: visible:hidden
[510, 32]: tests
Shape: rgb(0,0,0) Path (Vector(x: 10, y: 90) > Vector(x: 790, y: 90) > Vector(x: 788, y: 92) > Vector(x: 12, y: 92))
Shape: rgb(0,0,0) Path (Vector(x: 790, y: 90) > Vector(x: 790, y: 112) > Vector(x: 788, y: 110) > Vector(x: 788, y: 92))
Shape: rgb(0,0,0) Path (Vector(x: 790, y: 112) > Vector(x: 10, y: 112) > Vector(x: 12, y: 110) > Vector(x: 788, y: 110))
Shape: rgb(0,0,0) Path (Vector(x: 10, y: 112) > Vector(x: 10, y: 89) > Vector(x: 12, y: 91) > Vector(x: 12, y: 110))
Text: rgb(0,0,0) normal normal 400 16px Times New Roman
Shape: rgb(0,0,0) Path (Vector(x: 10, y: 112) > Vector(x: 10, y: 90) > Vector(x: 12, y: 92) > Vector(x: 12, y: 110))
Text: rgb(0,0,0) normal normal 400 16px Arial
[12, 92]: This
[44, 92]: should
[91, 92]: be
[110, 92]: visible
Shape: rgb(0,0,0) Path (Vector(x: 10, y: 143) > Vector(x: 790, y: 143) > Vector(x: 789, y: 144) > Vector(x: 11, y: 144))
Shape: rgb(0,0,0) Path (Vector(x: 790, y: 143) > Vector(x: 790, y: 145) > Vector(x: 789, y: 144) > Vector(x: 789, y: 144))
Shape: rgb(0,0,0) Path (Vector(x: 790, y: 145) > Vector(x: 10, y: 145) > Vector(x: 11, y: 144) > Vector(x: 789, y: 144))
Shape: rgb(0,0,0) Path (Vector(x: 10, y: 145) > Vector(x: 10, y: 143) > Vector(x: 11, y: 144) > Vector(x: 11, y: 144))
[47, 92]: should
[98, 92]: be
[120, 92]: visible
Shape: rgb(0,0,0) Path (Vector(x: 10, y: 142) > Vector(x: 790, y: 142) > Vector(x: 789, y: 143) > Vector(x: 11, y: 143))
Shape: rgb(0,0,0) Path (Vector(x: 790, y: 142) > Vector(x: 790, y: 144) > Vector(x: 789, y: 143) > Vector(x: 789, y: 143))
Shape: rgb(0,0,0) Path (Vector(x: 790, y: 144) > Vector(x: 10, y: 144) > Vector(x: 11, y: 143) > Vector(x: 789, y: 143))
Shape: rgb(0,0,0) Path (Vector(x: 10, y: 144) > Vector(x: 10, y: 142) > Vector(x: 11, y: 143) > Vector(x: 11, y: 143))

3
tests/reftests/zindex/z-index13.html
View File

@ -21,6 +21,9 @@
position:absolute;
top:0;left:0;
}
body {
font-family: Arial;
}
</style></head>
<body>

2
tests/reftests/zindex/z-index13.txt
View File

@ -5,5 +5,5 @@ Clip: Path (Vector(x: 8, y: 8) > Vector(x: 208, y: 8) > Vector(x: 208, y: 208) >
Fill: rgb(0,255,255)
Clip: Path (Vector(x: 8, y: 8) > Vector(x: 108, y: 8) > Vector(x: 108, y: 108) > Vector(x: 8, y: 108))
Fill: rgb(0,128,0)
Text: rgb(0,0,0) normal normal 400 16px Times New Roman
Text: rgb(0,0,0) normal normal 400 16px Arial
[8, 8]: outer

1
tests/reftests/zindex/z-index14.html
View File

@ -8,6 +8,7 @@
* {margin:0;padding:0;}
body {
background-color: green;
font-family: Arial;
}
#div1 {
background-color:cyan;

4
tests/reftests/zindex/z-index14.txt
View File

@ -1,9 +1,9 @@
Window: [800, 600]
Rectangle: [0, 0, 800, 600] rgb(0,128,0)
Opacity: 1
Clip: Path (Vector(x: 0, y: 0) > Vector(x: 800, y: 0) > Vector(x: 800, y: 19) > Vector(x: 0, y: 19))
Clip: Path (Vector(x: 0, y: 0) > Vector(x: 800, y: 0) > Vector(x: 800, y: 18) > Vector(x: 0, y: 18))
Fill: rgb(0,128,0)
Clip: Path (Vector(x: 0, y: 0) > Vector(x: 200, y: 0) > Vector(x: 200, y: 200) > Vector(x: 0, y: 200))
Fill: rgb(0,255,255)
Text: rgb(0,0,0) normal normal 400 16px Times New Roman
Text: rgb(0,0,0) normal normal 400 16px Arial
[0, 0]: body

3
tests/reftests/zindex/z-index15.html
View File

@ -18,6 +18,9 @@
position:absolute;
top:0; left:0;
}
body {
font-family: Arial;
}
</style></head>
<body>body

4
tests/reftests/zindex/z-index15.txt
View File

@ -3,7 +3,7 @@ Rectangle: [0, 0, 800, 600] rgb(128,128,128)
Opacity: 1
Clip: Path (Vector(x: 0, y: 0) > Vector(x: 200, y: 0) > Vector(x: 200, y: 200) > Vector(x: 0, y: 200))
Fill: rgb(0,255,255)
Clip: Path (Vector(x: 0, y: 0) > Vector(x: 800, y: 0) > Vector(x: 800, y: 19) > Vector(x: 0, y: 19))
Clip: Path (Vector(x: 0, y: 0) > Vector(x: 800, y: 0) > Vector(x: 800, y: 18) > Vector(x: 0, y: 18))
Fill: rgb(0,128,0)
Text: rgb(0,0,0) normal normal 400 16px Times New Roman
Text: rgb(0,0,0) normal normal 400 16px Arial
[0, 0]: body

3
tests/reftests/zindex/z-index16.html
View File

@ -10,6 +10,9 @@
width: 3in;
height: 3in;
}
body {
font-family: Arial;
}
</STYLE>
<script type="text/javascript" src="../../test.js"></script>
</HEAD>

46
tests/reftests/zindex/z-index16.txt
View File

@ -1,31 +1,31 @@
Window: [800, 600]
Rectangle: [0, 0, 800, 600] rgba(0,0,0,0)
Opacity: 1
Text: rgb(0,0,0) normal normal 400 16px Times New Roman
Text: rgb(0,0,0) normal normal 400 16px Arial
[8, 16]: This
[40, 16]: text
[68, 16]: will
[97, 16]: be
[116, 16]: beneath
[170, 16]: everything.
[43, 16]: text
[73, 16]: will
[100, 16]: be
[122, 16]: beneath
[184, 16]: everything.
Clip: Path (Vector(x: 192, y: 192) > Vector(x: 480, y: 192) > Vector(x: 480, y: 480) > Vector(x: 192, y: 480))
Draw image: Image ("/tests/assets/image.jpg") (source: [0, 0, 75, 75]) (destination: [0, 0, 75, 75])
Text: rgb(0,0,0) normal normal 400 16px Times New Roman
Text: rgb(0,0,0) normal normal 400 16px Arial
[192, 192]: This
[224, 192]: text
[252, 192]: will
[281, 192]: underlay
[341, 192]: text1,
[381, 192]: but
[406, 192]: overlay
[458, 192]: the
[192, 211]: butterfly
[251, 211]: image
Text: rgb(0,0,0) normal normal 400 16px Times New Roman
[227, 192]: text
[257, 192]: will
[284, 192]: underlay
[349, 192]: text1,
[393, 192]: but
[420, 192]: overlay
[192, 210]: the
[219, 210]: butterfly
[280, 210]: image
Text: rgb(0,0,0) normal normal 400 16px Arial
[192, 192]: This
[224, 192]: text
[252, 192]: will
[281, 192]: overlay
[333, 192]: the
[357, 192]: butterfly
[416, 192]: image.
[227, 192]: text
[257, 192]: will
[284, 192]: overlay
[340, 192]: the
[366, 192]: butterfly
[428, 192]: image.

3
tests/reftests/zindex/z-index17.html
View File

@ -16,6 +16,9 @@
body {
background: violet;
}
body {
font-family: Arial;
}
</style>
<script type="text/javascript" src="../../test.js"></script>
</head>

10
tests/reftests/zindex/z-index17.txt
View File

@ -5,9 +5,9 @@ Clip: Path (Vector(x: 8, y: 8) > Vector(x: 792, y: 8) > Vector(x: 792, y: 8) > V
Fill: rgb(238,130,238)
Clip: Path (Vector(x: 0, y: 0) > Vector(x: 800, y: 0) > Vector(x: 800, y: 100) > Vector(x: 0, y: 100))
Fill: rgb(85,107,47)
Text: rgb(0,0,0) normal normal 400 16px Times New Roman
Text: rgb(0,0,0) normal normal 400 16px Arial
[0, 0]: fixed
[37, 0]: z
[44, 0]: -
[49, 0]: index
[89, 0]: 10
[38, 0]: z
[46, 0]: -
[52, 0]: index
[94, 0]: 10

3
tests/reftests/zindex/z-index18.html
View File

@ -57,6 +57,9 @@
width: 100px;
height: 100px;
}
body {
font-family: Arial;
}
</style>
<script type="text/javascript" src="../../test.js"></script>
</head>

24
tests/reftests/zindex/z-index18.txt
View File

@ -5,43 +5,43 @@ Clip: Path (Vector(x: 8, y: 8) > Vector(x: 792, y: 8) > Vector(x: 792, y: 308) >
Fill: rgb(238,130,238)
Clip: Path (Vector(x: 8, y: 8) > Vector(x: 808, y: 8) > Vector(x: 808, y: 308) > Vector(x: 8, y: 308))
Fill: rgb(0,128,0)
Text: rgb(0,0,0) normal normal 400 16px Times New Roman
Text: rgb(0,0,0) normal normal 400 16px Arial
[8, 8]: a
Clip: Path (Vector(x: 8, y: 8) > Vector(x: 808, y: 8) > Vector(x: 808, y: 308) > Vector(x: 8, y: 308))
Fill: rgb(0,128,0)
Text: rgb(0,0,0) normal normal 400 16px Times New Roman
Text: rgb(0,0,0) normal normal 400 16px Arial
[8, 8]: b
Text: rgb(0,0,0) normal normal 400 16px Times New Roman
Text: rgb(0,0,0) normal normal 400 16px Arial
[24, 18]: c
Text: rgb(0,0,0) normal normal 400 16px Times New Roman
Text: rgb(0,0,0) normal normal 400 16px Arial
[24, 18]: d
Text: rgb(0,0,0) normal normal 400 16px Times New Roman
Text: rgb(0,0,0) normal normal 400 16px Arial
[24, 18]: e
Clip: Path (Vector(x: 24, y: 18) > Vector(x: 824, y: 18) > Vector(x: 824, y: 318) > Vector(x: 24, y: 318))
Fill: rgb(255,0,0)
Text: rgb(0,0,0) normal normal 400 16px Times New Roman
Text: rgb(0,0,0) normal normal 400 16px Arial
[24, 18]: f
Clip: Path (Vector(x: 24, y: 18) > Vector(x: 424, y: 18) > Vector(x: 424, y: 318) > Vector(x: 24, y: 318))
Fill: rgb(0,0,255)
Text: rgb(0,0,0) normal normal 400 16px Times New Roman
Text: rgb(0,0,0) normal normal 400 16px Arial
[24, 18]: g
Clip: Path (Vector(x: 24, y: 18) > Vector(x: 224, y: 18) > Vector(x: 224, y: 218) > Vector(x: 24, y: 218))
Fill: rgb(255,165,0)
Text: rgb(0,0,0) normal normal 400 16px Times New Roman
Text: rgb(0,0,0) normal normal 400 16px Arial
[24, 18]: h
Clip: Path (Vector(x: -24, y: 18) > Vector(x: 776, y: 18) > Vector(x: 776, y: 118) > Vector(x: -24, y: 118))
Fill: rgb(128,0,128)
Text: rgb(0,0,0) normal normal 400 16px Times New Roman
Text: rgb(0,0,0) normal normal 400 16px Arial
[-24, 18]: i
Clip: Path (Vector(x: 24, y: 68) > Vector(x: 824, y: 68) > Vector(x: 824, y: 168) > Vector(x: 24, y: 168))
Fill: rgb(255,192,203)
Text: rgb(0,0,0) normal normal 400 16px Times New Roman
Text: rgb(0,0,0) normal normal 400 16px Arial
[24, 68]: j
Clip: Path (Vector(x: 64, y: 98) > Vector(x: 864, y: 98) > Vector(x: 864, y: 198) > Vector(x: 64, y: 198))
Fill: rgb(0,0,128)
Text: rgb(0,0,0) normal normal 400 16px Times New Roman
Text: rgb(0,0,0) normal normal 400 16px Arial
[64, 98]: k
Clip: Path (Vector(x: 24, y: 18) > Vector(x: 124, y: 18) > Vector(x: 124, y: 118) > Vector(x: 24, y: 118))
Fill: rgb(165,42,42)
Text: rgb(0,0,0) normal normal 400 16px Times New Roman
Text: rgb(0,0,0) normal normal 400 16px Arial
[24, 18]: l

32
tests/reftests/zindex/z-index3.txt
View File

@ -52,15 +52,6 @@ Text: rgb(0,0,0) normal normal 400 12px Arial
Text: rgb(0,0,0) normal normal 700 12px Arial
[92, 74]: LEVEL
[134, 74]: #2
Clip: Path (Vector(x: 197, y: 169) > Vector(x: 306, y: 169) > Vector(x: 306, y: 186) > Vector(x: 197, y: 186))
Fill: rgb(221,221,255)
Shape: rgb(0,0,153) Path (Vector(x: 197, y: 169) > Vector(x: 306, y: 169) > Vector(x: 304, y: 171) > Vector(x: 199, y: 171))
Shape: rgb(0,0,153) Path (Vector(x: 306, y: 169) > Vector(x: 306, y: 186) > Vector(x: 304, y: 184) > Vector(x: 304, y: 171))
Shape: rgb(0,0,153) Path (Vector(x: 306, y: 186) > Vector(x: 197, y: 186) > Vector(x: 199, y: 184) > Vector(x: 304, y: 184))
Shape: rgb(0,0,153) Path (Vector(x: 197, y: 186) > Vector(x: 197, y: 169) > Vector(x: 199, y: 171) > Vector(x: 199, y: 184))
Text: rgb(0,0,0) normal normal 700 12px Arial
[204, 171]: LEVEL
[246, 171]: #3
Clip: Path (Vector(x: 197, y: 81) > Vector(x: 306, y: 81) > Vector(x: 306, y: 98) > Vector(x: 197, y: 98))
Fill: rgb(221,221,255)
Shape: rgb(0,0,153) Path (Vector(x: 197, y: 81) > Vector(x: 306, y: 81) > Vector(x: 304, y: 83) > Vector(x: 199, y: 83))
@ -70,6 +61,15 @@ Shape: rgb(0,0,153) Path (Vector(x: 197, y: 98) > Vector(x: 197, y: 81) > Vector
Text: rgb(0,0,0) normal normal 700 12px Arial
[204, 83]: LEVEL
[246, 83]: #3
Clip: Path (Vector(x: 197, y: 98) > Vector(x: 306, y: 98) > Vector(x: 306, y: 116) > Vector(x: 197, y: 116))
Fill: rgb(221,221,255)
Shape: rgb(0,0,153) Path (Vector(x: 197, y: 98) > Vector(x: 306, y: 98) > Vector(x: 304, y: 100) > Vector(x: 199, y: 100))
Shape: rgb(0,0,153) Path (Vector(x: 306, y: 98) > Vector(x: 306, y: 116) > Vector(x: 304, y: 114) > Vector(x: 304, y: 100))
Shape: rgb(0,0,153) Path (Vector(x: 306, y: 116) > Vector(x: 197, y: 116) > Vector(x: 199, y: 114) > Vector(x: 304, y: 114))
Shape: rgb(0,0,153) Path (Vector(x: 197, y: 116) > Vector(x: 197, y: 98) > Vector(x: 199, y: 100) > Vector(x: 199, y: 114))
Text: rgb(0,0,0) normal normal 700 12px Arial
[204, 100]: LEVEL
[246, 100]: #3
Clip: Path (Vector(x: 197, y: 116) > Vector(x: 306, y: 116) > Vector(x: 306, y: 134) > Vector(x: 197, y: 134))
Fill: rgb(221,221,255)
Shape: rgb(0,0,153) Path (Vector(x: 197, y: 116) > Vector(x: 306, y: 116) > Vector(x: 304, y: 118) > Vector(x: 199, y: 118))
@ -97,15 +97,15 @@ Shape: rgb(0,0,153) Path (Vector(x: 197, y: 169) > Vector(x: 197, y: 151) > Vect
Text: rgb(0,0,0) normal normal 700 12px Arial
[204, 153]: LEVEL
[246, 153]: #3
Clip: Path (Vector(x: 197, y: 98) > Vector(x: 306, y: 98) > Vector(x: 306, y: 116) > Vector(x: 197, y: 116))
Clip: Path (Vector(x: 197, y: 169) > Vector(x: 306, y: 169) > Vector(x: 306, y: 186) > Vector(x: 197, y: 186))
Fill: rgb(221,221,255)
Shape: rgb(0,0,153) Path (Vector(x: 197, y: 98) > Vector(x: 306, y: 98) > Vector(x: 304, y: 100) > Vector(x: 199, y: 100))
Shape: rgb(0,0,153) Path (Vector(x: 306, y: 98) > Vector(x: 306, y: 116) > Vector(x: 304, y: 114) > Vector(x: 304, y: 100))
Shape: rgb(0,0,153) Path (Vector(x: 306, y: 116) > Vector(x: 197, y: 116) > Vector(x: 199, y: 114) > Vector(x: 304, y: 114))
Shape: rgb(0,0,153) Path (Vector(x: 197, y: 116) > Vector(x: 197, y: 98) > Vector(x: 199, y: 100) > Vector(x: 199, y: 114))
Shape: rgb(0,0,153) Path (Vector(x: 197, y: 169) > Vector(x: 306, y: 169) > Vector(x: 304, y: 171) > Vector(x: 199, y: 171))
Shape: rgb(0,0,153) Path (Vector(x: 306, y: 169) > Vector(x: 306, y: 186) > Vector(x: 304, y: 184) > Vector(x: 304, y: 171))
Shape: rgb(0,0,153) Path (Vector(x: 306, y: 186) > Vector(x: 197, y: 186) > Vector(x: 199, y: 184) > Vector(x: 304, y: 184))
Shape: rgb(0,0,153) Path (Vector(x: 197, y: 186) > Vector(x: 197, y: 169) > Vector(x: 199, y: 171) > Vector(x: 199, y: 184))
Text: rgb(0,0,0) normal normal 700 12px Arial
[204, 100]: LEVEL
[246, 100]: #3
[204, 171]: LEVEL
[246, 171]: #3
Clip: Path (Vector(x: 197, y: 186) > Vector(x: 306, y: 186) > Vector(x: 306, y: 204) > Vector(x: 197, y: 204))
Fill: rgb(221,221,255)
Shape: rgb(0,0,153) Path (Vector(x: 197, y: 186) > Vector(x: 306, y: 186) > Vector(x: 304, y: 188) > Vector(x: 199, y: 188))

6
tests/reftests/zindex/z-index4.html
View File

@ -21,7 +21,11 @@
background-color: #ffdddd;
z-index: -1;
}
</style></head>
body {
font-family: Arial;
}
</style></head>
<body>
<div class="lev1">

8
tests/reftests/zindex/z-index4.txt
View File

@ -9,15 +9,15 @@ Shape: rgb(102,153,102) Path (Vector(x: 8, y: 8) > Vector(x: 267, y: 8) > Vector
Shape: rgb(102,153,102) Path (Vector(x: 267, y: 8) > Vector(x: 267, y: 82) > Vector(x: 265, y: 80) > Vector(x: 265, y: 10))
Shape: rgb(102,153,102) Path (Vector(x: 267, y: 82) > Vector(x: 8, y: 82) > Vector(x: 10, y: 80) > Vector(x: 265, y: 80))
Shape: rgb(102,153,102) Path (Vector(x: 8, y: 82) > Vector(x: 8, y: 8) > Vector(x: 10, y: 10) > Vector(x: 10, y: 80))
Text: rgb(0,0,0) normal normal 400 16px Times New Roman
Text: rgb(0,0,0) normal normal 400 16px Arial
[15, 10]: LEVEL
[70, 10]: #1
[69, 10]: #1
Clip: Path (Vector(x: 8, y: 82) > Vector(x: 267, y: 82) > Vector(x: 267, y: 156) > Vector(x: 8, y: 156))
Fill: rgb(204,255,204)
Shape: rgb(102,153,102) Path (Vector(x: 8, y: 82) > Vector(x: 267, y: 82) > Vector(x: 265, y: 84) > Vector(x: 10, y: 84))
Shape: rgb(102,153,102) Path (Vector(x: 267, y: 82) > Vector(x: 267, y: 156) > Vector(x: 265, y: 154) > Vector(x: 265, y: 84))
Shape: rgb(102,153,102) Path (Vector(x: 267, y: 156) > Vector(x: 8, y: 156) > Vector(x: 10, y: 154) > Vector(x: 265, y: 154))
Shape: rgb(102,153,102) Path (Vector(x: 8, y: 156) > Vector(x: 8, y: 82) > Vector(x: 10, y: 84) > Vector(x: 10, y: 154))
Text: rgb(0,0,0) normal normal 400 16px Times New Roman
Text: rgb(0,0,0) normal normal 400 16px Arial
[15, 84]: LEVEL
[70, 84]: #1
[69, 84]: #1

3
tests/reftests/zindex/z-index5.html
View File

@ -20,6 +20,9 @@
width: 250px;
background-color: #ffdddd;
}
body {
font-family: Arial;
}
</style></head>
<body>

8
tests/reftests/zindex/z-index5.txt
View File

@ -7,9 +7,9 @@ Shape: rgb(102,153,102) Path (Vector(x: 8, y: 8) > Vector(x: 267, y: 8) > Vector
Shape: rgb(102,153,102) Path (Vector(x: 267, y: 8) > Vector(x: 267, y: 82) > Vector(x: 265, y: 80) > Vector(x: 265, y: 10))
Shape: rgb(102,153,102) Path (Vector(x: 267, y: 82) > Vector(x: 8, y: 82) > Vector(x: 10, y: 80) > Vector(x: 265, y: 80))
Shape: rgb(102,153,102) Path (Vector(x: 8, y: 82) > Vector(x: 8, y: 8) > Vector(x: 10, y: 10) > Vector(x: 10, y: 80))
Text: rgb(0,0,0) normal normal 400 16px Times New Roman
Text: rgb(0,0,0) normal normal 400 16px Arial
[15, 10]: LEVEL
[70, 10]: #1
[69, 10]: #1
Clip: Path (Vector(x: 8, y: 0) > Vector(x: 258, y: 0) > Vector(x: 258, y: 600) > Vector(x: 8, y: 600))
Fill: rgb(255,221,221)
Clip: Path (Vector(x: 8, y: 82) > Vector(x: 267, y: 82) > Vector(x: 267, y: 156) > Vector(x: 8, y: 156))
@ -18,6 +18,6 @@ Shape: rgb(102,153,102) Path (Vector(x: 8, y: 82) > Vector(x: 267, y: 82) > Vect
Shape: rgb(102,153,102) Path (Vector(x: 267, y: 82) > Vector(x: 267, y: 156) > Vector(x: 265, y: 154) > Vector(x: 265, y: 84))
Shape: rgb(102,153,102) Path (Vector(x: 267, y: 156) > Vector(x: 8, y: 156) > Vector(x: 10, y: 154) > Vector(x: 265, y: 154))
Shape: rgb(102,153,102) Path (Vector(x: 8, y: 156) > Vector(x: 8, y: 82) > Vector(x: 10, y: 84) > Vector(x: 10, y: 154))
Text: rgb(0,0,0) normal normal 400 16px Times New Roman
Text: rgb(0,0,0) normal normal 400 16px Arial
[15, 84]: LEVEL
[70, 84]: #1
[69, 84]: #1

3
tests/reftests/zindex/z-index6.html
View File

@ -23,6 +23,9 @@
div.z1 {
z-index: 1;
}
body {
font-family: Arial;
}
</style></head>
<body>

16
tests/reftests/zindex/z-index6.txt
View File

@ -7,9 +7,9 @@ Shape: rgb(102,153,102) Path (Vector(x: 28, y: 113) > Vector(x: 287, y: 113) > V
Shape: rgb(102,153,102) Path (Vector(x: 287, y: 113) > Vector(x: 287, y: 187) > Vector(x: 285, y: 185) > Vector(x: 285, y: 115))
Shape: rgb(102,153,102) Path (Vector(x: 287, y: 187) > Vector(x: 28, y: 187) > Vector(x: 30, y: 185) > Vector(x: 285, y: 185))
Shape: rgb(102,153,102) Path (Vector(x: 28, y: 187) > Vector(x: 28, y: 113) > Vector(x: 30, y: 115) > Vector(x: 30, y: 185))
Text: rgb(0,0,0) normal normal 400 16px Times New Roman
Text: rgb(0,0,0) normal normal 400 16px Arial
[35, 115]: z
[42, 115]: -
[43, 115]: -
[48, 115]: index:0
Clip: Path (Vector(x: 8, y: 82) > Vector(x: 267, y: 82) > Vector(x: 267, y: 156) > Vector(x: 8, y: 156))
Fill: rgb(204,255,204)
@ -17,18 +17,18 @@ Shape: rgb(102,153,102) Path (Vector(x: 8, y: 82) > Vector(x: 267, y: 82) > Vect
Shape: rgb(102,153,102) Path (Vector(x: 267, y: 82) > Vector(x: 267, y: 156) > Vector(x: 265, y: 154) > Vector(x: 265, y: 84))
Shape: rgb(102,153,102) Path (Vector(x: 267, y: 156) > Vector(x: 8, y: 156) > Vector(x: 10, y: 154) > Vector(x: 265, y: 154))
Shape: rgb(102,153,102) Path (Vector(x: 8, y: 156) > Vector(x: 8, y: 82) > Vector(x: 10, y: 84) > Vector(x: 10, y: 154))
Text: rgb(0,0,0) normal normal 400 16px Times New Roman
Text: rgb(0,0,0) normal normal 400 16px Arial
[15, 84]: default
[64, 84]: z
[70, 84]: -
[76, 84]: index
[68, 84]: z
[76, 84]: -
[81, 84]: index
Clip: Path (Vector(x: 8, y: 156) > Vector(x: 267, y: 156) > Vector(x: 267, y: 230) > Vector(x: 8, y: 230))
Fill: rgb(204,255,204)
Shape: rgb(102,153,102) Path (Vector(x: 8, y: 156) > Vector(x: 267, y: 156) > Vector(x: 265, y: 158) > Vector(x: 10, y: 158))
Shape: rgb(102,153,102) Path (Vector(x: 267, y: 156) > Vector(x: 267, y: 230) > Vector(x: 265, y: 228) > Vector(x: 265, y: 158))
Shape: rgb(102,153,102) Path (Vector(x: 267, y: 230) > Vector(x: 8, y: 230) > Vector(x: 10, y: 228) > Vector(x: 265, y: 228))
Shape: rgb(102,153,102) Path (Vector(x: 8, y: 230) > Vector(x: 8, y: 156) > Vector(x: 10, y: 158) > Vector(x: 10, y: 228))
Text: rgb(0,0,0) normal normal 400 16px Times New Roman
Text: rgb(0,0,0) normal normal 400 16px Arial
[15, 158]: z
[22, 158]: -
[23, 158]: -
[28, 158]: index:1

4
tests/test.js
View File

@ -40,7 +40,9 @@ var REFTEST = window.location.search.indexOf('reftest') !== -1;
promise.then(function(output) {
var canvas = Array.isArray(targets) ? output[0] : output;
if (Array.isArray(targets)) {
console.log(output[1]);
console.log(output[1].split('\n').map(function(line, i) {
return (i + 1) + ':' + line;
}).join('\n'));
}
var $canvas = $(canvas),
finishTime = new Date();

12
tests/testrunner.js
View File

@ -177,8 +177,8 @@ const assertPath = (result, expected, desc) => {
break;
case 'Transform':
expect(RESULT.x).to.be.closeTo(args.x, 5, `${desc} x`);
expect(RESULT.y).to.be.closeTo(args.y, 5, `${desc} y`);
expect(RESULT.x).to.be.closeTo(args.x, 10, `${desc} x`);
expect(RESULT.y).to.be.closeTo(args.y, 10, `${desc} y`);
expect(RESULT.matrix).to.equal(
args.matrix,
`${desc} matrix`
@ -186,8 +186,8 @@ const assertPath = (result, expected, desc) => {
break;
case 'Repeat':
expect(RESULT.x).to.be.closeTo(args.x, 5, `${desc} x`);
expect(RESULT.y).to.be.closeTo(args.y, 5, `${desc} y`);
expect(RESULT.x).to.be.closeTo(args.x, 10, `${desc} x`);
expect(RESULT.y).to.be.closeTo(args.y, 10, `${desc} y`);
expect(RESULT.width).to.equal(
args.width,
`${desc} width`
@ -204,8 +204,8 @@ const assertPath = (result, expected, desc) => {
break;
case 'Gradient':
expect(RESULT.x).to.be.closeTo(args.x, 5, `${desc} x`);
expect(RESULT.y).to.be.closeTo(args.y, 5, `${desc} y`);
expect(RESULT.x).to.be.closeTo(args.x, 10, `${desc} x`);
expect(RESULT.y).to.be.closeTo(args.y, 10, `${desc} y`);
expect(RESULT.x0).to.be.closeTo(
args.x0,
5,