Magic-Mirror/gecko-dev
1
0
Fork 0
mirror of https://github.com/mozilla/gecko-dev.git synced 2025-01-09 05:14:24 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Bug 1450526 - Part 5: Add test for pseudo element. r=pbro

Browse Source 
MozReview-Commit-ID: 2BihXbtTmKo

--HG--
extra : rebase_source : 1012db7391c2f906d2f790b081ac4495942fe471
This commit is contained in:
Daisuke Akatsuka 2018-05-21 18:53:42 +09:00
parent 8067ac234e
commit 03df20587e
3 changed files with 143 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
devtools/client/inspector/animation/test/browser.ini
View File

@ -7,6 +7,7 @@ support-files =
doc_multi_easings.html
doc_multi_keyframes.html
doc_multi_timings.html
doc_pseudo.html
doc_simple_animation.html
head.js
!/devtools/client/inspector/test/head.js
@ -44,6 +45,7 @@ support-files =
[browser_animation_pause-resume-button.js]
[browser_animation_pause-resume-button_spacebar.js]
[browser_animation_playback-rate-selector.js]
[browser_animation_pseudo-element.js]
[browser_animation_rewind-button.js]
[browser_animation_summary-graph_animation-name.js]
[browser_animation_summary-graph_compositor.js]

79
devtools/client/inspector/animation/test/browser_animation_pseudo-element.js Normal file
View File

@ -0,0 +1,79 @@
/* Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/ */
"use strict";
// Test for pseudo element.
const TEST_DATA = [
{
expectedTargetLabel: "::before",
expectedAnimationNameLabel: "body",
},
{
expectedTargetLabel: "::before",
expectedAnimationNameLabel: "div-before",
},
{
expectedTargetLabel: "::after",
expectedAnimationNameLabel: "div-after",
},
];
add_task(async function() {
await addTab(URL_ROOT + "doc_pseudo.html");
const { animationInspector, inspector, panel } = await openAnimationInspector();
info("Checking count of animation item for pseudo elements");
is(panel.querySelectorAll(".animation-list .animation-item").length, TEST_DATA.length,
`Count of animation item should be ${ TEST_DATA.length }`);
info("Checking content of each animation item");
const animationItemEls = panel.querySelectorAll(".animation-list .animation-item");
for (let i = 0; i < animationItemEls.length; i++) {
const testData = TEST_DATA[i];
info(`Checking pseudo element for ${ testData.expectedTargetLabel }`);
const animationItemEl = animationItemEls[i];
info("Checking text content of animation target");
const animationTargetEl =
animationItemEl.querySelector(".animation-list .animation-item .animation-target");
is(animationTargetEl.textContent, testData.expectedTargetLabel,
`Text content of animation target[${ i }] should be ${ testData.expectedTarget }`);
info("Checking text content of animation name");
const animationNameEl = animationItemEl.querySelector(".animation-name");
is(animationNameEl.textContent, testData.expectedAnimationNameLabel,
`The animation name should be ${ testData.expectedAnimationNameLabel }`);
}
info("Checking whether node is selected correctly " +
"when click on the first inspector icon on Reps component");
await clickOnTargetNode(animationInspector, panel, 0);
info("Checking count of animation item");
is(panel.querySelectorAll(".animation-list .animation-item").length, 1,
"Count of animation item should be 1");
info("Checking content of animation item");
is(panel.querySelector(".animation-list .animation-item .animation-name").textContent,
TEST_DATA[0].expectedAnimationNameLabel,
`The animation name should be ${ TEST_DATA[0].expectedAnimationNameLabel }`);
info("Select <body> again to reset the animation list");
await selectNodeAndWaitForAnimations("body", inspector);
info("Checking whether node is selected correctly " +
"when click on the second inspector icon on Reps component");
await clickOnTargetNode(animationInspector, panel, 1);
info("Checking count of animation item");
is(panel.querySelectorAll(".animation-list .animation-item").length, 1,
"Count of animation item should be 1");
info("Checking content of animation item");
is(panel.querySelector(".animation-list .animation-item .animation-name").textContent,
TEST_DATA[1].expectedAnimationNameLabel,
`The animation name should be ${ TEST_DATA[1].expectedAnimationNameLabel }`);
});

62
devtools/client/inspector/animation/test/doc_pseudo.html Normal file
View File

@ -0,0 +1,62 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
body::before {
animation: body 10s infinite;
background-color: lime;
content: "body-before";
width: 100px;
}
.div-before::before {
animation: div-before 10s infinite;
background-color: lime;
content: "div-before";
width: 100px;
}
.div-after::after {
animation: div-after 10s infinite;
background-color: lime;
content: "div-after";
width: 100px;
}
@keyframes body {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes div-before {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
@keyframes div-after {
from {
opacity: 1;
}
50% {
opacity: 0.9;
}
to {
opacity: 0;
}
}
</style>
</head>
<body>
<div class="div-before"></div>
<div class="div-after"></div>
</body>
</html>