Magic-Mirror/gecko-dev
1
0
Fork 0
mirror of https://github.com/mozilla/gecko-dev.git synced 2025-01-08 12:22:34 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Bug 1393861: Correctly apply the display fixup for ::before and ::after pseudo-elements. r=heycam

Browse Source 
MozReview-Commit-ID: G0bcZmn0mP

--HG--
extra : rebase_source : f93b691ec0648a3f577c0a28fcb1f7132e5454c5
This commit is contained in:
Emilio Cobos Álvarez 2017-09-05 15:07:01 +02:00
parent 80b6d15c27
commit 0f543d7829
5 changed files with 84 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
layout/style/test/mochitest.ini
View File

@ -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]

29
layout/style/test/test_pseudo_display_fixup.html Normal file
View File

@ -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>

33
layout/style/test/test_reframe_pseudo_element.html
View File

@ -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>

6
testing/web-platform/meta/cssom/getComputedStyle-pseudo.html.ini Normal file
View File

@ -0,0 +1,6 @@
[getComputedStyle-pseudo.html]
type: testharness
bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1396844
[Item-based blockification of nonexistent pseudo-elements]
expected:
if stylo: FAIL

26
testing/web-platform/tests/cssom/getComputedStyle-pseudo.html
View File

@ -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>