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
95
96
97
98
99
|
<!DOCTYPE html>
<html>
<style>
* { font-size: 16px; }
div { font-size: 8px; }
</style>
<body>
<script src="../../resources/js-test.js"></script>
<script>
description('Test that clip-path shapes accept different length units');
function computedStyle(property, value) {
var div = document.createElement("div");
document.body.appendChild(div);
div.style.setProperty(property, value);
var computedValue = getComputedStyle(div).getPropertyValue(property);
document.body.removeChild(div);
return computedValue;
}
function innerStyle(property, value) {
var div = document.createElement("div");
div.style.setProperty(property, value);
return div.style.getPropertyValue(property);
}
function testComputed(property, value, expected) {
shouldBeEqualToString('computedStyle("' + property + '", "' + value + '")', expected);
}
function testInner(property, value, expected) {
if (expected === null)
shouldBeNull('innerStyle("' + property + '", "' + value + '")');
else
shouldBeEqualToString('innerStyle("' + property + '", "' + value + '")', expected);
}
function negativeTest(property, value) {
testInner(property, value, "");
testComputed(property, value, 'none');
}
// absolute lengths - number serialization, units
testInner("-webkit-clip-path", "circle(0 at 0 0)", "circle(0px at 0% 0%)");
testInner("-webkit-clip-path", "circle(1px at -1px +1px)", "circle(1px at -1px 1px)");
testInner("-webkit-clip-path", "circle(1.5px at -1.5px +1.5px)", "circle(1.5px at -1.5px 1.5px)");
testInner("-webkit-clip-path", "circle(.5px at -.5px +.5px)", "circle(0.5px at -0.5px 0.5px)");
// font-relative lengths - number serialization, units, resolution
testInner("-webkit-clip-path", "circle(1em at -1em +1em)", "circle(1em at -1em 1em)");
testInner("-webkit-clip-path", "circle(1.5em at -1.5em +1.5em)", "circle(1.5em at -1.5em 1.5em)");
testInner("-webkit-clip-path", "circle(.5em at -.5em +.5em)", "circle(0.5em at -0.5em 0.5em)");
testInner("-webkit-clip-path", "circle(1ex at 1ex 1ex)", "circle(1ex at 1ex 1ex)");
// FIXME: Add ch test when it is supported
testInner("-webkit-clip-path", "circle(1rem at 1rem 1rem)", "circle(1rem at 1rem 1rem)");
testComputed("-webkit-clip-path", "circle(1.5em at .5em 1em)", "circle(12px at 4px 8px)");
testComputed("-webkit-clip-path", "circle(1.5rem at .5rem 1rem)", "circle(24px at 8px 16px)");
// viewport-percentage lengths - units, resolution
testInner("-webkit-clip-path", "circle(1vw at 1vw 1vw)", "circle(1vw at 1vw 1vw)");
testInner("-webkit-clip-path", "circle(1vh at 1vh 1vh)", "circle(1vh at 1vh 1vh)");
testInner("-webkit-clip-path", "circle(1vmin at 1vmin 1vmin)", "circle(1vmin at 1vmin 1vmin)");
testComputed("-webkit-clip-path", "circle(1.5vw at .5vw 1vw)", "circle(12px at 4px 8px)");
testComputed("-webkit-clip-path", "circle(1.5vh at .5vh 1vh)", "circle(9px at 3px 6px)");
testComputed("-webkit-clip-path", "circle(1.5vmin at .5vmin 1vmin)", "circle(9px at 3px 6px)");
// percentage lengths - units
testComputed("-webkit-clip-path", "circle(150% at 50% 100%)", "circle(150% at 50% 100%)");
testComputed("-webkit-clip-path", "inset(45% 45% 90% 60% round 25% 10%)", "inset(45% 45% 90% 60% round 25% 10%)");
testComputed("-webkit-clip-path", "ellipse(100% 100% at 100% 100%)", "ellipse(100% 100% at 100% 100%)");
testComputed("-webkit-clip-path", "polygon(10% 20%, 30% 40%, 40% 50%)", "polygon(10% 20%, 30% 40%, 40% 50%)");
// reject non-lengths
negativeTest("-webkit-clip-path", "circle(1 at 1px 1px)");
negativeTest("-webkit-clip-path", "circle(px at 1px 1px)");
negativeTest("-webkit-clip-path", "circle(1p at 1px 1px)");
negativeTest("-webkit-clip-path", "circle(calc() at 1px 1px)");
// reject negative radiuses
negativeTest("-webkit-clip-path", "circle(-1.5px at -1.5px +1.5px)");
negativeTest("-webkit-clip-path", "inset(1cm 1mm 1in 1px round -1pt, 1pc)");
negativeTest("-webkit-clip-path", "inset(1cm 1mm 1in 1px round 1pt -1pc)");
negativeTest("-webkit-clip-path", "ellipse(-1em 1em at 1em 1em)");
negativeTest("-webkit-clip-path", "ellipse(1em -1em at 1em 1em)");
// general negative tests
negativeTest("-webkit-clip-path", "polygon(0, 0)");
negativeTest("-webkit-clip-path", "polygon(0 0, 0)");
negativeTest("-webkit-clip-path", "polygon(0)");
negativeTest("-webkit-clip-path", "polygon()");
negativeTest("-webkit-clip-path", "polygon(evenodd)");
negativeTest("-webkit-clip-path", "polygon(nonzero)");
</script>
</body>
</html>
|
