Source code
Revision control
Copy as Markdown
Other Tools
Test Info: Warnings
- This test has a WPT meta file that expects 44 subtest issues.
- This WPT test may be referenced by the following Test IDs:
- /css/css-gaps/serialization/gap-decorations-properties.html - WPT Dashboard Interop Dashboard
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS Test: Gap Decorations - Properties exist</title>
<link rel="author" title="Javier Contreras" href="mailto:javiercon@microsoft.com">
<meta name="flags" content="ahem dom">
<meta name="assert" content="Test checks that css properties of gap decorations exist.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
<style>
#container {
width: 800px;
height: 600px;
}
#myDiv {
font: 50px/1 Ahem;
justify-content: start;
align-content: start;
}
</style>
</head>
<body>
<div id="log"></div>
<div id="container">
<div id="myDiv">
<div>I T</div>
<div>IT</div>
<div>I</div>
</div>
</div>
<script>
setup({ explicit_done: true });
document.fonts.ready.then(() => {
var myDiv = document.getElementById('myDiv')
void function (data) {
myDiv.style.display = 'grid'
Object.keys(data).forEach(function (prop) {
test(function () {
assert_true(prop in myDiv.style)
}, prop)
var syntaxTests = data[prop]
Object.keys(syntaxTests).forEach(function (testcase) {
test(function () {
assert_true(prop in myDiv.style)
myDiv.style[prop] = syntaxTests[testcase][0]
assert_equals(myDiv.style[prop], syntaxTests[testcase][0], testcase)
assert_equals(getComputedStyle(myDiv)[prop], syntaxTests[testcase][1], testcase)
}, prop + '.' + testcase)
})
})
}({
'gap-rule-paint-order': {
'row-over-column': [
'row-over-column',
'row-over-column'
],
'column-over-row': [
'column-over-row',
'column-over-row'
],
},
'column-rule-break': {
'none': [
'none',
'none'
],
'spanning-item': [
'spanning-item',
'spanning-item'
],
'intersection': [
'intersection',
'intersection'
],
},
'column-rule-color': {
'red': [
'red',
'rgb(255, 0, 0)'
],
'blue': [
'blue',
'rgb(0, 0, 255)'
],
'repeat(4, blue red green) repeat(auto, red)': [
'repeat(4, blue red green) repeat(auto, red)',
'repeat(4, rgb(0, 0, 255) rgb(255, 0, 0) rgb(0, 128, 0)) repeat(auto, rgb(255, 0, 0))'
],
'blue red': [
'blue red',
'rgb(0, 0, 255) rgb(255, 0, 0)'
],
},
'column-rule-outset': {
'10px': [
'10px',
'10px'
],
'50%': [
'50%',
'50%'
],
},
'column-rule-style': {
'none': [
'none',
'none'
],
'hidden': [
'hidden',
'hidden'
],
'dotted': [
'dotted',
'dotted'
],
'dashed': [
'dashed',
'dashed'
],
'solid': [
'solid',
'solid'
],
'double': [
'double',
'double'
],
'groove': [
'groove',
'groove'
],
'ridge': [
'ridge',
'ridge'
],
'inset': [
'inset',
'inset'
],
'outset': [
'outset',
'outset'
],
'dotted dashed': [
'dotted dashed',
'dotted dashed'
],
'repeat(3, dotted)': [
'repeat(3, dotted)',
'repeat(3, dotted)'
],
},
'column-rule-width': {
'10px': [
'10px',
'10px'
],
'thin': [
'thin',
'1px'
],
'medium': [
'medium',
'3px'
],
'thick': [
'thick',
'5px'
],
},
'row-rule-break': {
'none': [
'none',
'none'
],
'spanning-item': [
'spanning-item',
'spanning-item'
],
'intersection': [
'intersection',
'intersection'
],
},
'row-rule-color': {
'red': [
'red',
'rgb(255, 0, 0)'
],
'blue': [
'blue',
'rgb(0, 0, 255)'
],
'repeat(4, blue red green) repeat(auto, red)': [
'repeat(4, blue red green) repeat(auto, red)',
'repeat(4, rgb(0, 0, 255) rgb(255, 0, 0) rgb(0, 128, 0)) repeat(auto, rgb(255, 0, 0))'
],
'blue red': [
'blue red',
'rgb(0, 0, 255) rgb(255, 0, 0)'
],
},
'row-rule-outset': {
'10px': [
'10px',
'10px'
],
'50%': [
'50%',
'50%'
],
},
'row-rule-style': {
'none': [
'none',
'none'
],
'hidden': [
'hidden',
'hidden'
],
'dotted': [
'dotted',
'dotted'
],
'dashed': [
'dashed',
'dashed'
],
'solid': [
'solid',
'solid'
],
'double': [
'double',
'double'
],
'groove': [
'groove',
'groove'
],
'ridge': [
'ridge',
'ridge'
],
'inset': [
'inset',
'inset'
],
'outset': [
'outset',
'outset'
],
'dotted dashed': [
'dotted dashed',
'dotted dashed'
],
'repeat(3, dotted)': [
'repeat(3, dotted)',
'repeat(3, dotted)'
],
},
'row-rule-width': {
'10px': [
'10px',
'10px'
],
'thin': [
'thin',
'1px'
],
'medium': [
'medium',
'3px'
],
'thick': [
'thick',
'5px'
],
},
})
done();
});
</script>
</body>
</html>