Use tree order when z-index is the same

This commit is contained in:
MoyuScript
2017-08-09 11:52:42 +08:00
parent f3ade251e4
commit a09f38ba7c
36 changed files with 392 additions and 337 deletions

View File

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

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

View File

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

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

View File

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

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

View File

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

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.

View File

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

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

View File

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

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

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))

View File

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

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

View File

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

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

View File

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

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