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
|
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Masonry: parsing masonry with valid values</title>
<link rel="author" title="Yanling Wang" href="mailto:yanlingwang@microsoft.com">
<link rel="help" href="https://drafts.csswg.org/css-grid-3">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/css/support/parsing-testcommon.js"></script>
<script src="/css/support/shorthand-testcommon.js"></script>
</head>
<style>
#div {
masonry: "test" max-content row !important;
}
</style>
<body>
<div id=div></div>
<div id=testDiv></div>
<script>
test(() => {
assert_equals(getComputedStyle(div).masonry, '"test" max-content row normal');
}, 'masonry followed by !important');
function test_valid_masonry_value(property, value, serializedValue) {
if (arguments.length < 3)
serializedValue = value;
var stringifiedValue = JSON.stringify(value);
test(()=>{
var testDiv = document.getElementById('testDiv');
testDiv.style[property] = "";
testDiv.style[property] = value;
var readValue = getComputedStyle(testDiv).getPropertyValue(property);
assert_not_equals(readValue, "", "property should be set");
assert_equals(readValue, serializedValue, "serialization should be canonical");
}, `masonry: ${value} should be valid.`);
}
test_valid_value("masonry", '"a" calc(10px) column-reverse normal');
test_valid_value("masonry", 'minmax(calc(30% + 40vw), 10px)', 'minmax(calc(30% + 40vw), 10px) column normal');
test_valid_masonry_value("masonry", 'minmax(10px, 20px) row', 'minmax(10px, 20px) row normal');
test_valid_masonry_value("masonry", '1px 2px', '1px 2px column normal');
test_valid_masonry_value("masonry", '"a" 10px reverse', '"a" 10px column reverse');
test_valid_masonry_value("masonry", '"a b" 10px 20px row normal');
test_valid_masonry_value("masonry", '"a b c" 10% 20% 30% row-reverse', '"a b c" 10% 20% 30% row-reverse normal');
test_valid_masonry_value("masonry", 'repeat(5, auto) row reverse');
test_shorthand_value('masonry', 'none', {
'grid-template-columns': 'none',
'grid-template-areas': 'none',
'masonry-direction': 'column',
'masonry-fill': 'normal'
});
test_shorthand_value('masonry', '10px reverse', {
'grid-template-columns': '10px',
'grid-template-areas': 'none',
'masonry-direction': 'column',
'masonry-fill': 'reverse'
});
test_shorthand_value('masonry', '"b a" 20% 40% column normal', {
'grid-template-columns': '20% 40%',
'grid-template-areas': '"b a"',
'masonry-direction': 'column',
'masonry-fill': 'normal'
});
test_shorthand_value('masonry', '"b b a" 1fr 2fr 3fr row', {
'grid-template-rows': '1fr 2fr 3fr',
'grid-template-areas': '"b" "b" "a"',
'masonry-direction': 'row',
'masonry-fill': 'normal'
});
test_shorthand_value('masonry', 'repeat(2, auto) row-reverse', {
'grid-template-rows': 'repeat(2, auto)',
'grid-template-areas': 'none',
'masonry-direction': 'row-reverse',
'masonry-fill': 'normal'
});
</script>
</body>
</html>
|
