mirror of
https://gitlab.winehq.org/wine/wine-gecko.git
synced 2024-09-13 09:24:08 -07:00
225 lines
10 KiB
HTML
225 lines
10 KiB
HTML
<!doctype html>
|
|
<html>
|
|
<head>
|
|
<title>The unitless length quirk</title>
|
|
<script src="/resources/testharness.js"></script>
|
|
<script src="/resources/testharnessreport.js"></script>
|
|
<style> iframe { width:20px; height:20px; } </style>
|
|
</head>
|
|
<body>
|
|
<div id=log></div>
|
|
<iframe id=quirks></iframe>
|
|
<iframe id=almost></iframe>
|
|
<iframe id=standards></iframe>
|
|
<script>
|
|
setup({explicit_done:true});
|
|
var html = "<style id=style></style><div id=test></div><div id=ref></div>";
|
|
var a_doctype = '<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">';
|
|
var s_doctype = '<!DOCTYPE HTML>';
|
|
var q = document.getElementById('quirks').contentWindow;
|
|
var a = document.getElementById('almost').contentWindow;
|
|
var s = document.getElementById('standards').contentWindow;
|
|
q.document.open();
|
|
q.document.write(html);
|
|
q.document.close();
|
|
a.document.open();
|
|
a.document.write(a_doctype + html);
|
|
a.document.close();
|
|
s.document.open();
|
|
s.document.write(s_doctype + html);
|
|
s.document.close();
|
|
onload = function() {
|
|
[q, a, s].forEach(function(win) {
|
|
['style', 'test', 'ref'].forEach(function(id) {
|
|
win[id] = win.document.getElementById(id);
|
|
});
|
|
});
|
|
|
|
var tests = [
|
|
{input:"1", q:"1px"},
|
|
{input:"+1", q:"1px"},
|
|
{input:"-1", q:"-1px"},
|
|
{input:"1.5", q:"1.5px"},
|
|
{input:"+1.5", q:"1.5px"},
|
|
{input:"-1.5", q:"-1.5px"},
|
|
{input:"\\31 "},
|
|
{input:"+\\31 "},
|
|
{input:"-\\31 "},
|
|
{input:"\\31 .5"},
|
|
{input:"+\\31 .5"},
|
|
{input:"-\\31 .5"},
|
|
{input:"1\\31 "},
|
|
{input:"+1\\31 "},
|
|
{input:"-1\\31 "},
|
|
{input:"1\\31 .5"},
|
|
{input:"+1\\31 .5"},
|
|
{input:"-1\\31 .5"},
|
|
{input:"a"},
|
|
{input:"A"},
|
|
{input:"1a"},
|
|
{input:"+1a"},
|
|
{input:"-1a"},
|
|
{input:"+1A"},
|
|
{input:"-1A"},
|
|
{input:"+a"},
|
|
{input:"-a"},
|
|
{input:"+A"},
|
|
{input:"-A"},
|
|
{input:"@a"},
|
|
{input:"@1"},
|
|
{input:"@1a"},
|
|
{input:'"a"'},
|
|
{input:'"1"'},
|
|
{input:'"1a"'},
|
|
{input:"url(1)"},
|
|
{input:"url('1')"},
|
|
{input:"#1"},
|
|
{input:"#01"},
|
|
{input:"#001"},
|
|
{input:"#0001"},
|
|
{input:"#00001"},
|
|
{input:"#000001"},
|
|
{input:"+/**/1"},
|
|
{input:"-/**/1"},
|
|
{input:"calc(1)"},
|
|
{input:"calc(2 * 2px)", q:"4px", s:"4px"},
|
|
{input:"1px 2", q:"1px 2px", shorthand:true},
|
|
{input:"1 2px", q:"1px 2px", shorthand:true},
|
|
{input:"1px calc(2)", shorthand:true},
|
|
{input:"calc(1) 2px", shorthand:true},
|
|
{input:"1 +2", q:"1px 2px", shorthand:true},
|
|
{input:"1 -2", q:"1px -2px", shorthand:true},
|
|
];
|
|
|
|
var props = [
|
|
{prop:'border-top-width', check:'border-top-width'},
|
|
{prop:'border-right-width', check:'border-right-width'},
|
|
{prop:'border-bottom-width', check:'border-bottom-width'},
|
|
{prop:'border-left-width', check:'border-left-width'},
|
|
{prop:'border-width', check:'border-top-width', check_also:['border-right-width', 'border-bottom-width', 'border-left-width']},
|
|
{prop:'bottom', check:'bottom'},
|
|
{prop:'clip', check:'clip'},
|
|
{prop:'font-size', check:'font-size'},
|
|
{prop:'height', check:'height'},
|
|
{prop:'left', check:'left'},
|
|
{prop:'letter-spacing', check:'letter-spacing'},
|
|
{prop:'margin-right', check:'margin-right'},
|
|
{prop:'margin-left', check:'margin-left'},
|
|
{prop:'margin-top', check:'margin-top'},
|
|
{prop:'margin-bottom', check:'margin-bottom'},
|
|
{prop:'margin', check:'margin-top', check_also:['margin-right', 'margin-bottom', 'margin-left']},
|
|
{prop:'padding-top', check:'padding-top'},
|
|
{prop:'padding-right', check:'padding-right'},
|
|
{prop:'padding-bottom', check:'padding-bottom'},
|
|
{prop:'padding-left', check:'padding-left'},
|
|
{prop:'padding', check:'padding-top', check_also:['padding-right', 'padding-bottom', 'padding-left']},
|
|
{prop:'right', check:'right'},
|
|
{prop:'top', check:'top'},
|
|
{prop:'width', check:'width'},
|
|
{prop:'word-spacing', check:'word-spacing'},
|
|
];
|
|
var style_template = '#test{border-style:solid;position:relative;{prop}:{test};}' +
|
|
'#ref{border-style:solid;position:relative;{prop}:{ref};}';
|
|
|
|
tests.forEach(function(t) {
|
|
var test_q = async_test(t.input + ' (quirks)');
|
|
var test_a = async_test(t.input + ' (almost standards)');
|
|
var test_s = async_test(t.input + ' (standards)');
|
|
for (var i in props) {
|
|
if (t.shorthand && !(props[i].check_also)) {
|
|
continue;
|
|
}
|
|
test_q.step(function() {
|
|
q.style.textContent = style_template.replace('{test}', t.input)
|
|
.replace('{ref}', t.q).replace(/\{prop\}/g, props[i].prop)
|
|
.replace(/clip:[^;]+/g, function(match) {
|
|
return 'clip:rect(auto, auto, auto, ' + match.substr(5) + ')';
|
|
});
|
|
assert_equals(q.getComputedStyle(q.test).getPropertyValue(props[i].check),
|
|
q.getComputedStyle(q.ref).getPropertyValue(props[i].check),
|
|
props[i].prop);
|
|
if (t.shorthand && props[i].check_also) {
|
|
for (var j in props[i].check_also) {
|
|
assert_equals(q.getComputedStyle(q.test).getPropertyValue(props[i].check_also[j]),
|
|
q.getComputedStyle(q.ref).getPropertyValue(props[i].check_also[j]),
|
|
props[i].prop + ', checking ' + props[i].check_also[j]);
|
|
}
|
|
}
|
|
});
|
|
test_a.step(function() {
|
|
a.style.textContent = style_template.replace('{test}', t.input)
|
|
.replace('{ref}', t.s).replace(/\{prop\}/g, props[i].prop)
|
|
.replace(/clip:[^;]+/g, function(match) {
|
|
return 'clip:rect(auto, auto, auto, ' + match.substr(5) + ')';
|
|
});
|
|
assert_equals(a.getComputedStyle(a.test).getPropertyValue(props[i].check),
|
|
a.getComputedStyle(a.ref).getPropertyValue(props[i].check),
|
|
props[i].prop + ' in almost standards mode');
|
|
if (t.shorthand && props[i].check_also) {
|
|
for (var j in props[i].check_also) {
|
|
assert_equals(a.getComputedStyle(a.test).getPropertyValue(props[i].check_also[j]),
|
|
a.getComputedStyle(a.ref).getPropertyValue(props[i].check_also[j]),
|
|
props[i].prop + ', checking ' + props[i].check_also[j]);
|
|
}
|
|
}
|
|
});
|
|
test_s.step(function() {
|
|
s.style.textContent = style_template.replace('{test}', t.input)
|
|
.replace('{ref}', t.s).replace(/\{prop\}/g, props[i].prop)
|
|
.replace(/clip:[^;]+/g, function(match) {
|
|
return 'clip:rect(auto, auto, auto, ' + match.substr(5) + ')';
|
|
});
|
|
assert_equals(s.getComputedStyle(s.test).getPropertyValue(props[i].check),
|
|
s.getComputedStyle(s.ref).getPropertyValue(props[i].check),
|
|
props[i].prop + ' in standards mode');
|
|
if (t.shorthand && props[i].check_also) {
|
|
for (var j in props[i].check_also) {
|
|
assert_equals(s.getComputedStyle(s.test).getPropertyValue(props[i].check_also[j]),
|
|
s.getComputedStyle(s.ref).getPropertyValue(props[i].check_also[j]),
|
|
props[i].prop + ', checking ' + props[i].check_also[j]);
|
|
}
|
|
}
|
|
});
|
|
}
|
|
test_q.done();
|
|
test_a.done();
|
|
test_s.done();
|
|
|
|
});
|
|
|
|
var other_tests = [
|
|
{input:'background-position:1 1', prop:'background-position'},
|
|
{input:'background:1 1', prop:'background-position'},
|
|
{input:'border-spacing:1', prop:'border-spacing'},
|
|
{input:'border-top:red solid 1', prop:'border-top-width'},
|
|
{input:'border-right:red solid 1', prop:'border-right-width'},
|
|
{input:'border-bottom:red solid 1', prop:'border-bottom-width'},
|
|
{input:'border-left:red solid 1', prop:'border-left-width'},
|
|
{input:'border:red solid 1', prop:'border-top-width'},
|
|
{input:'font:normal normal normal 40 sans-serif', prop:'font-size'},
|
|
{input:'max-height:1', prop:'max-height'},
|
|
{input:'max-width:1', prop:'max-width'},
|
|
{input:'min-height:1', prop:'min-height'},
|
|
{input:'min-width:1', prop:'min-width'},
|
|
{input:'text-indent:1', prop:'text-indent'},
|
|
{input:'vertical-align:1', prop:'vertical-align'},
|
|
{input:'outline:red solid 1', prop:'outline-width'}
|
|
];
|
|
|
|
var other_template = "#test{position:relative;{test}}";
|
|
|
|
other_tests.forEach(function(t) {
|
|
test(function() {
|
|
q.style.textContent = other_template.replace('{test}', t.input);
|
|
assert_equals(q.getComputedStyle(q.test).getPropertyValue(t.prop),
|
|
q.getComputedStyle(q.ref).getPropertyValue(t.prop),
|
|
'quirk was supported');
|
|
}, 'Excluded property '+t.input);
|
|
});
|
|
|
|
done();
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|