зеркало из https://github.com/mozilla/gecko-dev.git
Bug 1393861: Correctly apply the display fixup for ::before and ::after pseudo-elements. r=heycam
MozReview-Commit-ID: G0bcZmn0mP --HG-- extra : rebase_source : 9e9bebc93c005485ef67f719b09df15d40846297
This commit is contained in:
Emilio Cobos Álvarez
Родитель
7fb91d43b5
Коммит
e57a9d7570
|
|
@ -262,6 +262,7 @@ skip-if = android_version == '18' #debug-only failure; timed out #Android 4.3 aw
|
|||
[test_priority_preservation.html]
|
||||
[test_property_database.html]
|
||||
[test_property_syntax_errors.html]
|
||||
[test_pseudo_display_fixup.html]
|
||||
[test_pseudoelement_state.html]
|
||||
[test_pseudoelement_parsing.html]
|
||||
[test_redundant_font_download.html]
|
||||
|
|
|
|||
|
|
@ -0,0 +1,29 @@
|
|||
<!doctype html>
|
||||
<meta charset=utf-8>
|
||||
<title>Test item blockification of pseudo-elements</title>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
<style>
|
||||
#test {
|
||||
display: flex;
|
||||
}
|
||||
#test::before, #test::after {
|
||||
content: "test";
|
||||
display: inline-block;
|
||||
color: green;
|
||||
/*
|
||||
* NOTE(emilio): The transition rule is very intentional, to avoid testing
|
||||
* the eagerly resolved style.
|
||||
*/
|
||||
transition: color 1s ease;
|
||||
}
|
||||
</style>
|
||||
<div id="test"></div>
|
||||
<script>
|
||||
test(function() {
|
||||
document.body.offsetTop;
|
||||
let test = document.getElementById("test");
|
||||
assert_equals(getComputedStyle(test, "::before").display, "block");
|
||||
assert_equals(getComputedStyle(test, "::after").display, "block");
|
||||
}, "::before and ::after pseudo-elements are blockified");
|
||||
</script>
|
||||
|
|
@ -7,27 +7,40 @@
|
|||
<link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez">
|
||||
<script src="/tests/SimpleTest/SimpleTest.js"></script>
|
||||
<style>
|
||||
#flex::before,
|
||||
input::before {
|
||||
content: "Foo";
|
||||
}
|
||||
</style>
|
||||
<input type="text">
|
||||
<div id="flex"></div>
|
||||
<script>
|
||||
SimpleTest.waitForExplicitFinish();
|
||||
const utils = SpecialPowers.getDOMWindowUtils(window);
|
||||
document.documentElement.offsetTop;
|
||||
const input = document.querySelector('input');
|
||||
|
||||
const previousConstructCount = utils.framesConstructed;
|
||||
const previousRestyleGeneration = utils.restyleGeneration;
|
||||
function testNoReframe(callback) {
|
||||
document.documentElement.offsetTop;
|
||||
const previousConstructCount = utils.framesConstructed;
|
||||
const previousRestyleGeneration = utils.restyleGeneration;
|
||||
|
||||
input.style.color = "blue";
|
||||
callback();
|
||||
|
||||
document.documentElement.offsetTop;
|
||||
isnot(previousRestyleGeneration, utils.restyleGeneration,
|
||||
"We should have restyled");
|
||||
is(previousConstructCount, utils.framesConstructed,
|
||||
"We shouldn't have reframed");
|
||||
document.documentElement.offsetTop;
|
||||
isnot(previousRestyleGeneration, utils.restyleGeneration,
|
||||
"We should have restyled");
|
||||
is(previousConstructCount, utils.framesConstructed,
|
||||
"We shouldn't have reframed");
|
||||
}
|
||||
|
||||
testNoReframe(function() {
|
||||
const input = document.querySelector('input');
|
||||
input.style.color = "blue";
|
||||
});
|
||||
|
||||
testNoReframe(function() {
|
||||
const flex = document.getElementById('flex');
|
||||
flex.style.color = "blue";
|
||||
});
|
||||
|
||||
SimpleTest.finish();
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,6 @@
|
|||
[getComputedStyle-pseudo.html]
|
||||
type: testharness
|
||||
[Item-based blockification of nonexistent pseudo-elements]
|
||||
expected:
|
||||
if stylo: FAIL
|
||||
bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1396844
|
||||
|
|
@ -17,7 +17,9 @@
|
|||
#test::before,
|
||||
#test::after,
|
||||
#contents::before,
|
||||
#contents::after {
|
||||
#contents::after,
|
||||
#flex::before,
|
||||
#flex::after {
|
||||
content: " ";
|
||||
width: 50%;
|
||||
height: 10px;
|
||||
|
|
@ -30,10 +32,18 @@
|
|||
#none::after {
|
||||
content: "Foo";
|
||||
}
|
||||
#flex {
|
||||
display: flex;
|
||||
}
|
||||
#flex-no-pseudo {
|
||||
display: flex;
|
||||
}
|
||||
</style>
|
||||
<div id="test">
|
||||
<div id="contents"></div>
|
||||
<div id="none"></div>
|
||||
<div id="flex"></div>
|
||||
<div id="flex-no-pseudo"></div>
|
||||
</div>
|
||||
<script>
|
||||
test(function() {
|
||||
|
|
@ -64,4 +74,18 @@ test(function() {
|
|||
"Pseudo-styles of display: none elements should be correct");
|
||||
});
|
||||
}, "Resolution of pseudo-element styles in display: none elements");
|
||||
test(function() {
|
||||
var flex = document.getElementById('flex');
|
||||
[":before", ":after"].forEach(function(pseudo) {
|
||||
assert_equals(getComputedStyle(flex, pseudo).display, "block",
|
||||
"Pseudo-styles of display: flex elements should get blockified");
|
||||
});
|
||||
}, "Item-based blockification of pseudo-elements");
|
||||
test(function() {
|
||||
var flexNoPseudo = document.getElementById('flex-no-pseudo');
|
||||
[":before", ":after"].forEach(function(pseudo) {
|
||||
assert_equals(getComputedStyle(flexNoPseudo, pseudo).display, "block",
|
||||
"Pseudo-styles of display: flex elements should get blockified");
|
||||
});
|
||||
}, "Item-based blockification of nonexistent pseudo-elements");
|
||||
</script>
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче