blob: d54c243ac6e496cad07c48cba98db5b49e9c2b8f (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
|
<!DOCTYPE html>
<!--
This is a bunch of tests that verify we properly handle weird corner cases
in shadow bounding boxes.
Problem 1: parts of text that are seemingly hidden (as in overflow:hidden)
may actually be visible in shadows, because they include an offset. We can
mess this up in two ways:
1a. we completely culled a glyph from existence for being out of view
1b. we have all the glyphs but are clipping parts out in the shadow
Problem 2: shadows that are defined by the ::selection pseudo-class are
trapped inside the local selection rect of the item. This means they
*can and should* sometimes get weirdly clipped (shadow6 and shadow7 in
version 2 of this test). Also just more generally selections take a bunch
of special paths in text styling so they are included to make sure both
paths are tested.
We messed all of these up for webrender because it handles shadows in a very
different way from non-webrender.
The selection-box is inherently implementation-specific, so I apologize in
advanced if this test breaks when you tweak how selections work. Hopefully
only shadow6 needs to be tweaked?
-->
<html class="reftest-wait"><head>
<script type="text/javascript">
function onload() {
var range = document.createRange();
range.selectNodeContents(document.getElementById("selectMe"));
var sel = window.getSelection();
sel.removeAllRanges();
sel.addRange(range);
document.documentElement.className = '';
}
</script>
<style>
body {
font-size: 60px;
position: absolute;
margin: 0px;
padding: 0px;
}
div {
position: absolute;
margin: 0px;
padding: 0px;
}
div::selection {
/* hide all selection boxes for convenience */
background-color: transparent;
}
#shadow1 {
text-shadow: 80px 50px 0px;
top: -30px;
left: -60px;
}
#shadow2 {
text-shadow: 80px 50px 10px;
top: 100px;
left: -60px;
}
#shadow3 {
text-shadow: 80px 50px 10px;
top: -30px;
left: 100px;
}
#shadow4 {
top: 200px;
left: -60px;
}
#shadow4::selection {
text-shadow: 20px 5px 10px;
}
#shadow5 {
top: -30px;
left: 250px;
}
#shadow5::selection {
text-shadow: 20px 5px 10px;
}
</style>
</head><body id="selectMe" onload="onload()">
<div id="shadow1">hello</div>
<div id="shadow2">hello</div>
<div id="shadow3">hello</div>
<div id="shadow4">hello </div>
<div id="shadow5">hello </div>
</body></html>
|
