mirror of
https://github.com/mozilla/gecko-dev.git
synced 2024-10-18 15:55:36 +00:00
Bug 649142 - Part 8: Tests. r=dbaron
This commit is contained in:
Cameron McCormack
parent
6543d83f5f
commit
2f9bd6a6d4
@ -243,6 +243,7 @@ skip-if = buildapp == 'b2g' || toolkit == 'android' #TIMED_OUT # b2g(bug 870262,
|
||||
skip-if = buildapp == 'b2g' || toolkit == 'android' #TIMED_OUT # b2g(bug 870262, :visited support) b2g-debug(bug 870262, :visited support) b2g-desktop(bug 870262, :visited support)
|
||||
[test_bug525952.html]
|
||||
[test_load_events_on_stylesheets.html]
|
||||
[test_logical_properties.html]
|
||||
[test_page_parser.html]
|
||||
[test_bug732153.html]
|
||||
[test_bug732209.html]
|
||||
|
||||
273
layout/style/test/test_logical_properties.html
Normal file
273
layout/style/test/test_logical_properties.html
Normal file
@ -0,0 +1,273 @@
|
||||
<!DOCTYPE html>
|
||||
<meta charset=utf-8>
|
||||
<title>Test for handling of logical and physical properties</title>
|
||||
<link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
|
||||
<script src="/tests/SimpleTest/SimpleTest.js"></script>
|
||||
|
||||
<style id="sheet"></style>
|
||||
<div id="test" class="test"></div>
|
||||
|
||||
<script>
|
||||
var gSheet = document.getElementById("sheet");
|
||||
var gTest = document.getElementById("test");
|
||||
|
||||
// list of groups of physical and logical properties, such as
|
||||
// { left: "margin-left", right: "margin-right",
|
||||
// inlineStart: "margin-inline-start", inlineEnd: "margin-inline-end",
|
||||
// type: "length" }
|
||||
// where the type is a key from the gValues object
|
||||
var gPropertyGroups;
|
||||
|
||||
// values to use while testing
|
||||
var gValues = {
|
||||
"length": ["1px", "2px", "3px"],
|
||||
"color": ["rgb(1, 1, 1)", "rgb(2, 2, 2)", "rgb(3, 3, 3)"],
|
||||
"border-style": ["solid", "dashed", "dotted"],
|
||||
};
|
||||
|
||||
function init() {
|
||||
gPropertyGroups = [];
|
||||
|
||||
for (var p in gCSSProperties) {
|
||||
var type = gCSSProperties[p].type;
|
||||
|
||||
if (type == CSS_TYPE_SHORTHAND_AND_LONGHAND && /-inline-end/.test(p)) {
|
||||
var valueType;
|
||||
if (/margin|padding|width/.test(p)) {
|
||||
valueType = "length";
|
||||
} else if (/color/.test(p)) {
|
||||
valueType = "color";
|
||||
} else if (/border.*style/.test(p)) {
|
||||
valueType = "border-style";
|
||||
} else {
|
||||
throw `unexpected property ${p}`;
|
||||
}
|
||||
gPropertyGroups.push({
|
||||
left: p.replace("-inline-end", "-left"),
|
||||
right: p.replace("-inline-end", "-right"),
|
||||
inlineStart: p.replace("-inline-end", "-inline-start"),
|
||||
inlineEnd: p,
|
||||
type: valueType
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function test_computed_values(aTestName, aRules, aExpectedValues) {
|
||||
gSheet.textContent = aRules;
|
||||
var cs = getComputedStyle(gTest);
|
||||
aExpectedValues.forEach(function(aPair) {
|
||||
is(cs.getPropertyValue(aPair[0]), aPair[1], `${aTestName} ${aPair[0]}`);
|
||||
});
|
||||
gSheet.textContent = "";
|
||||
}
|
||||
|
||||
function make_declaration(aObject) {
|
||||
var decl = "";
|
||||
if (aObject) {
|
||||
for (var p in aObject) {
|
||||
decl += `${p}: ${aObject[p]}; `;
|
||||
}
|
||||
}
|
||||
return decl;
|
||||
}
|
||||
|
||||
function start() {
|
||||
// load property_database.js once the pref change has gone into effect
|
||||
var script = document.createElement("script");
|
||||
script.src = "property_database.js";
|
||||
script.onload = function() {
|
||||
init();
|
||||
run_tests();
|
||||
};
|
||||
document.body.appendChild(script);
|
||||
}
|
||||
|
||||
function run_tests() {
|
||||
gPropertyGroups.forEach(function(aGroup) {
|
||||
var values = gValues[aGroup.type];
|
||||
var decl;
|
||||
|
||||
// Test that logical properties are converted to their physical equivalent
|
||||
// correctly when present on a single declaration, with no overwriting of
|
||||
// previous properties.
|
||||
|
||||
decl = `${aGroup.inlineStart}: ${values[0]}; ` +
|
||||
`${aGroup.inlineEnd}: ${values[1]}; ` +
|
||||
make_declaration(gCSSProperties[aGroup.left].prerequisites) +
|
||||
make_declaration(gCSSProperties[aGroup.right].prerequisites);
|
||||
|
||||
test_computed_values("ltr inline single declaration",
|
||||
`.test { direction: ltr; ${decl} }`,
|
||||
[[aGroup.left, values[0]],
|
||||
[aGroup.right, values[1]]]);
|
||||
|
||||
test_computed_values("rtl inline single declaration",
|
||||
`.test { direction: rtl; ${decl} }`,
|
||||
[[aGroup.left, values[1]],
|
||||
[aGroup.right, values[0]]]);
|
||||
|
||||
// Test that logical and physical properties are cascaded together, honoring
|
||||
// their relative order on a single declaration.
|
||||
|
||||
decl = `${aGroup.left}: ${values[0]}; ` +
|
||||
`${aGroup.right}: ${values[1]}; ` +
|
||||
`${aGroup.inlineStart}: ${values[2]}; ` +
|
||||
make_declaration(gCSSProperties[aGroup.left].prerequisites) +
|
||||
make_declaration(gCSSProperties[aGroup.right].prerequisites);
|
||||
|
||||
test_computed_values("ltr inline-start single declaration, logical last",
|
||||
`.test { direction: ltr; ${decl} }`,
|
||||
[[aGroup.left, values[2]],
|
||||
[aGroup.right, values[1]]]);
|
||||
|
||||
test_computed_values("rtl inline-start single declaration, logical last",
|
||||
`.test { direction: rtl; ${decl} }`,
|
||||
[[aGroup.left, values[0]],
|
||||
[aGroup.right, values[2]]]);
|
||||
|
||||
decl = `${aGroup.left}: ${values[0]}; ` +
|
||||
`${aGroup.right}: ${values[1]}; ` +
|
||||
`${aGroup.inlineEnd}: ${values[2]}; ` +
|
||||
make_declaration(gCSSProperties[aGroup.left].prerequisites) +
|
||||
make_declaration(gCSSProperties[aGroup.right].prerequisites);
|
||||
|
||||
test_computed_values("ltr inline-end single declaration, logical last",
|
||||
`.test { direction: ltr; ${decl} }`,
|
||||
[[aGroup.left, values[0]],
|
||||
[aGroup.right, values[2]]]);
|
||||
|
||||
test_computed_values("rtl inline-end single declaration, logical last",
|
||||
`.test { direction: rtl; ${decl} }`,
|
||||
[[aGroup.left, values[2]],
|
||||
[aGroup.right, values[1]]]);
|
||||
|
||||
decl = `${aGroup.inlineStart}: ${values[0]}; ` +
|
||||
`${aGroup.inlineEnd}: ${values[1]}; ` +
|
||||
`${aGroup.left}: ${values[2]}; ` +
|
||||
make_declaration(gCSSProperties[aGroup.left].prerequisites) +
|
||||
make_declaration(gCSSProperties[aGroup.right].prerequisites);
|
||||
|
||||
test_computed_values("ltr inline left single declaration, physical last",
|
||||
`.test { direction: ltr; ${decl} }`,
|
||||
[[aGroup.left, values[2]],
|
||||
[aGroup.right, values[1]]]);
|
||||
|
||||
test_computed_values("rtl inline left single declaration, physical last",
|
||||
`.test { direction: rtl; ${decl} }`,
|
||||
[[aGroup.left, values[2]],
|
||||
[aGroup.right, values[0]]]);
|
||||
|
||||
decl = `${aGroup.inlineStart}: ${values[0]}; ` +
|
||||
`${aGroup.inlineEnd}: ${values[1]}; ` +
|
||||
`${aGroup.right}: ${values[2]}; ` +
|
||||
make_declaration(gCSSProperties[aGroup.left].prerequisites) +
|
||||
make_declaration(gCSSProperties[aGroup.right].prerequisites);
|
||||
|
||||
test_computed_values("ltr inline right single declaration, physical last",
|
||||
`.test { direction: ltr; ${decl} }`,
|
||||
[[aGroup.left, values[0]],
|
||||
[aGroup.right, values[2]]]);
|
||||
|
||||
test_computed_values("rtl inline right single declaration, physical last",
|
||||
`.test { direction: rtl; ${decl} }`,
|
||||
[[aGroup.left, values[1]],
|
||||
[aGroup.right, values[2]]]);
|
||||
|
||||
// Test that logical and physical properties are cascaded properly when on
|
||||
// different declarations.
|
||||
|
||||
var hiDecl; // higher specificity
|
||||
var loDecl; // lower specifity
|
||||
|
||||
hiDecl = `${aGroup.inlineStart}: ${values[0]}; `;
|
||||
loDecl = `${aGroup.left}: ${values[1]}; ` +
|
||||
`${aGroup.right}: ${values[2]}; ` +
|
||||
make_declaration(gCSSProperties[aGroup.left].prerequisites) +
|
||||
make_declaration(gCSSProperties[aGroup.right].prerequisites);
|
||||
|
||||
test_computed_values("ltr inline-start two declarations",
|
||||
`#test { ${hiDecl} } ` +
|
||||
`.test { direction: ltr; ${loDecl} }`,
|
||||
[[aGroup.left, values[0]],
|
||||
[aGroup.right, values[2]]]);
|
||||
|
||||
test_computed_values("rtl inline-start two declarations",
|
||||
`#test { ${hiDecl} } ` +
|
||||
`.test { direction: rtl; ${loDecl} }`,
|
||||
[[aGroup.left, values[1]],
|
||||
[aGroup.right, values[0]]]);
|
||||
|
||||
hiDecl = `${aGroup.inlineEnd}: ${values[0]}; `;
|
||||
|
||||
test_computed_values("ltr inline-end two declarations",
|
||||
`#test { ${hiDecl} } ` +
|
||||
`.test { direction: ltr; ${loDecl} }`,
|
||||
[[aGroup.left, values[1]],
|
||||
[aGroup.right, values[0]]]);
|
||||
|
||||
test_computed_values("rtl inline-end two declarations",
|
||||
`#test { ${hiDecl} } ` +
|
||||
`.test { direction: rtl; ${loDecl} }`,
|
||||
[[aGroup.left, values[0]],
|
||||
[aGroup.right, values[2]]]);
|
||||
|
||||
hiDecl = `${aGroup.left}: ${values[0]}; `;
|
||||
loDecl = `${aGroup.inlineStart}: ${values[1]}; ` +
|
||||
`${aGroup.inlineEnd}: ${values[2]}; ` +
|
||||
make_declaration(gCSSProperties[aGroup.left].prerequisites) +
|
||||
make_declaration(gCSSProperties[aGroup.right].prerequisites);
|
||||
|
||||
test_computed_values("ltr inline left two declarations",
|
||||
`#test { ${hiDecl} } ` +
|
||||
`.test { direction: ltr; ${loDecl} }`,
|
||||
[[aGroup.left, values[0]],
|
||||
[aGroup.right, values[2]]]);
|
||||
|
||||
test_computed_values("rtl inline left two declarations",
|
||||
`#test { ${hiDecl} } ` +
|
||||
`.test { direction: rtl; ${loDecl} }`,
|
||||
[[aGroup.left, values[0]],
|
||||
[aGroup.right, values[1]]]);
|
||||
|
||||
hiDecl = `${aGroup.right}: ${values[0]}; `;
|
||||
|
||||
test_computed_values("ltr inline right two declarations",
|
||||
`#test { ${hiDecl} } ` +
|
||||
`.test { direction: ltr; ${loDecl} }`,
|
||||
[[aGroup.left, values[1]],
|
||||
[aGroup.right, values[0]]]);
|
||||
|
||||
test_computed_values("rtl inline right two declarations",
|
||||
`#test { ${hiDecl} } ` +
|
||||
`.test { direction: rtl; ${loDecl} }`,
|
||||
[[aGroup.left, values[2]],
|
||||
[aGroup.right, values[0]]]);
|
||||
|
||||
// Test that the computed value of direction is used, not the value on
|
||||
// the declaration.
|
||||
|
||||
loDecl = `${aGroup.inlineStart}: ${values[0]}; ` +
|
||||
`${aGroup.inlineEnd}: ${values[1]}; ` +
|
||||
make_declaration(gCSSProperties[aGroup.left].prerequisites) +
|
||||
make_declaration(gCSSProperties[aGroup.right].prerequisites);
|
||||
|
||||
test_computed_values("ltr on different declaration",
|
||||
`#test { direction: ltr; } ` +
|
||||
`.test { direction: rtl; ${loDecl} }`,
|
||||
[[aGroup.left, values[0]],
|
||||
[aGroup.right, values[1]]]);
|
||||
|
||||
test_computed_values("rtl on different declaration",
|
||||
`#test { direction: rtl; } ` +
|
||||
`.test { direction: ltr; ${loDecl} }`,
|
||||
[[aGroup.left, values[1]],
|
||||
[aGroup.right, values[0]]]);
|
||||
});
|
||||
|
||||
SimpleTest.finish();
|
||||
}
|
||||
|
||||
SimpleTest.waitForExplicitFinish();
|
||||
SpecialPowers.pushPrefEnv({ "set": [["layout.css.vertical-text.enabled", true]] }, start);
|
||||
</script>
|
||||
Loading…
Reference in New Issue
Block a user