forked from WebKit/WebKit
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathcssvalue-comparison.html
99 lines (89 loc) · 5.83 KB
/
cssvalue-comparison.html
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>
<head>
<title>CSSValue comparison test</title>
<script type="text/javascript" src="../resources/testharness.js"></script>
<script type="text/javascript" src="../resources/testharnessreport.js"></script>
</head>
<body onload="run()">
<p>This test verifies that CSSValue objects comparison works correctly.</p>
<div id="test" contenteditable></div>
<script type="text/javascript">
setup({ "explicit_done": true })
function run()
{
var styleElement = document.createElement("style")
styleElement.type = "text/css"
var styleTextNode = document.createTextNode("")
styleElement.appendChild(styleTextNode)
document.getElementsByTagName("head")[0].appendChild(styleElement)
var div = document.getElementById("test")
div.focus()
function runTest(propertyName, styleSheetPropertyValue, inlineStylePropertyValue)
{
styleTextNode.data = "div { " + propertyName + " : " + styleSheetPropertyValue + "; }"
document.execCommand('insertHTML', false, "<div id=\"insertedDiv\" style=\"" + propertyName + " : " + inlineStylePropertyValue + "; \"></div>")
var insertedDiv = document.getElementById('insertedDiv')
var length = insertedDiv.style.length;
var result = ""
for (var i = 0; i < length; ++i) {
if (result != "")
result += ", "
result += insertedDiv.style.item(i)
}
insertedDiv.remove()
return result
}
var tests = [
["width", ["20%", "2em", "2rem", "20px", "2cm", "20mm", "4in", "20pt", "10pc", "6vw", "6vh", "4vmin", "-webkit-calc(-100px + 100%)"]], // lengths, calc
["transform", ["rotate(15deg)", "rotate(1.55rad)", "rotate(200grad)", "rotate(0.5turn)"]], // angle
["background-image", ["url(/service/dummy://test.png)", "url(/service/dummy://green.png)"]], // uri
["font-weight", ["bold", "inherit"]], // ident
["content", ["counter(a)", "counters(a, '.')"]], // counter
["content", ["attr(a)", "attr(p)"]], // attr
["clip", ["rect(40px, 0, 45px, -5px)", "rect(10px, 5px, 15px, -10px)"]], // rect
[["border-radius", "border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius"], ["30px 75px 15px 15px", "164px / 82px", "40px"]], // quads
["stop-color", ["rgb(255,0,0)", "#FF5566"]], // hex, rgb color
["clip-path", ["polygon(evenodd, 10px 75px, 180px 180px, 100px 10px, 10px 180px, 180px 75px, 10px 75px)", "polygon(nonzero, 20% 20%, 80% 20%, 80% 80%, 20% 80%)"]], // shape value
["animation-duration", ["10s", "100ms"]], // seconds, milliseconds
["color", ["red", "blue"]], // ident
["border-image-source", ["url(https://github.com/resources/greenbox.png)", "url(https://github.com/resources/redbox.png)"]], // image
["border-image-slice", ["1 2 3 4", "2 3 4 5"]], // border image slice
["cursor", ["url(https://github.com/resources/greenbox.png) 0 0, pointer", "url(https://github.com/resources/cursor.png) 1 1, wait"]], // cursor
[["font", "font-size, line-height, font-family"], ["italic bold 12px/30px arial", "italic bold 8px/16px helvetica"]], // font
["background-image", ["-webkit-gradient(linear, left top, left bottom, from(#ccc), to(#000))", "-webkit-gradient(radial, 45 45, 0, 52 50, 0, from(#A7D30C), to(rgba(1,159,98,0)), color-stop(90%, #019F62))"]], // gradients
["background-image", ["radial-gradient(circle, #ccc, #000)"]], // gradients
["background-image", ["linear-gradient(#000, #234)", "linear-gradient(to top, #000, #234)"]], // gradients
["background-image", ["-webkit-cross-fade(url(/service/dummy://example.png), url(/service/dummy://example.png), 50%)", "-webkit-cross-fade(url(/service/dummy://background.png), url(/service/dummy://foreground.png), 80%)"]], // crossfade
["-webkit-box-reflect", ["below 10px", "below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(10, 55, 234, 1)))"]], // reflect
["-webkit-box-shadow", ["0 -20px 10px red, 0 20px 10px blue", "0 20px 10px blue", "5px 5px 5px rgba(0, 0, 0, 0.3)"]], // shadow
["transition-timing-function", ["cubic-bezier(0.25, 0.1, 0.25, 1)", "linear", "steps(3, end)"]], // timing functions
["transform", ["rotate(30deg)", "translate(50px,50px)", "scale(2,4)", "skew(30deg,20deg)", "matrix(0.4,0.5,-0.5,0.4,0,0)"]], // transforms
["-webkit-line-box-contain", ["inline-box", "font", "glyphs", "replaced"]], // line-box-contain
["background-image", ["-webkit-image-set(url(/service/dummy://test.png) 1x, url(/service/dummy://test.png) 2x)", "-webkit-image-set(url(/service/dummy://small.png) 2x, url(/service/dummy://big.png) 3x)"]], // image set
["background-image", ["image-set(url(/service/dummy://test.png) 1x, url(/service/dummy://test.png) 2x)", "image-set(url(/service/dummy://small.png) 2x, url(/service/dummy://big.png) 3x)"]], // image set
["filter", ["grayscale(100%) sepia(100%)", "sepia(10%) grayscale(50%)"]] // filter
];
for (let [propertyName, testValues] of tests) {
var expectedResult = propertyName
if (typeof propertyName != "string") {
expectedResult = propertyName[1]
propertyName = propertyName[0]
}
for (const value of testValues) {
test(function() {assert_equals(runTest(propertyName, value, value), "")}, "Adding \"" + value + "\" for property \"" + propertyName + "\" with editing code and checking it did not add properties because they compared as equal.")
}
if (testValues.length > 1) {
for (const a of testValues) {
for (const b of testValues) {
if (a != b)
test(function() {assert_equals(runTest(propertyName, a, b), expectedResult)}, "Starting with \"" + a + "\" and adding \"" + b + "\" for property \"" + propertyName + "\" with editing code and checking it did add expected properties because they compared as not equal.")
}
}
}
}
done();
}
</script>
</body>
</html>