mirror of
https://github.com/classilla/tenfourfox.git
synced 2024-06-26 11:29:31 +00:00
502 lines
19 KiB
HTML
502 lines
19 KiB
HTML
<!doctype html>
|
|
<html>
|
|
<head>
|
|
<title>The hashless hex color quirk</title>
|
|
<meta name="timeout" content="long">
|
|
<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});
|
|
onload = function() {
|
|
var html = "<style id=style></style><div id=test></div><div id=ref></div><svg><circle id=svg /><circle id=svg_ref /></svg>";
|
|
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();
|
|
[q, a, s].forEach(function(win) {
|
|
['style', 'test', 'ref', 'svg', 'svg_ref'].forEach(function(id) {
|
|
win[id] = win.document.getElementById(id);
|
|
});
|
|
});
|
|
|
|
var tests = [
|
|
{input:"123", q:"#000123"},
|
|
{input:"023", q:"#000023"},
|
|
{input:"003", q:"#000003"},
|
|
{input:"000", q:"#000"},
|
|
{input:"abc", q:"#abc"},
|
|
{input:"ABC", q:"#abc"},
|
|
{input:"1ab", q:"#0001ab"},
|
|
{input:"1AB", q:"#0001ab"},
|
|
{input:"112233", q:"#123"},
|
|
{input:"012233", q:"#012233"},
|
|
{input:"002233", q:"#023"},
|
|
{input:"000233", q:"#000233"},
|
|
{input:"000033", q:"#003"},
|
|
{input:"000003", q:"#000003"},
|
|
{input:"000000", q:"#000000"},
|
|
{input:"aabbcc", q:"#abc"},
|
|
{input:"AABBCC", q:"#abc"},
|
|
{input:"11aabb", q:"#1ab"},
|
|
{input:"11AABB", q:"#1ab"},
|
|
{input:"\\31 23", q:"#123"},
|
|
{input:"\\61 bc", q:"#abc"},
|
|
{input:"\\41 BC", q:"#abc"},
|
|
{input:"\\31 ab", q:"#1ab"},
|
|
{input:"\\31 AB", q:"#1ab"},
|
|
{input:"\\31 12233", q:"#123"},
|
|
{input:"\\61 abbcc", q:"#abc"},
|
|
{input:"\\41 ABBCC", q:"#abc"},
|
|
{input:"\\31 1aabb", q:"#1ab"},
|
|
{input:"\\31 1AABB", q:"#1ab"},
|
|
{input:"12\\33 ", q:"#000123"},
|
|
{input:"1", q:"#000001"},
|
|
{input:"12", q:"#000012"},
|
|
{input:"1234", q:"#001234"},
|
|
{input:"12345", q:"#012345"},
|
|
{input:"1234567"},
|
|
{input:"12345678"},
|
|
{input:"a"},
|
|
{input:"aa"},
|
|
{input:"aaaa"},
|
|
{input:"aaaaa"},
|
|
{input:"aaaaaaa"},
|
|
{input:"aaaaaaaa"},
|
|
{input:"A"},
|
|
{input:"AA"},
|
|
{input:"AAAA"},
|
|
{input:"AAAAA"},
|
|
{input:"AAAAAAA"},
|
|
{input:"AAAAAAAA"},
|
|
{input:"1a", q:"#00001a"},
|
|
{input:"1abc", q:"#001abc"},
|
|
{input:"1abcd", q:"#01abcd"},
|
|
{input:"1abcdef"},
|
|
{input:"1abcdeff"},
|
|
{input:"+1", q:"#000001"},
|
|
{input:"+12", q:"#000012"},
|
|
{input:"+123", q:"#000123"},
|
|
{input:"+1234", q:"#001234"},
|
|
{input:"+12345", q:"#012345"},
|
|
{input:"+123456", q:"#123456"},
|
|
{input:"+1234567"},
|
|
{input:"+12345678"},
|
|
{input:"-1"},
|
|
{input:"-12"},
|
|
{input:"-123"},
|
|
{input:"-1234"},
|
|
{input:"-12345"},
|
|
{input:"-123456"},
|
|
{input:"-1234567"},
|
|
{input:"-12345678"},
|
|
{input:"+1a", q:"#00001a"},
|
|
{input:"+12a", q:"#00012a"},
|
|
{input:"+123a", q:"#00123a"},
|
|
{input:"+1234a", q:"#01234a"},
|
|
{input:"+12345a", q:"#12345a"},
|
|
{input:"+123456a"},
|
|
{input:"+1234567a"},
|
|
{input:"-1a"},
|
|
{input:"-12a"},
|
|
{input:"-123a"},
|
|
{input:"-1234a"},
|
|
{input:"-12345a"},
|
|
{input:"-123456a"},
|
|
{input:"-1234567a"},
|
|
{input:"-12345678a"},
|
|
{input:"+1A", q:"#00001a"},
|
|
{input:"+12A", q:"#00012a"},
|
|
{input:"+123A", q:"#00123a"},
|
|
{input:"+1234A", q:"#01234a"},
|
|
{input:"+12345A", q:"#12345a"},
|
|
{input:"+123456A"},
|
|
{input:"+1234567A"},
|
|
{input:"-1A"},
|
|
{input:"-12A"},
|
|
{input:"-123A"},
|
|
{input:"-1234A"},
|
|
{input:"-12345A"},
|
|
{input:"-123456A"},
|
|
{input:"-1234567A"},
|
|
{input:"-12345678A"},
|
|
{input:"+a"},
|
|
{input:"+aa"},
|
|
{input:"+aaa"},
|
|
{input:"+aaaa"},
|
|
{input:"+aaaaa"},
|
|
{input:"+aaaaaa"},
|
|
{input:"+aaaaaaa"},
|
|
{input:"+aaaaaaaa"},
|
|
{input:"-a"},
|
|
{input:"-aa"},
|
|
{input:"-aaa"},
|
|
{input:"-aaaa"},
|
|
{input:"-aaaaa"},
|
|
{input:"-aaaaaa"},
|
|
{input:"-aaaaaaa"},
|
|
{input:"-aaaaaaaa"},
|
|
{input:"-aaaaaaaaa"},
|
|
{input:"+A"},
|
|
{input:"+AA"},
|
|
{input:"+AAA"},
|
|
{input:"+AAAA"},
|
|
{input:"+AAAAA"},
|
|
{input:"+AAAAAA"},
|
|
{input:"+AAAAAAA"},
|
|
{input:"+AAAAAAAA"},
|
|
{input:"-A"},
|
|
{input:"-AA"},
|
|
{input:"-AAA"},
|
|
{input:"-AAAA"},
|
|
{input:"-AAAAA"},
|
|
{input:"-AAAAAA"},
|
|
{input:"-AAAAAAA"},
|
|
{input:"-AAAAAAAA"},
|
|
{input:"-AAAAAAAAA"},
|
|
{input:"1.1"},
|
|
{input:"1.11"},
|
|
{input:"1.111"},
|
|
{input:"1.1111"},
|
|
{input:"1.11111"},
|
|
{input:"1.111111"},
|
|
{input:"1.1111111"},
|
|
{input:"+1.1"},
|
|
{input:"+1.11"},
|
|
{input:"+1.111"},
|
|
{input:"+1.1111"},
|
|
{input:"+1.11111"},
|
|
{input:"+1.111111"},
|
|
{input:"+1.1111111"},
|
|
{input:"-1.1"},
|
|
{input:"-1.11"},
|
|
{input:"-1.111"},
|
|
{input:"-1.1111"},
|
|
{input:"-1.11111"},
|
|
{input:"-1.111111"},
|
|
{input:"-1.1111111"},
|
|
{input:"1.1a"},
|
|
{input:"1.11a"},
|
|
{input:"1.111a"},
|
|
{input:"1.1111a"},
|
|
{input:"1.11111a"},
|
|
{input:"1.111111a"},
|
|
{input:"+1.1a"},
|
|
{input:"+1.11a"},
|
|
{input:"+1.111a"},
|
|
{input:"+1.1111a"},
|
|
{input:"+1.11111a"},
|
|
{input:"+1.111111a"},
|
|
{input:"-1.1a"},
|
|
{input:"-1.11a"},
|
|
{input:"-1.111a"},
|
|
{input:"-1.1111a"},
|
|
{input:"-1.11111a"},
|
|
{input:"-1.111111a"},
|
|
{input:"1.0"},
|
|
{input:"11.0"},
|
|
{input:"111.0"},
|
|
{input:"1111.0"},
|
|
{input:"11111.0"},
|
|
{input:"111111.0"},
|
|
{input:"1111111.0"},
|
|
{input:"11111111.0"},
|
|
{input:"+1.0"},
|
|
{input:"+11.0"},
|
|
{input:"+111.0"},
|
|
{input:"+1111.0"},
|
|
{input:"+11111.0"},
|
|
{input:"+111111.0"},
|
|
{input:"+1111111.0"},
|
|
{input:"+11111111.0"},
|
|
{input:"-1.0"},
|
|
{input:"-11.0"},
|
|
{input:"-111.0"},
|
|
{input:"-1111.0"},
|
|
{input:"-11111.0"},
|
|
{input:"-111111.0"},
|
|
{input:"-1111111.0"},
|
|
{input:"-11111111.0"},
|
|
{input:"1.0a"},
|
|
{input:"11.0a"},
|
|
{input:"111.0a"},
|
|
{input:"1111.0a"},
|
|
{input:"11111.0a"},
|
|
{input:"111111.0a"},
|
|
{input:"1111111.0a"},
|
|
{input:"+1.0a"},
|
|
{input:"+11.0a"},
|
|
{input:"+111.0a"},
|
|
{input:"+1111.0a"},
|
|
{input:"+11111.0a"},
|
|
{input:"+111111.0a"},
|
|
{input:"+1111111.0a"},
|
|
{input:"-1.0a"},
|
|
{input:"-11.0a"},
|
|
{input:"-111.0a"},
|
|
{input:"-1111.0a"},
|
|
{input:"-11111.0a"},
|
|
{input:"-111111.0a"},
|
|
{input:"-1111111.0a"},
|
|
{input:"+/**/123"},
|
|
{input:"-/**/123"},
|
|
{input:"+/**/123456"},
|
|
{input:"-/**/123456"},
|
|
{input:"+/**/abc"},
|
|
{input:"-/**/abc"},
|
|
{input:"+/**/abcdef"},
|
|
{input:"-/**/abcdef"},
|
|
{input:"+/**/12a"},
|
|
{input:"-/**/12a"},
|
|
{input:"+/**/12345a"},
|
|
{input:"-/**/12345a"},
|
|
{input:"abg"},
|
|
{input:"aabbcg"},
|
|
{input:"1ag"},
|
|
{input:"1122ag"},
|
|
{input:"ABG"},
|
|
{input:"AABBCG"},
|
|
{input:"1AG"},
|
|
{input:"1122AG"},
|
|
{input:"@a"},
|
|
{input:"@ab"},
|
|
{input:"@abc"},
|
|
{input:"@abcd"},
|
|
{input:"@abcde"},
|
|
{input:"@abcdef"},
|
|
{input:"@1"},
|
|
{input:"@11"},
|
|
{input:"@111"},
|
|
{input:"@1111"},
|
|
{input:"@11111"},
|
|
{input:"@111111"},
|
|
{input:"@1a"},
|
|
{input:"@11a"},
|
|
{input:"@111a"},
|
|
{input:"@1111a"},
|
|
{input:"@11111a"},
|
|
{input:'"a"'},
|
|
{input:'"ab"'},
|
|
{input:'"abc"'},
|
|
{input:'"abcd"'},
|
|
{input:'"abcde"'},
|
|
{input:'"abcdef"'},
|
|
{input:'"1"'},
|
|
{input:'"11"'},
|
|
{input:'"111"'},
|
|
{input:'"1111"'},
|
|
{input:'"11111"'},
|
|
{input:'"111111"'},
|
|
{input:'"1a"'},
|
|
{input:'"11a"'},
|
|
{input:'"111a"'},
|
|
{input:'"1111a"'},
|
|
{input:'"11111a"'},
|
|
{input:"url(a)", svg:'url(a)'},
|
|
{input:"url(aa)", svg:'url(aa)'},
|
|
{input:"url(aaa)", svg:'url(aaa)'},
|
|
{input:"url(aaaa)", svg:'url(aaaa)'},
|
|
{input:"url(aaaaa)", svg:'url(aaaaa)'},
|
|
{input:"url(aaaaaa)", svg:'url(aaaaaa)'},
|
|
{input:"url('a')", svg:'url(a)'},
|
|
{input:"url('aa')", svg:'url(aa)'},
|
|
{input:"url('aaa')", svg:'url(aaa)'},
|
|
{input:"url('aaaa')", svg:'url(aaaa)'},
|
|
{input:"url('aaaaa')", svg:'url(aaaaa)'},
|
|
{input:"url('aaaaaa')", svg:'url(aaaaaa)'},
|
|
{input:"#a"},
|
|
{input:"#aa"},
|
|
{input:"#aaaa"},
|
|
{input:"#aaaaa"},
|
|
{input:"#aaaaaaa"},
|
|
{input:"#1"},
|
|
{input:"#11"},
|
|
{input:"#1111"},
|
|
{input:"#11111"},
|
|
{input:"#1111111"},
|
|
{input:"#1a"},
|
|
{input:"#111a"},
|
|
{input:"#1111a"},
|
|
{input:"#111111a"},
|
|
{input:"1%"},
|
|
{input:"11%"},
|
|
{input:"111%"},
|
|
{input:"1111%"},
|
|
{input:"11111%"},
|
|
{input:"111111%"},
|
|
{input:"calc(123)"},
|
|
{input:"rgb(119, 255, 255)", q:"#7ff", s:"#7ff", svg:"#7ff"},
|
|
{input:"rgba(119, 255, 255, 001)", q:"#7ff", s:"#7ff", svg:"#7ff"},
|
|
{input:"hsl(100, 100%, 100%)", q:"#fff", s:"#fff", svg:"#fff"},
|
|
{input:"hsla(100, 100%, 100%, 001)", q:"#fff", s:"#fff", svg:"#fff"},
|
|
{input:"rgb(calc(100 + 155), 255, 255)", q:"#fff", s:"#fff", svg:"#fff"},
|
|
{input:"rgba(calc(100 + 155), 255, 255, 001)", q:"#fff", s:"#fff", svg:"#fff"},
|
|
{input:"hsl(calc(050 + 050), 100%, 100%)", q:"#fff", s:"#fff", svg:"#fff"},
|
|
{input:"hsla(calc(050 + 050), 100%, 100%, 001)", q:"#fff", s:"#fff", svg:"#fff"},
|
|
{input:"rgb(/**/255, 255, 255)", q:"#fff", s:"#fff", svg:"#fff"},
|
|
{input:"rgb(/**/255/**/, /**/255/**/, /**/255/**/)", q:"#fff", s:"#fff", svg:"#fff"},
|
|
{input:"rgb(calc(/**/100/**/ + /**/155/**/), 255, 255)", q:"#fff", s:"#fff", svg:"#fff"},
|
|
{input:"#123 123 abc 12a", q:"#123 #000123 #abc #00012a", shorthand:true},
|
|
{input:"rgb(119, 255, 255) 123", q:"#7ff #000123", shorthand:true},
|
|
{input:"123 rgb(119, 255, 255)", q:"#000123 #7ff", shorthand:true},
|
|
{input:"1e1"},
|
|
{input:"11e1"},
|
|
{input:"111e1"},
|
|
{input:"1111e1"},
|
|
{input:"11111e1"},
|
|
{input:"111111e1"},
|
|
{input:"1e+1"},
|
|
{input:"11e+1"},
|
|
{input:"111e+1"},
|
|
{input:"1111e+1"},
|
|
{input:"11111e+1"},
|
|
{input:"111111e+1"},
|
|
{input:"1e-0"},
|
|
{input:"11e-0"},
|
|
{input:"111e-0"},
|
|
{input:"1111e-0"},
|
|
{input:"11111e-0"},
|
|
{input:"111111e-0"},
|
|
{input:"1e1a"},
|
|
{input:"11e1a"},
|
|
{input:"111e1a"},
|
|
{input:"1111e1a"},
|
|
{input:"11111e1a"},
|
|
{input:"111111e1a"},
|
|
{desc:"1111111111...", input:"1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111"},
|
|
{desc:"1111111111...a", input:"1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111a"},
|
|
{desc:"a1111111111...", input:"a1111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111"},
|
|
];
|
|
|
|
var props = [
|
|
{prop:'background-color', check:'background-color'},
|
|
{prop:'border-color', check:'border-top-color', check_also:['border-right-color', 'border-bottom-color', 'border-left-color']},
|
|
{prop:'border-top-color', check:'border-top-color'},
|
|
{prop:'border-right-color', check:'border-right-color'},
|
|
{prop:'border-bottom-color', check:'border-bottom-color'},
|
|
{prop:'border-left-color', check:'border-left-color'},
|
|
{prop:'color', check:'color'},
|
|
];
|
|
var style_template = '#test{{prop}:{test};}' +
|
|
'#ref{{prop}:{ref};}';
|
|
|
|
tests.forEach(function(t) {
|
|
var name = t.desc || t.input;
|
|
var test_q = async_test(name + ' (quirks)');
|
|
var test_a = async_test(name + ' (almost standards)');
|
|
var test_s = async_test(name + ' (standards)');
|
|
var test_svg = async_test(name + ' (SVG)');
|
|
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);
|
|
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);
|
|
assert_equals(a.getComputedStyle(a.test).getPropertyValue(props[i].check),
|
|
a.getComputedStyle(a.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(a.getComputedStyle(q.test).getPropertyValue(props[i].check_also[j]),
|
|
a.getComputedStyle(q.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);
|
|
assert_equals(s.getComputedStyle(s.test).getPropertyValue(props[i].check),
|
|
s.getComputedStyle(s.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(s.getComputedStyle(q.test).getPropertyValue(props[i].check_also[j]),
|
|
s.getComputedStyle(q.ref).getPropertyValue(props[i].check_also[j]),
|
|
props[i].prop + ' checking ' + props[i].check_also[j]);
|
|
}
|
|
}
|
|
});
|
|
test_svg.step(function() {
|
|
q.svg.setAttribute('fill', t.input);
|
|
a.svg.setAttribute('fill', t.input);
|
|
s.svg.setAttribute('fill', t.input);
|
|
if (t.svg) {
|
|
q.svg_ref.setAttribute('fill', t.svg);
|
|
a.svg_ref.setAttribute('fill', t.svg);
|
|
s.svg_ref.setAttribute('fill', t.svg);
|
|
} else {
|
|
q.svg_ref.removeAttribute('fill');
|
|
a.svg_ref.removeAttribute('fill');
|
|
s.svg_ref.removeAttribute('fill');
|
|
}
|
|
assert_equals(q.getComputedStyle(q.svg).fill, q.getComputedStyle(q.svg_ref).fill, 'SVG fill="" in quirks mode');
|
|
assert_equals(a.getComputedStyle(a.svg).fill, a.getComputedStyle(a.svg_ref).fill, 'SVG fill="" in almost standards mode');
|
|
assert_equals(s.getComputedStyle(s.svg).fill, s.getComputedStyle(s.svg_ref).fill, 'SVG fill="" in standards mode');
|
|
});
|
|
}
|
|
test_q.done();
|
|
test_a.done();
|
|
test_s.done();
|
|
test_svg.done();
|
|
});
|
|
|
|
var other_tests = [
|
|
{input:'background:abc', prop:'background-color'},
|
|
{input:'border-top:1px solid abc', prop:'border-top-color'},
|
|
{input:'border-right:1px solid abc', prop:'border-right-color'},
|
|
{input:'border-bottom:1px solid abc', prop:'border-bottom-color'},
|
|
{input:'border-left:1px solid abc', prop:'border-left-color'},
|
|
{input:'border:1px solid abc', prop:'border-top-color'},
|
|
{input:'outline-color:abc', prop:'outline-color'},
|
|
{input:'outline:1px solid abc', prop:'outline-color'}
|
|
];
|
|
|
|
var other_template = "#test{{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');
|
|
}, document.title+', excluded property '+t.input);
|
|
});
|
|
|
|
done();
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|