src/app/legacy/containers/Bulletin/__snapshots__/index.test.jsx.snap
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Bulletin Container snapshots should render a Live Radio bulletin correctly 1`] = `
@keyframes animation-0 {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.emotion-0 {
position: relative;
background-color: #F2F2F2;
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-column-gap: 1rem;
background-color: #F2F2F2;
}
.emotion-2 {
vertical-align: top;
display: inline-block;
width: 100%;
padding: 0.5rem 0.5rem 0 0.5rem;
}
@media (min-width: 37.5rem) and (max-width: 62.9375rem) {
.emotion-2 {
width: 33.33%;
}
}
@media (min-width: 37.5rem) {
.emotion-2 {
padding: 0;
}
}
@supports (grid-template-columns: fit-content(200px)) {
.emotion-2 {
width: initial;
grid-column: 1/span 6;
}
@media (min-width: 37.5rem) and (max-width: 62.9375rem) {
.emotion-2 {
grid-column: 1/span 2;
}
}
}
.emotion-4 {
position: relative;
height: 0;
overflow: hidden;
background-color: #F2F2F2;
-webkit-background-position: center center;
background-position: center center;
background-repeat: no-repeat;
-webkit-background-size: 60px 17px;
background-size: 60px 17px;
width: 100%;
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHdpZHRoPSI0NzkiIGhlaWdodD0iMTM2IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+PGcgZmlsbD0iI0Q1RDBDRCI+PGc+PHBhdGggZD0iTTQ0OS41NTYgOTEuNTUzbC0yLjMxIDEuNDFjLTExLjE2NyA2LjgxOC0yMy4zMTMgMTAuNDc0LTM0LjM0NiAxMC40Ny0yMy42MS0uMDktMzkuMTYzLTE0LjA4My0zOS4yMjctMzQuNDUzLjAzLTE5LjkxOCAxNi4yNy0zNC42NjMgMzguNjMzLTM0LjcxOCAxMS4zODcuMDEgMjEuNzAzIDIuOTU0IDMzLjk2MiA5LjY3MmwyLjI1MSAxLjI0di0xOC4xOWwtLjk2Mi0uMzc3Yy0xMy44MjQtNS40NTgtMjQuNTMtNy44OS0zNS4xMDMtNy44ODQtMTYuMzQ2LS4wMDYtMzAuNTMzIDUuMzk0LTQwLjYzNyAxNC41NTctMTAuMTA1IDkuMTYzLTE2LjEwNiAyMi4xMDItMTYuMDk5IDM2Ljk1My4wMDggMTAuMzQ4IDQuMjc5IDIyLjQ4IDEzLjQyIDMyLjEwNSA5LjEyMSA5LjYyOCAyMy4xNjUgMTYuNjQ4IDQyLjQzIDE2LjYzOWguMDYzYzE1Ljk4IDAgMjcuMDYyLTMuNTYzIDM3LjA3NC04LjQ5MmwuODUxLS40MTRWOTEuNTUzek0zMzQgMTM1LjY5N2gxNDQuMTk1VjBIMzM0djEzNS42OTd6Ii8+PHBhdGggZD0iTTI3Ni45MzcgODkuOTY4Yy4wNDEtMTIuMzMtOC4xNzEtMjEuNjk2LTIxLjMwOC0yNS4zIDMuNTQ0LTEuODA5IDYuMzUtNC4wMjMgOC40MDQtNi43MjcgMi43NS0zLjYyMiA0LjA2MS04LjA2NCA0LjA0Ni0xMy4yMzUuMDE1LTYuMzU5LTIuNDg2LTEyLjgzOS03Ljg1OC0xNy42ODctNS4zNzItNC44NDctMTMuNTI2LTcuOTk3LTI0LjY1NC03Ljk5MUgyMDQuODN2OTcuNzI4aDM2LjA3M2MxMi44NyAwIDIxLjkwNi0zLjQ4MiAyNy43MjItOC42NSA1LjgxOC01LjE1NSA4LjMyLTExLjkxIDguMzEyLTE4LjEzOHpNMTY3IDEzNS42OThoMTQ0LjE5N1YwSDE2N3YxMzUuNjk3eiIvPjxwYXRoIGQ9Ik0xMDkuOTM3IDg5Ljk2OGMuMDQxLTEyLjMzLTguMTcxLTIxLjY5Ni0yMS4zMDgtMjUuMyAzLjU0NC0xLjgwOSA2LjM1LTQuMDIzIDguNDA0LTYuNzI3IDIuNzUtMy42MjIgNC4wNjEtOC4wNjQgNC4wNDYtMTMuMjM1LjAxNS02LjM1OS0yLjQ4Ni0xMi44MzktNy44NTgtMTcuNjg3LTUuMzcyLTQuODQ3LTEzLjUyNi03Ljk5Ny0yNC42NTQtNy45OTFIMzcuODN2OTcuNzI4aDM2LjA3M2MxMi44NyAwIDIxLjkwNi0zLjQ4MiAyNy43MjItOC42NSA1LjgxOC01LjE1NSA4LjMyLTExLjkxIDguMzEyLTE4LjEzOHpNMCAxMzUuNjk4aDE0NC4xOTdWMEgwdjEzNS42OTd6Ii8+PHBhdGggZD0iTTI1OC42NjIgODguMTk4Yy0uMDEzIDMuMjI5LTEuMDA3IDYuNDc1LTMuODk2IDkuMDExLTIuODg0IDIuNTM3LTcuODczIDQuNDYzLTE2LjEzMyA0LjQ2M0gyMjJWNzVoMTUuODkzYzcuNDExIDAgMTIuNjcgMS41MDIgMTUuOTY1IDMuODUgMy4yODkgMi4zNjIgNC43NzYgNS40NjMgNC44MDQgOS4zNDgiLz48cGF0aCBkPSJNOTEuNjYyIDg4LjE5OGMtLjAxMyAzLjIyOS0xLjAwNyA2LjQ3NS0zLjg5NiA5LjAxMS0yLjg4NCAyLjUzNy03Ljg3NCA0LjQ2My0xNi4xMzMgNC40NjNINTVWNzVoMTUuODkyYzcuNDEyIDAgMTIuNjcyIDEuNTAyIDE1Ljk2NiAzLjg1IDMuMjg5IDIuMzYyIDQuNzc2IDUuNDYzIDQuODA0IDkuMzQ4Ii8+PHBhdGggZD0iTTI0NS4xODYgNTUuNzljMy4wOTYtMi4yMzcgNC41OS01LjM4NiA0LjYxMy0xMC4xMjQtLjAxNS0zLjI1LS45NDMtNi4wMzMtMy4yODEtOC4xMTEtMi4zNDYtMi4wNzgtNi4zMy0zLjU1NS0xMi43NTQtMy41NTVIMjIydjI1LjI3NWg4LjA3NmM2Ljk4OC4wMDQgMTEuOTk4LTEuMjQzIDE1LjExLTMuNDg2Ii8+PHBhdGggZD0iTTc4LjE4NiA1NS43OWMzLjA5Ni0yLjIzNyA0LjU5LTUuMzg2IDQuNjEzLTEwLjEyNC0uMDE1LTMuMjUtLjk0My02LjAzMy0zLjI4Mi04LjExMUM3Ny4xNzIgMzUuNDc3IDczLjE4OCAzNCA2Ni43NjQgMzRINTV2MjUuMjc1aDguMDc2YzYuOTg4LjAwNCAxMS45OTgtMS4yNDMgMTUuMTEtMy40ODYiLz48L2c+PC9nPjwvZz48L3N2Zz4K);
}
@media (min-width: 25rem) {
.emotion-4 {
-webkit-background-size: 77px 22px;
background-size: 77px 22px;
}
}
@media (min-width: 63rem) {
.emotion-4 {
-webkit-background-size: 93px 27px;
background-size: 93px 27px;
}
}
.emotion-6 {
display: inline-block;
width: 100%;
}
@media (min-width: 37.5rem) and (max-width: 62.9375rem) {
.emotion-6 {
width: 66.67%;
padding-right: 1rem;
}
}
@supports (grid-template-columns: fit-content(200px)) {
.emotion-6 {
width: initial;
grid-column: 1/span 6;
}
@media (min-width: 37.5rem) and (max-width: 62.9375rem) {
.emotion-6 {
grid-column: 3/span 4;
padding: 0;
}
}
}
.emotion-8 {
color: #222222;
margin: 0;
padding: 0.5rem;
font-family: Helmet,Freesans,Helvetica,Arial,sans-serif;
font-weight: 700;
font-style: normal;
font-size: 0.9375rem;
line-height: 1.25rem;
}
@media (min-width: 20rem) and (max-width: 37.4375rem) {
.emotion-8 {
font-size: 1rem;
line-height: 1.25rem;
}
}
@media (min-width: 37.5rem) {
.emotion-8 {
font-size: 1rem;
line-height: 1.25rem;
}
}
@media (min-width: 37.5rem) and (max-width: 62.9375rem) {
.emotion-8 {
padding-top: 0.5rem;
padding-bottom: 0.5rem;
padding-left: 0;
}
}
.emotion-10 {
position: static;
color: #222222;
-webkit-text-decoration: none;
text-decoration: none;
overflow-wrap: break-word;
display: inline-block;
}
.emotion-10:before {
bottom: 0;
content: '';
left: 0;
overflow: hidden;
position: absolute;
right: 0;
top: 0;
white-space: nowrap;
z-index: 1;
}
.emotion-10:hover,
.emotion-10:focus {
-webkit-text-decoration: underline;
text-decoration: underline;
}
.emotion-10:visited {
color: #6E6E73;
}
.emotion-12 {
color: #006666;
display: inline-block;
vertical-align: -0.125rem;
position: relative;
-webkit-margin-end: 0.25rem;
margin-inline-end: 0.25rem;
width: 0.9375rem;
height: 0.9375rem;
}
@media (min-width: 25rem) {
.emotion-12 {
width: 1rem;
height: 1rem;
}
}
@media (prefers-reduced-motion: no-preference) {
.emotion-13 {
-webkit-animation: animation-0 1.25s cubic-bezier(0.455, 0.03, 0.515, 0.955) 0.5s 3;
animation: animation-0 1.25s cubic-bezier(0.455, 0.03, 0.515, 0.955) 0.5s 3;
}
}
.emotion-14 {
color: #006666;
display: inline-block;
font-family: Helmet,Freesans,Helvetica,Arial,sans-serif;
font-style: normal;
font-weight: 700;
-webkit-margin-end: 0.5rem;
margin-inline-end: 0.5rem;
}
.emotion-15 {
-webkit-clip-path: inset(100%);
clip-path: inset(100%);
clip: rect(1px, 1px, 1px, 1px);
height: 1px;
overflow: hidden;
position: absolute;
width: 1px;
margin: 0;
}
.emotion-16 {
color: #3F3F42;
margin: 0;
padding: 0 0.5rem 1rem;
font-size: 0.9375rem;
line-height: 1.125rem;
font-family: Helmet,Freesans,Helvetica,Arial,sans-serif;
font-weight: 400;
font-style: normal;
}
@media (min-width: 20rem) and (max-width: 37.4375rem) {
.emotion-16 {
font-size: 0.9375rem;
line-height: 1.125rem;
}
}
@media (min-width: 37.5rem) {
.emotion-16 {
font-size: 0.875rem;
line-height: 1.125rem;
}
}
@media (min-width: 37.5rem) and (max-width: 62.9375rem) {
.emotion-16 {
padding-left: 0;
}
}
.emotion-18 {
background-color: #B80000;
border: 0.0625rem solid transparent;
color: #FFFFFF;
padding: 0.75rem;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
font-size: 0.9375rem;
line-height: 1.25rem;
font-family: Helmet,Freesans,Helvetica,Arial,sans-serif;
font-weight: 400;
font-style: normal;
}
@media (min-width: 20rem) and (max-width: 37.4375rem) {
.emotion-18 {
font-size: 1rem;
line-height: 1.25rem;
}
}
@media (min-width: 37.5rem) {
.emotion-18 {
font-size: 1rem;
line-height: 1.25rem;
}
}
@media (min-width: 37.5rem) and (max-width: 62.9375rem) {
.emotion-18 {
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
padding: 0.5rem 1rem;
margin-bottom: 1rem;
}
}
.emotion-20 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding-right: 0.5rem;
}
.emotion-20>svg {
color: #FFFFFF;
fill: currentColor;
width: 1.0625rem;
height: 1rem;
margin: 0;
}
.emotion-22 {
vertical-align: middle;
margin: 0 0.25rem;
color: #222222;
fill: currentColor;
width: 0.75rem;
height: 0.75rem;
}
<div>
<div
class="emotion-0 emotion-1"
>
<div
class="emotion-2 emotion-3"
>
<div
class="emotion-4 emotion-5"
data-e2e="image-placeholder"
style="padding-bottom: 56.21212121212121%;"
>
<div
class="lazyload-wrapper "
>
<div
class="lazyload-placeholder"
/>
</div>
</div>
</div>
<div
class="emotion-6 emotion-7"
dir="ltr"
>
<h3
class="emotion-8 emotion-9"
dir="ltr"
>
<a
aria-labelledby="bulletin-TestRadioBulletinpromonews"
class="focusIndicatorDisplayBlock emotion-10 emotion-11"
href="https://www.bbc.co.uk/news"
>
<svg
aria-hidden="true"
class="emotion-12"
fill="currentColor"
focusable="false"
height="16"
viewBox="0 0 32 32"
width="16"
>
<path
d="M16 4c6.6 0 12 5.4 12 12s-5.4 12-12 12S4 22.6 4 16 9.4 4 16 4zm0-4C7.2 0 0 7.2 0 16s7.2 16 16 16 16-7.2 16-16S24.8 0 16 0z"
/>
<circle
class="emotion-13"
cx="16"
cy="16"
r="8.5"
/>
</svg>
<span
id="bulletin-TestRadioBulletinpromonews"
role="text"
>
<span
aria-hidden="true"
class="emotion-14"
dir="ltr"
>
NA EME UGBU A
</span>
<span
class="emotion-15"
lang="en-GB"
>
Gee ntị Live,
</span>
Test Radio Bulletin promo
</span>
</a>
</h3>
<p
class="emotion-16 emotion-17"
dir="ltr"
>
Test Radio summary
</p>
<div
aria-hidden="true"
class="emotion-18 emotion-19"
dir="ltr"
>
<span
class="emotion-20 emotion-21"
dir="ltr"
>
<svg
aria-hidden="true"
class="emotion-22 emotion-23"
focusable="false"
height="12px"
viewBox="0 0 13 12"
width="13px"
>
<path
d="M9.021 1.811l-.525.525c.938.938 1.5 2.25 1.5 3.675s-.563 2.738-1.5 3.675l.525.525c1.05-1.087 1.725-2.55 1.725-4.2s-.675-3.112-1.725-4.2z"
/>
<path
d="M10.596.199l-.525.562c1.35 1.35 2.175 3.225 2.175 5.25s-.825 3.9-2.175 5.25l.525.525c1.5-1.462 2.4-3.525 2.4-5.775s-.9-4.312-2.4-5.812zM6.996 1.511l-2.25 2.25H.996v4.5h3.75l2.25 2.25z"
/>
</svg>
</span>
Gee ntị
</div>
</div>
</div>
</div>
`;
exports[`Bulletin Container snapshots should render a Live TV bulletin correctly 1`] = `
@keyframes animation-0 {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.emotion-0 {
position: relative;
background-color: #F2F2F2;
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-column-gap: 1rem;
}
@media (min-width: 37.5rem) {
.emotion-0 {
padding: 1rem;
}
}
.emotion-2 {
vertical-align: top;
display: inline-block;
width: 100%;
padding: 0.5rem 0.5rem 0 0.5rem;
}
@media (min-width: 37.5rem) {
.emotion-2 {
width: 50%;
}
}
@media (min-width: 37.5rem) {
.emotion-2 {
padding: 0;
}
}
@supports (grid-template-columns: fit-content(200px)) {
.emotion-2 {
width: initial;
grid-column: 1/span 6;
}
@media (min-width: 37.5rem) {
.emotion-2 {
grid-column: 1/span 3;
}
}
}
.emotion-4 {
position: relative;
height: 0;
overflow: hidden;
background-color: #F2F2F2;
-webkit-background-position: center center;
background-position: center center;
background-repeat: no-repeat;
-webkit-background-size: 60px 17px;
background-size: 60px 17px;
width: 100%;
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHdpZHRoPSI0NzkiIGhlaWdodD0iMTM2IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+PGcgZmlsbD0iI0Q1RDBDRCI+PGc+PHBhdGggZD0iTTQ0OS41NTYgOTEuNTUzbC0yLjMxIDEuNDFjLTExLjE2NyA2LjgxOC0yMy4zMTMgMTAuNDc0LTM0LjM0NiAxMC40Ny0yMy42MS0uMDktMzkuMTYzLTE0LjA4My0zOS4yMjctMzQuNDUzLjAzLTE5LjkxOCAxNi4yNy0zNC42NjMgMzguNjMzLTM0LjcxOCAxMS4zODcuMDEgMjEuNzAzIDIuOTU0IDMzLjk2MiA5LjY3MmwyLjI1MSAxLjI0di0xOC4xOWwtLjk2Mi0uMzc3Yy0xMy44MjQtNS40NTgtMjQuNTMtNy44OS0zNS4xMDMtNy44ODQtMTYuMzQ2LS4wMDYtMzAuNTMzIDUuMzk0LTQwLjYzNyAxNC41NTctMTAuMTA1IDkuMTYzLTE2LjEwNiAyMi4xMDItMTYuMDk5IDM2Ljk1My4wMDggMTAuMzQ4IDQuMjc5IDIyLjQ4IDEzLjQyIDMyLjEwNSA5LjEyMSA5LjYyOCAyMy4xNjUgMTYuNjQ4IDQyLjQzIDE2LjYzOWguMDYzYzE1Ljk4IDAgMjcuMDYyLTMuNTYzIDM3LjA3NC04LjQ5MmwuODUxLS40MTRWOTEuNTUzek0zMzQgMTM1LjY5N2gxNDQuMTk1VjBIMzM0djEzNS42OTd6Ii8+PHBhdGggZD0iTTI3Ni45MzcgODkuOTY4Yy4wNDEtMTIuMzMtOC4xNzEtMjEuNjk2LTIxLjMwOC0yNS4zIDMuNTQ0LTEuODA5IDYuMzUtNC4wMjMgOC40MDQtNi43MjcgMi43NS0zLjYyMiA0LjA2MS04LjA2NCA0LjA0Ni0xMy4yMzUuMDE1LTYuMzU5LTIuNDg2LTEyLjgzOS03Ljg1OC0xNy42ODctNS4zNzItNC44NDctMTMuNTI2LTcuOTk3LTI0LjY1NC03Ljk5MUgyMDQuODN2OTcuNzI4aDM2LjA3M2MxMi44NyAwIDIxLjkwNi0zLjQ4MiAyNy43MjItOC42NSA1LjgxOC01LjE1NSA4LjMyLTExLjkxIDguMzEyLTE4LjEzOHpNMTY3IDEzNS42OThoMTQ0LjE5N1YwSDE2N3YxMzUuNjk3eiIvPjxwYXRoIGQ9Ik0xMDkuOTM3IDg5Ljk2OGMuMDQxLTEyLjMzLTguMTcxLTIxLjY5Ni0yMS4zMDgtMjUuMyAzLjU0NC0xLjgwOSA2LjM1LTQuMDIzIDguNDA0LTYuNzI3IDIuNzUtMy42MjIgNC4wNjEtOC4wNjQgNC4wNDYtMTMuMjM1LjAxNS02LjM1OS0yLjQ4Ni0xMi44MzktNy44NTgtMTcuNjg3LTUuMzcyLTQuODQ3LTEzLjUyNi03Ljk5Ny0yNC42NTQtNy45OTFIMzcuODN2OTcuNzI4aDM2LjA3M2MxMi44NyAwIDIxLjkwNi0zLjQ4MiAyNy43MjItOC42NSA1LjgxOC01LjE1NSA4LjMyLTExLjkxIDguMzEyLTE4LjEzOHpNMCAxMzUuNjk4aDE0NC4xOTdWMEgwdjEzNS42OTd6Ii8+PHBhdGggZD0iTTI1OC42NjIgODguMTk4Yy0uMDEzIDMuMjI5LTEuMDA3IDYuNDc1LTMuODk2IDkuMDExLTIuODg0IDIuNTM3LTcuODczIDQuNDYzLTE2LjEzMyA0LjQ2M0gyMjJWNzVoMTUuODkzYzcuNDExIDAgMTIuNjcgMS41MDIgMTUuOTY1IDMuODUgMy4yODkgMi4zNjIgNC43NzYgNS40NjMgNC44MDQgOS4zNDgiLz48cGF0aCBkPSJNOTEuNjYyIDg4LjE5OGMtLjAxMyAzLjIyOS0xLjAwNyA2LjQ3NS0zLjg5NiA5LjAxMS0yLjg4NCAyLjUzNy03Ljg3NCA0LjQ2My0xNi4xMzMgNC40NjNINTVWNzVoMTUuODkyYzcuNDEyIDAgMTIuNjcyIDEuNTAyIDE1Ljk2NiAzLjg1IDMuMjg5IDIuMzYyIDQuNzc2IDUuNDYzIDQuODA0IDkuMzQ4Ii8+PHBhdGggZD0iTTI0NS4xODYgNTUuNzljMy4wOTYtMi4yMzcgNC41OS01LjM4NiA0LjYxMy0xMC4xMjQtLjAxNS0zLjI1LS45NDMtNi4wMzMtMy4yODEtOC4xMTEtMi4zNDYtMi4wNzgtNi4zMy0zLjU1NS0xMi43NTQtMy41NTVIMjIydjI1LjI3NWg4LjA3NmM2Ljk4OC4wMDQgMTEuOTk4LTEuMjQzIDE1LjExLTMuNDg2Ii8+PHBhdGggZD0iTTc4LjE4NiA1NS43OWMzLjA5Ni0yLjIzNyA0LjU5LTUuMzg2IDQuNjEzLTEwLjEyNC0uMDE1LTMuMjUtLjk0My02LjAzMy0zLjI4Mi04LjExMUM3Ny4xNzIgMzUuNDc3IDczLjE4OCAzNCA2Ni43NjQgMzRINTV2MjUuMjc1aDguMDc2YzYuOTg4LjAwNCAxMS45OTgtMS4yNDMgMTUuMTEtMy40ODYiLz48L2c+PC9nPjwvZz48L3N2Zz4K);
}
@media (min-width: 25rem) {
.emotion-4 {
-webkit-background-size: 77px 22px;
background-size: 77px 22px;
}
}
@media (min-width: 63rem) {
.emotion-4 {
-webkit-background-size: 93px 27px;
background-size: 93px 27px;
}
}
.emotion-6 {
display: inline-block;
width: 100%;
}
@media (min-width: 37.5rem) {
.emotion-6 {
width: 50%;
padding-right: 1rem;
}
}
@supports (grid-template-columns: fit-content(200px)) {
.emotion-6 {
width: initial;
grid-column: 1/span 6;
}
@media (min-width: 37.5rem) {
.emotion-6 {
grid-column: 4/span 3;
padding: 0;
}
}
}
.emotion-8 {
color: #222222;
margin: 0;
padding: 0.5rem;
font-family: Helmet,Freesans,Helvetica,Arial,sans-serif;
font-weight: 700;
font-style: normal;
font-size: 1.125rem;
line-height: 1.375rem;
}
@media (min-width: 20rem) and (max-width: 37.4375rem) {
.emotion-8 {
font-size: 1.125rem;
line-height: 1.375rem;
}
}
@media (min-width: 37.5rem) {
.emotion-8 {
font-size: 1.25rem;
line-height: 1.5rem;
}
}
@media (min-width: 37.5rem) {
.emotion-8 {
padding: 0 0 0.5rem 0;
}
}
.emotion-10 {
position: static;
color: #222222;
-webkit-text-decoration: none;
text-decoration: none;
overflow-wrap: break-word;
display: inline-block;
}
.emotion-10:before {
bottom: 0;
content: '';
left: 0;
overflow: hidden;
position: absolute;
right: 0;
top: 0;
white-space: nowrap;
z-index: 1;
}
.emotion-10:hover,
.emotion-10:focus {
-webkit-text-decoration: underline;
text-decoration: underline;
}
.emotion-10:visited {
color: #6E6E73;
}
.emotion-12 {
color: #006666;
display: inline-block;
vertical-align: -0.125rem;
position: relative;
-webkit-margin-end: 0.25rem;
margin-inline-end: 0.25rem;
width: 0.9375rem;
height: 0.9375rem;
}
@media (min-width: 25rem) {
.emotion-12 {
width: 1rem;
height: 1rem;
}
}
@media (prefers-reduced-motion: no-preference) {
.emotion-13 {
-webkit-animation: animation-0 1.25s cubic-bezier(0.455, 0.03, 0.515, 0.955) 0.5s 3;
animation: animation-0 1.25s cubic-bezier(0.455, 0.03, 0.515, 0.955) 0.5s 3;
}
}
.emotion-14 {
color: #006666;
display: inline-block;
font-family: Helmet,Freesans,Helvetica,Arial,sans-serif;
font-style: normal;
font-weight: 700;
-webkit-margin-end: 0.5rem;
margin-inline-end: 0.5rem;
}
.emotion-15 {
-webkit-clip-path: inset(100%);
clip-path: inset(100%);
clip: rect(1px, 1px, 1px, 1px);
height: 1px;
overflow: hidden;
position: absolute;
width: 1px;
margin: 0;
}
.emotion-16 {
color: #3F3F42;
margin: 0;
padding: 0 0.5rem 1rem;
font-size: 0.9375rem;
line-height: 1.125rem;
font-family: Helmet,Freesans,Helvetica,Arial,sans-serif;
font-weight: 400;
font-style: normal;
}
@media (min-width: 20rem) and (max-width: 37.4375rem) {
.emotion-16 {
font-size: 0.9375rem;
line-height: 1.125rem;
}
}
@media (min-width: 37.5rem) {
.emotion-16 {
font-size: 0.875rem;
line-height: 1.125rem;
}
}
@media (min-width: 37.5rem) {
.emotion-16 {
padding-left: 0;
padding-right: 0;
}
}
.emotion-18 {
background-color: #B80000;
border: 0.0625rem solid transparent;
color: #FFFFFF;
padding: 0.75rem;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
font-size: 0.9375rem;
line-height: 1.25rem;
font-family: Helmet,Freesans,Helvetica,Arial,sans-serif;
font-weight: 400;
font-style: normal;
}
@media (min-width: 20rem) and (max-width: 37.4375rem) {
.emotion-18 {
font-size: 1rem;
line-height: 1.25rem;
}
}
@media (min-width: 37.5rem) {
.emotion-18 {
font-size: 1rem;
line-height: 1.25rem;
}
}
@media (min-width: 37.5rem) {
.emotion-18 {
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
padding: 0.5rem 1rem;
}
}
.emotion-20 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding-right: 0.5rem;
}
.emotion-20>svg {
color: #FFFFFF;
fill: currentColor;
width: 1.0625rem;
height: 1rem;
margin: 0;
}
.emotion-22 {
vertical-align: middle;
margin: 0 0.25rem;
color: #222222;
fill: currentColor;
width: 0.75rem;
height: 0.75rem;
}
<div>
<div
class="emotion-0 emotion-1"
>
<div
class="emotion-2 emotion-3"
>
<div
class="emotion-4 emotion-5"
data-e2e="image-placeholder"
style="padding-bottom: 56.21212121212121%;"
>
<div
class="lazyload-wrapper "
>
<div
class="lazyload-placeholder"
/>
</div>
</div>
</div>
<div
class="emotion-6 emotion-7"
dir="ltr"
>
<h3
class="emotion-8 emotion-9"
dir="ltr"
>
<a
aria-labelledby="bulletin-TestTVBulletinpromonews"
class="focusIndicatorDisplayBlock emotion-10 emotion-11"
href="https://www.bbc.co.uk/news"
>
<svg
aria-hidden="true"
class="emotion-12"
fill="currentColor"
focusable="false"
height="16"
viewBox="0 0 32 32"
width="16"
>
<path
d="M16 4c6.6 0 12 5.4 12 12s-5.4 12-12 12S4 22.6 4 16 9.4 4 16 4zm0-4C7.2 0 0 7.2 0 16s7.2 16 16 16 16-7.2 16-16S24.8 0 16 0z"
/>
<circle
class="emotion-13"
cx="16"
cy="16"
r="8.5"
/>
</svg>
<span
id="bulletin-TestTVBulletinpromonews"
role="text"
>
<span
aria-hidden="true"
class="emotion-14"
dir="ltr"
>
NA EME UGBU A
</span>
<span
class="emotion-15"
lang="en-GB"
>
Lee Live,
</span>
Test TV Bulletin promo
</span>
</a>
</h3>
<p
class="emotion-16 emotion-17"
dir="ltr"
>
Test TV summary
</p>
<div
aria-hidden="true"
class="emotion-18 emotion-19"
dir="ltr"
>
<span
class="emotion-20 emotion-21"
dir="ltr"
>
<svg
aria-hidden="true"
class="emotion-22 emotion-23"
focusable="false"
height="12"
viewBox="0 0 12 12"
width="12"
xmlns="http://www.w3.org/2000/svg"
>
<g
fill="none"
fill-rule="evenodd"
>
<path
d="M.5.6h12v12H.5z"
/>
<path
d="M2.144.96v11.28l8.712-5.64z"
fill="currentColor"
/>
</g>
</svg>
</span>
Lee
</div>
</div>
</div>
</div>
`;
exports[`Bulletin Container snapshots should render a Radio bulletin correctly 1`] = `
.emotion-0 {
position: relative;
background-color: #F2F2F2;
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-column-gap: 1rem;
background-color: #F2F2F2;
}
.emotion-2 {
vertical-align: top;
display: inline-block;
width: 100%;
padding: 0.5rem 0.5rem 0 0.5rem;
}
@media (min-width: 37.5rem) and (max-width: 62.9375rem) {
.emotion-2 {
width: 33.33%;
}
}
@media (min-width: 37.5rem) {
.emotion-2 {
padding: 0;
}
}
@supports (grid-template-columns: fit-content(200px)) {
.emotion-2 {
width: initial;
grid-column: 1/span 6;
}
@media (min-width: 37.5rem) and (max-width: 62.9375rem) {
.emotion-2 {
grid-column: 1/span 2;
}
}
}
.emotion-4 {
position: relative;
height: 0;
overflow: hidden;
background-color: #F2F2F2;
-webkit-background-position: center center;
background-position: center center;
background-repeat: no-repeat;
-webkit-background-size: 60px 17px;
background-size: 60px 17px;
width: 100%;
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHdpZHRoPSI0NzkiIGhlaWdodD0iMTM2IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+PGcgZmlsbD0iI0Q1RDBDRCI+PGc+PHBhdGggZD0iTTQ0OS41NTYgOTEuNTUzbC0yLjMxIDEuNDFjLTExLjE2NyA2LjgxOC0yMy4zMTMgMTAuNDc0LTM0LjM0NiAxMC40Ny0yMy42MS0uMDktMzkuMTYzLTE0LjA4My0zOS4yMjctMzQuNDUzLjAzLTE5LjkxOCAxNi4yNy0zNC42NjMgMzguNjMzLTM0LjcxOCAxMS4zODcuMDEgMjEuNzAzIDIuOTU0IDMzLjk2MiA5LjY3MmwyLjI1MSAxLjI0di0xOC4xOWwtLjk2Mi0uMzc3Yy0xMy44MjQtNS40NTgtMjQuNTMtNy44OS0zNS4xMDMtNy44ODQtMTYuMzQ2LS4wMDYtMzAuNTMzIDUuMzk0LTQwLjYzNyAxNC41NTctMTAuMTA1IDkuMTYzLTE2LjEwNiAyMi4xMDItMTYuMDk5IDM2Ljk1My4wMDggMTAuMzQ4IDQuMjc5IDIyLjQ4IDEzLjQyIDMyLjEwNSA5LjEyMSA5LjYyOCAyMy4xNjUgMTYuNjQ4IDQyLjQzIDE2LjYzOWguMDYzYzE1Ljk4IDAgMjcuMDYyLTMuNTYzIDM3LjA3NC04LjQ5MmwuODUxLS40MTRWOTEuNTUzek0zMzQgMTM1LjY5N2gxNDQuMTk1VjBIMzM0djEzNS42OTd6Ii8+PHBhdGggZD0iTTI3Ni45MzcgODkuOTY4Yy4wNDEtMTIuMzMtOC4xNzEtMjEuNjk2LTIxLjMwOC0yNS4zIDMuNTQ0LTEuODA5IDYuMzUtNC4wMjMgOC40MDQtNi43MjcgMi43NS0zLjYyMiA0LjA2MS04LjA2NCA0LjA0Ni0xMy4yMzUuMDE1LTYuMzU5LTIuNDg2LTEyLjgzOS03Ljg1OC0xNy42ODctNS4zNzItNC44NDctMTMuNTI2LTcuOTk3LTI0LjY1NC03Ljk5MUgyMDQuODN2OTcuNzI4aDM2LjA3M2MxMi44NyAwIDIxLjkwNi0zLjQ4MiAyNy43MjItOC42NSA1LjgxOC01LjE1NSA4LjMyLTExLjkxIDguMzEyLTE4LjEzOHpNMTY3IDEzNS42OThoMTQ0LjE5N1YwSDE2N3YxMzUuNjk3eiIvPjxwYXRoIGQ9Ik0xMDkuOTM3IDg5Ljk2OGMuMDQxLTEyLjMzLTguMTcxLTIxLjY5Ni0yMS4zMDgtMjUuMyAzLjU0NC0xLjgwOSA2LjM1LTQuMDIzIDguNDA0LTYuNzI3IDIuNzUtMy42MjIgNC4wNjEtOC4wNjQgNC4wNDYtMTMuMjM1LjAxNS02LjM1OS0yLjQ4Ni0xMi44MzktNy44NTgtMTcuNjg3LTUuMzcyLTQuODQ3LTEzLjUyNi03Ljk5Ny0yNC42NTQtNy45OTFIMzcuODN2OTcuNzI4aDM2LjA3M2MxMi44NyAwIDIxLjkwNi0zLjQ4MiAyNy43MjItOC42NSA1LjgxOC01LjE1NSA4LjMyLTExLjkxIDguMzEyLTE4LjEzOHpNMCAxMzUuNjk4aDE0NC4xOTdWMEgwdjEzNS42OTd6Ii8+PHBhdGggZD0iTTI1OC42NjIgODguMTk4Yy0uMDEzIDMuMjI5LTEuMDA3IDYuNDc1LTMuODk2IDkuMDExLTIuODg0IDIuNTM3LTcuODczIDQuNDYzLTE2LjEzMyA0LjQ2M0gyMjJWNzVoMTUuODkzYzcuNDExIDAgMTIuNjcgMS41MDIgMTUuOTY1IDMuODUgMy4yODkgMi4zNjIgNC43NzYgNS40NjMgNC44MDQgOS4zNDgiLz48cGF0aCBkPSJNOTEuNjYyIDg4LjE5OGMtLjAxMyAzLjIyOS0xLjAwNyA2LjQ3NS0zLjg5NiA5LjAxMS0yLjg4NCAyLjUzNy03Ljg3NCA0LjQ2My0xNi4xMzMgNC40NjNINTVWNzVoMTUuODkyYzcuNDEyIDAgMTIuNjcyIDEuNTAyIDE1Ljk2NiAzLjg1IDMuMjg5IDIuMzYyIDQuNzc2IDUuNDYzIDQuODA0IDkuMzQ4Ii8+PHBhdGggZD0iTTI0NS4xODYgNTUuNzljMy4wOTYtMi4yMzcgNC41OS01LjM4NiA0LjYxMy0xMC4xMjQtLjAxNS0zLjI1LS45NDMtNi4wMzMtMy4yODEtOC4xMTEtMi4zNDYtMi4wNzgtNi4zMy0zLjU1NS0xMi43NTQtMy41NTVIMjIydjI1LjI3NWg4LjA3NmM2Ljk4OC4wMDQgMTEuOTk4LTEuMjQzIDE1LjExLTMuNDg2Ii8+PHBhdGggZD0iTTc4LjE4NiA1NS43OWMzLjA5Ni0yLjIzNyA0LjU5LTUuMzg2IDQuNjEzLTEwLjEyNC0uMDE1LTMuMjUtLjk0My02LjAzMy0zLjI4Mi04LjExMUM3Ny4xNzIgMzUuNDc3IDczLjE4OCAzNCA2Ni43NjQgMzRINTV2MjUuMjc1aDguMDc2YzYuOTg4LjAwNCAxMS45OTgtMS4yNDMgMTUuMTEtMy40ODYiLz48L2c+PC9nPjwvZz48L3N2Zz4K);
}
@media (min-width: 25rem) {
.emotion-4 {
-webkit-background-size: 77px 22px;
background-size: 77px 22px;
}
}
@media (min-width: 63rem) {
.emotion-4 {
-webkit-background-size: 93px 27px;
background-size: 93px 27px;
}
}
.emotion-6 {
display: inline-block;
width: 100%;
}
@media (min-width: 37.5rem) and (max-width: 62.9375rem) {
.emotion-6 {
width: 66.67%;
padding-right: 1rem;
}
}
@supports (grid-template-columns: fit-content(200px)) {
.emotion-6 {
width: initial;
grid-column: 1/span 6;
}
@media (min-width: 37.5rem) and (max-width: 62.9375rem) {
.emotion-6 {
grid-column: 3/span 4;
padding: 0;
}
}
}
.emotion-8 {
color: #222222;
margin: 0;
padding: 0.5rem;
font-family: Helmet,Freesans,Helvetica,Arial,sans-serif;
font-weight: 700;
font-style: normal;
font-size: 0.9375rem;
line-height: 1.25rem;
}
@media (min-width: 20rem) and (max-width: 37.4375rem) {
.emotion-8 {
font-size: 1rem;
line-height: 1.25rem;
}
}
@media (min-width: 37.5rem) {
.emotion-8 {
font-size: 1rem;
line-height: 1.25rem;
}
}
@media (min-width: 37.5rem) and (max-width: 62.9375rem) {
.emotion-8 {
padding-top: 0.5rem;
padding-bottom: 0.5rem;
padding-left: 0;
}
}
.emotion-10 {
position: static;
color: #222222;
-webkit-text-decoration: none;
text-decoration: none;
overflow-wrap: break-word;
display: inline-block;
}
.emotion-10:before {
bottom: 0;
content: '';
left: 0;
overflow: hidden;
position: absolute;
right: 0;
top: 0;
white-space: nowrap;
z-index: 1;
}
.emotion-10:hover,
.emotion-10:focus {
-webkit-text-decoration: underline;
text-decoration: underline;
}
.emotion-10:visited {
color: #6E6E73;
}
.emotion-12 {
-webkit-clip-path: inset(100%);
clip-path: inset(100%);
clip: rect(1px, 1px, 1px, 1px);
height: 1px;
overflow: hidden;
position: absolute;
width: 1px;
margin: 0;
}
.emotion-13 {
color: #3F3F42;
margin: 0;
padding: 0 0.5rem 1rem;
font-size: 0.9375rem;
line-height: 1.125rem;
font-family: Helmet,Freesans,Helvetica,Arial,sans-serif;
font-weight: 400;
font-style: normal;
}
@media (min-width: 20rem) and (max-width: 37.4375rem) {
.emotion-13 {
font-size: 0.9375rem;
line-height: 1.125rem;
}
}
@media (min-width: 37.5rem) {
.emotion-13 {
font-size: 0.875rem;
line-height: 1.125rem;
}
}
@media (min-width: 37.5rem) and (max-width: 62.9375rem) {
.emotion-13 {
padding-left: 0;
}
}
.emotion-15 {
background-color: #222222;
border: 0.0625rem solid transparent;
color: #FFFFFF;
padding: 0.75rem;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
font-size: 0.9375rem;
line-height: 1.25rem;
font-family: Helmet,Freesans,Helvetica,Arial,sans-serif;
font-weight: 400;
font-style: normal;
}
@media (min-width: 20rem) and (max-width: 37.4375rem) {
.emotion-15 {
font-size: 1rem;
line-height: 1.25rem;
}
}
@media (min-width: 37.5rem) {
.emotion-15 {
font-size: 1rem;
line-height: 1.25rem;
}
}
@media (min-width: 37.5rem) and (max-width: 62.9375rem) {
.emotion-15 {
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
padding: 0.5rem 1rem;
margin-bottom: 1rem;
}
}
.emotion-17 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding-right: 0.5rem;
}
.emotion-17>svg {
color: #FFFFFF;
fill: currentColor;
width: 1.0625rem;
height: 1rem;
margin: 0;
}
.emotion-19 {
vertical-align: middle;
margin: 0 0.25rem;
color: #222222;
fill: currentColor;
width: 0.75rem;
height: 0.75rem;
}
<div>
<div
class="emotion-0 emotion-1"
>
<div
class="emotion-2 emotion-3"
>
<div
class="emotion-4 emotion-5"
data-e2e="image-placeholder"
style="padding-bottom: 56.21212121212121%;"
>
<div
class="lazyload-wrapper "
>
<div
class="lazyload-placeholder"
/>
</div>
</div>
</div>
<div
class="emotion-6 emotion-7"
dir="ltr"
>
<h3
class="emotion-8 emotion-9"
dir="ltr"
>
<a
aria-labelledby="bulletin-TestRadioBulletinpromonews"
class="focusIndicatorDisplayBlock emotion-10 emotion-11"
href="https://www.bbc.co.uk/news"
>
<span
id="bulletin-TestRadioBulletinpromonews"
role="text"
>
<span
class="emotion-12"
>
Gee ntị,
</span>
<span>
Test Radio Bulletin promo
</span>
</span>
</a>
</h3>
<p
class="emotion-13 emotion-14"
dir="ltr"
>
Test Radio summary
</p>
<div
aria-hidden="true"
class="emotion-15 emotion-16"
dir="ltr"
>
<span
class="emotion-17 emotion-18"
dir="ltr"
>
<svg
aria-hidden="true"
class="emotion-19 emotion-20"
focusable="false"
height="12px"
viewBox="0 0 13 12"
width="13px"
>
<path
d="M9.021 1.811l-.525.525c.938.938 1.5 2.25 1.5 3.675s-.563 2.738-1.5 3.675l.525.525c1.05-1.087 1.725-2.55 1.725-4.2s-.675-3.112-1.725-4.2z"
/>
<path
d="M10.596.199l-.525.562c1.35 1.35 2.175 3.225 2.175 5.25s-.825 3.9-2.175 5.25l.525.525c1.5-1.462 2.4-3.525 2.4-5.775s-.9-4.312-2.4-5.812zM6.996 1.511l-2.25 2.25H.996v4.5h3.75l2.25 2.25z"
/>
</svg>
</span>
Gee ntị
</div>
</div>
</div>
</div>
`;
exports[`Bulletin Container snapshots should render a TV bulletin correctly 1`] = `
.emotion-0 {
position: relative;
background-color: #F2F2F2;
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-column-gap: 1rem;
}
@media (min-width: 37.5rem) {
.emotion-0 {
padding: 1rem;
}
}
.emotion-2 {
vertical-align: top;
display: inline-block;
width: 100%;
padding: 0.5rem 0.5rem 0 0.5rem;
}
@media (min-width: 37.5rem) {
.emotion-2 {
width: 50%;
}
}
@media (min-width: 37.5rem) {
.emotion-2 {
padding: 0;
}
}
@supports (grid-template-columns: fit-content(200px)) {
.emotion-2 {
width: initial;
grid-column: 1/span 6;
}
@media (min-width: 37.5rem) {
.emotion-2 {
grid-column: 1/span 3;
}
}
}
.emotion-4 {
position: relative;
height: 0;
overflow: hidden;
background-color: #F2F2F2;
-webkit-background-position: center center;
background-position: center center;
background-repeat: no-repeat;
-webkit-background-size: 60px 17px;
background-size: 60px 17px;
width: 100%;
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHdpZHRoPSI0NzkiIGhlaWdodD0iMTM2IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+PGcgZmlsbD0iI0Q1RDBDRCI+PGc+PHBhdGggZD0iTTQ0OS41NTYgOTEuNTUzbC0yLjMxIDEuNDFjLTExLjE2NyA2LjgxOC0yMy4zMTMgMTAuNDc0LTM0LjM0NiAxMC40Ny0yMy42MS0uMDktMzkuMTYzLTE0LjA4My0zOS4yMjctMzQuNDUzLjAzLTE5LjkxOCAxNi4yNy0zNC42NjMgMzguNjMzLTM0LjcxOCAxMS4zODcuMDEgMjEuNzAzIDIuOTU0IDMzLjk2MiA5LjY3MmwyLjI1MSAxLjI0di0xOC4xOWwtLjk2Mi0uMzc3Yy0xMy44MjQtNS40NTgtMjQuNTMtNy44OS0zNS4xMDMtNy44ODQtMTYuMzQ2LS4wMDYtMzAuNTMzIDUuMzk0LTQwLjYzNyAxNC41NTctMTAuMTA1IDkuMTYzLTE2LjEwNiAyMi4xMDItMTYuMDk5IDM2Ljk1My4wMDggMTAuMzQ4IDQuMjc5IDIyLjQ4IDEzLjQyIDMyLjEwNSA5LjEyMSA5LjYyOCAyMy4xNjUgMTYuNjQ4IDQyLjQzIDE2LjYzOWguMDYzYzE1Ljk4IDAgMjcuMDYyLTMuNTYzIDM3LjA3NC04LjQ5MmwuODUxLS40MTRWOTEuNTUzek0zMzQgMTM1LjY5N2gxNDQuMTk1VjBIMzM0djEzNS42OTd6Ii8+PHBhdGggZD0iTTI3Ni45MzcgODkuOTY4Yy4wNDEtMTIuMzMtOC4xNzEtMjEuNjk2LTIxLjMwOC0yNS4zIDMuNTQ0LTEuODA5IDYuMzUtNC4wMjMgOC40MDQtNi43MjcgMi43NS0zLjYyMiA0LjA2MS04LjA2NCA0LjA0Ni0xMy4yMzUuMDE1LTYuMzU5LTIuNDg2LTEyLjgzOS03Ljg1OC0xNy42ODctNS4zNzItNC44NDctMTMuNTI2LTcuOTk3LTI0LjY1NC03Ljk5MUgyMDQuODN2OTcuNzI4aDM2LjA3M2MxMi44NyAwIDIxLjkwNi0zLjQ4MiAyNy43MjItOC42NSA1LjgxOC01LjE1NSA4LjMyLTExLjkxIDguMzEyLTE4LjEzOHpNMTY3IDEzNS42OThoMTQ0LjE5N1YwSDE2N3YxMzUuNjk3eiIvPjxwYXRoIGQ9Ik0xMDkuOTM3IDg5Ljk2OGMuMDQxLTEyLjMzLTguMTcxLTIxLjY5Ni0yMS4zMDgtMjUuMyAzLjU0NC0xLjgwOSA2LjM1LTQuMDIzIDguNDA0LTYuNzI3IDIuNzUtMy42MjIgNC4wNjEtOC4wNjQgNC4wNDYtMTMuMjM1LjAxNS02LjM1OS0yLjQ4Ni0xMi44MzktNy44NTgtMTcuNjg3LTUuMzcyLTQuODQ3LTEzLjUyNi03Ljk5Ny0yNC42NTQtNy45OTFIMzcuODN2OTcuNzI4aDM2LjA3M2MxMi44NyAwIDIxLjkwNi0zLjQ4MiAyNy43MjItOC42NSA1LjgxOC01LjE1NSA4LjMyLTExLjkxIDguMzEyLTE4LjEzOHpNMCAxMzUuNjk4aDE0NC4xOTdWMEgwdjEzNS42OTd6Ii8+PHBhdGggZD0iTTI1OC42NjIgODguMTk4Yy0uMDEzIDMuMjI5LTEuMDA3IDYuNDc1LTMuODk2IDkuMDExLTIuODg0IDIuNTM3LTcuODczIDQuNDYzLTE2LjEzMyA0LjQ2M0gyMjJWNzVoMTUuODkzYzcuNDExIDAgMTIuNjcgMS41MDIgMTUuOTY1IDMuODUgMy4yODkgMi4zNjIgNC43NzYgNS40NjMgNC44MDQgOS4zNDgiLz48cGF0aCBkPSJNOTEuNjYyIDg4LjE5OGMtLjAxMyAzLjIyOS0xLjAwNyA2LjQ3NS0zLjg5NiA5LjAxMS0yLjg4NCAyLjUzNy03Ljg3NCA0LjQ2My0xNi4xMzMgNC40NjNINTVWNzVoMTUuODkyYzcuNDEyIDAgMTIuNjcyIDEuNTAyIDE1Ljk2NiAzLjg1IDMuMjg5IDIuMzYyIDQuNzc2IDUuNDYzIDQuODA0IDkuMzQ4Ii8+PHBhdGggZD0iTTI0NS4xODYgNTUuNzljMy4wOTYtMi4yMzcgNC41OS01LjM4NiA0LjYxMy0xMC4xMjQtLjAxNS0zLjI1LS45NDMtNi4wMzMtMy4yODEtOC4xMTEtMi4zNDYtMi4wNzgtNi4zMy0zLjU1NS0xMi43NTQtMy41NTVIMjIydjI1LjI3NWg4LjA3NmM2Ljk4OC4wMDQgMTEuOTk4LTEuMjQzIDE1LjExLTMuNDg2Ii8+PHBhdGggZD0iTTc4LjE4NiA1NS43OWMzLjA5Ni0yLjIzNyA0LjU5LTUuMzg2IDQuNjEzLTEwLjEyNC0uMDE1LTMuMjUtLjk0My02LjAzMy0zLjI4Mi04LjExMUM3Ny4xNzIgMzUuNDc3IDczLjE4OCAzNCA2Ni43NjQgMzRINTV2MjUuMjc1aDguMDc2YzYuOTg4LjAwNCAxMS45OTgtMS4yNDMgMTUuMTEtMy40ODYiLz48L2c+PC9nPjwvZz48L3N2Zz4K);
}
@media (min-width: 25rem) {
.emotion-4 {
-webkit-background-size: 77px 22px;
background-size: 77px 22px;
}
}
@media (min-width: 63rem) {
.emotion-4 {
-webkit-background-size: 93px 27px;
background-size: 93px 27px;
}
}
.emotion-6 {
display: inline-block;
width: 100%;
}
@media (min-width: 37.5rem) {
.emotion-6 {
width: 50%;
padding-right: 1rem;
}
}
@supports (grid-template-columns: fit-content(200px)) {
.emotion-6 {
width: initial;
grid-column: 1/span 6;
}
@media (min-width: 37.5rem) {
.emotion-6 {
grid-column: 4/span 3;
padding: 0;
}
}
}
.emotion-8 {
color: #222222;
margin: 0;
padding: 0.5rem;
font-family: Helmet,Freesans,Helvetica,Arial,sans-serif;
font-weight: 700;
font-style: normal;
font-size: 1.125rem;
line-height: 1.375rem;
}
@media (min-width: 20rem) and (max-width: 37.4375rem) {
.emotion-8 {
font-size: 1.125rem;
line-height: 1.375rem;
}
}
@media (min-width: 37.5rem) {
.emotion-8 {
font-size: 1.25rem;
line-height: 1.5rem;
}
}
@media (min-width: 37.5rem) {
.emotion-8 {
padding: 0 0 0.5rem 0;
}
}
.emotion-10 {
position: static;
color: #222222;
-webkit-text-decoration: none;
text-decoration: none;
overflow-wrap: break-word;
display: inline-block;
}
.emotion-10:before {
bottom: 0;
content: '';
left: 0;
overflow: hidden;
position: absolute;
right: 0;
top: 0;
white-space: nowrap;
z-index: 1;
}
.emotion-10:hover,
.emotion-10:focus {
-webkit-text-decoration: underline;
text-decoration: underline;
}
.emotion-10:visited {
color: #6E6E73;
}
.emotion-12 {
-webkit-clip-path: inset(100%);
clip-path: inset(100%);
clip: rect(1px, 1px, 1px, 1px);
height: 1px;
overflow: hidden;
position: absolute;
width: 1px;
margin: 0;
}
.emotion-13 {
color: #3F3F42;
margin: 0;
padding: 0 0.5rem 1rem;
font-size: 0.9375rem;
line-height: 1.125rem;
font-family: Helmet,Freesans,Helvetica,Arial,sans-serif;
font-weight: 400;
font-style: normal;
}
@media (min-width: 20rem) and (max-width: 37.4375rem) {
.emotion-13 {
font-size: 0.9375rem;
line-height: 1.125rem;
}
}
@media (min-width: 37.5rem) {
.emotion-13 {
font-size: 0.875rem;
line-height: 1.125rem;
}
}
@media (min-width: 37.5rem) {
.emotion-13 {
padding-left: 0;
padding-right: 0;
}
}
.emotion-15 {
background-color: #222222;
border: 0.0625rem solid transparent;
color: #FFFFFF;
padding: 0.75rem;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
font-size: 0.9375rem;
line-height: 1.25rem;
font-family: Helmet,Freesans,Helvetica,Arial,sans-serif;
font-weight: 400;
font-style: normal;
}
@media (min-width: 20rem) and (max-width: 37.4375rem) {
.emotion-15 {
font-size: 1rem;
line-height: 1.25rem;
}
}
@media (min-width: 37.5rem) {
.emotion-15 {
font-size: 1rem;
line-height: 1.25rem;
}
}
@media (min-width: 37.5rem) {
.emotion-15 {
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
padding: 0.5rem 1rem;
}
}
.emotion-17 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding-right: 0.5rem;
}
.emotion-17>svg {
color: #FFFFFF;
fill: currentColor;
width: 1.0625rem;
height: 1rem;
margin: 0;
}
.emotion-19 {
vertical-align: middle;
margin: 0 0.25rem;
color: #222222;
fill: currentColor;
width: 0.75rem;
height: 0.75rem;
}
<div>
<div
class="emotion-0 emotion-1"
>
<div
class="emotion-2 emotion-3"
>
<div
class="emotion-4 emotion-5"
data-e2e="image-placeholder"
style="padding-bottom: 56.21212121212121%;"
>
<div
class="lazyload-wrapper "
>
<div
class="lazyload-placeholder"
/>
</div>
</div>
</div>
<div
class="emotion-6 emotion-7"
dir="ltr"
>
<h3
class="emotion-8 emotion-9"
dir="ltr"
>
<a
aria-labelledby="bulletin-TestTVBulletinpromonews"
class="focusIndicatorDisplayBlock emotion-10 emotion-11"
href="https://www.bbc.co.uk/news"
>
<span
id="bulletin-TestTVBulletinpromonews"
role="text"
>
<span
class="emotion-12"
>
Lee,
</span>
<span>
Test TV Bulletin promo
</span>
</span>
</a>
</h3>
<p
class="emotion-13 emotion-14"
dir="ltr"
>
Test TV summary
</p>
<div
aria-hidden="true"
class="emotion-15 emotion-16"
dir="ltr"
>
<span
class="emotion-17 emotion-18"
dir="ltr"
>
<svg
aria-hidden="true"
class="emotion-19 emotion-20"
focusable="false"
height="12"
viewBox="0 0 12 12"
width="12"
xmlns="http://www.w3.org/2000/svg"
>
<g
fill="none"
fill-rule="evenodd"
>
<path
d="M.5.6h12v12H.5z"
/>
<path
d="M2.144.96v11.28l8.712-5.64z"
fill="currentColor"
/>
</g>
</svg>
</span>
Lee
</div>
</div>
</div>
</div>
`;
exports[`Bulletin Container snapshots should render a TV bulletin with lang attribute 1`] = `
.emotion-0 {
position: relative;
background-color: #F2F2F2;
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-column-gap: 1rem;
}
@media (min-width: 37.5rem) {
.emotion-0 {
padding: 1rem;
}
}
.emotion-2 {
vertical-align: top;
display: inline-block;
width: 100%;
padding: 0.5rem 0.5rem 0 0.5rem;
}
@media (min-width: 37.5rem) {
.emotion-2 {
width: 50%;
}
}
@media (min-width: 37.5rem) {
.emotion-2 {
padding: 0;
}
}
@supports (grid-template-columns: fit-content(200px)) {
.emotion-2 {
width: initial;
grid-column: 1/span 6;
}
@media (min-width: 37.5rem) {
.emotion-2 {
grid-column: 1/span 3;
}
}
}
.emotion-4 {
position: relative;
height: 0;
overflow: hidden;
background-color: #F2F2F2;
-webkit-background-position: center center;
background-position: center center;
background-repeat: no-repeat;
-webkit-background-size: 60px 17px;
background-size: 60px 17px;
width: 100%;
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHdpZHRoPSI0NzkiIGhlaWdodD0iMTM2IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+PGcgZmlsbD0iI0Q1RDBDRCI+PGc+PHBhdGggZD0iTTQ0OS41NTYgOTEuNTUzbC0yLjMxIDEuNDFjLTExLjE2NyA2LjgxOC0yMy4zMTMgMTAuNDc0LTM0LjM0NiAxMC40Ny0yMy42MS0uMDktMzkuMTYzLTE0LjA4My0zOS4yMjctMzQuNDUzLjAzLTE5LjkxOCAxNi4yNy0zNC42NjMgMzguNjMzLTM0LjcxOCAxMS4zODcuMDEgMjEuNzAzIDIuOTU0IDMzLjk2MiA5LjY3MmwyLjI1MSAxLjI0di0xOC4xOWwtLjk2Mi0uMzc3Yy0xMy44MjQtNS40NTgtMjQuNTMtNy44OS0zNS4xMDMtNy44ODQtMTYuMzQ2LS4wMDYtMzAuNTMzIDUuMzk0LTQwLjYzNyAxNC41NTctMTAuMTA1IDkuMTYzLTE2LjEwNiAyMi4xMDItMTYuMDk5IDM2Ljk1My4wMDggMTAuMzQ4IDQuMjc5IDIyLjQ4IDEzLjQyIDMyLjEwNSA5LjEyMSA5LjYyOCAyMy4xNjUgMTYuNjQ4IDQyLjQzIDE2LjYzOWguMDYzYzE1Ljk4IDAgMjcuMDYyLTMuNTYzIDM3LjA3NC04LjQ5MmwuODUxLS40MTRWOTEuNTUzek0zMzQgMTM1LjY5N2gxNDQuMTk1VjBIMzM0djEzNS42OTd6Ii8+PHBhdGggZD0iTTI3Ni45MzcgODkuOTY4Yy4wNDEtMTIuMzMtOC4xNzEtMjEuNjk2LTIxLjMwOC0yNS4zIDMuNTQ0LTEuODA5IDYuMzUtNC4wMjMgOC40MDQtNi43MjcgMi43NS0zLjYyMiA0LjA2MS04LjA2NCA0LjA0Ni0xMy4yMzUuMDE1LTYuMzU5LTIuNDg2LTEyLjgzOS03Ljg1OC0xNy42ODctNS4zNzItNC44NDctMTMuNTI2LTcuOTk3LTI0LjY1NC03Ljk5MUgyMDQuODN2OTcuNzI4aDM2LjA3M2MxMi44NyAwIDIxLjkwNi0zLjQ4MiAyNy43MjItOC42NSA1LjgxOC01LjE1NSA4LjMyLTExLjkxIDguMzEyLTE4LjEzOHpNMTY3IDEzNS42OThoMTQ0LjE5N1YwSDE2N3YxMzUuNjk3eiIvPjxwYXRoIGQ9Ik0xMDkuOTM3IDg5Ljk2OGMuMDQxLTEyLjMzLTguMTcxLTIxLjY5Ni0yMS4zMDgtMjUuMyAzLjU0NC0xLjgwOSA2LjM1LTQuMDIzIDguNDA0LTYuNzI3IDIuNzUtMy42MjIgNC4wNjEtOC4wNjQgNC4wNDYtMTMuMjM1LjAxNS02LjM1OS0yLjQ4Ni0xMi44MzktNy44NTgtMTcuNjg3LTUuMzcyLTQuODQ3LTEzLjUyNi03Ljk5Ny0yNC42NTQtNy45OTFIMzcuODN2OTcuNzI4aDM2LjA3M2MxMi44NyAwIDIxLjkwNi0zLjQ4MiAyNy43MjItOC42NSA1LjgxOC01LjE1NSA4LjMyLTExLjkxIDguMzEyLTE4LjEzOHpNMCAxMzUuNjk4aDE0NC4xOTdWMEgwdjEzNS42OTd6Ii8+PHBhdGggZD0iTTI1OC42NjIgODguMTk4Yy0uMDEzIDMuMjI5LTEuMDA3IDYuNDc1LTMuODk2IDkuMDExLTIuODg0IDIuNTM3LTcuODczIDQuNDYzLTE2LjEzMyA0LjQ2M0gyMjJWNzVoMTUuODkzYzcuNDExIDAgMTIuNjcgMS41MDIgMTUuOTY1IDMuODUgMy4yODkgMi4zNjIgNC43NzYgNS40NjMgNC44MDQgOS4zNDgiLz48cGF0aCBkPSJNOTEuNjYyIDg4LjE5OGMtLjAxMyAzLjIyOS0xLjAwNyA2LjQ3NS0zLjg5NiA5LjAxMS0yLjg4NCAyLjUzNy03Ljg3NCA0LjQ2My0xNi4xMzMgNC40NjNINTVWNzVoMTUuODkyYzcuNDEyIDAgMTIuNjcyIDEuNTAyIDE1Ljk2NiAzLjg1IDMuMjg5IDIuMzYyIDQuNzc2IDUuNDYzIDQuODA0IDkuMzQ4Ii8+PHBhdGggZD0iTTI0NS4xODYgNTUuNzljMy4wOTYtMi4yMzcgNC41OS01LjM4NiA0LjYxMy0xMC4xMjQtLjAxNS0zLjI1LS45NDMtNi4wMzMtMy4yODEtOC4xMTEtMi4zNDYtMi4wNzgtNi4zMy0zLjU1NS0xMi43NTQtMy41NTVIMjIydjI1LjI3NWg4LjA3NmM2Ljk4OC4wMDQgMTEuOTk4LTEuMjQzIDE1LjExLTMuNDg2Ii8+PHBhdGggZD0iTTc4LjE4NiA1NS43OWMzLjA5Ni0yLjIzNyA0LjU5LTUuMzg2IDQuNjEzLTEwLjEyNC0uMDE1LTMuMjUtLjk0My02LjAzMy0zLjI4Mi04LjExMUM3Ny4xNzIgMzUuNDc3IDczLjE4OCAzNCA2Ni43NjQgMzRINTV2MjUuMjc1aDguMDc2YzYuOTg4LjAwNCAxMS45OTgtMS4yNDMgMTUuMTEtMy40ODYiLz48L2c+PC9nPjwvZz48L3N2Zz4K);
}
@media (min-width: 25rem) {
.emotion-4 {
-webkit-background-size: 77px 22px;
background-size: 77px 22px;
}
}
@media (min-width: 63rem) {
.emotion-4 {
-webkit-background-size: 93px 27px;
background-size: 93px 27px;
}
}
.emotion-6 {
display: inline-block;
width: 100%;
}
@media (min-width: 37.5rem) {
.emotion-6 {
width: 50%;
padding-right: 1rem;
}
}
@supports (grid-template-columns: fit-content(200px)) {
.emotion-6 {
width: initial;
grid-column: 1/span 6;
}
@media (min-width: 37.5rem) {
.emotion-6 {
grid-column: 4/span 3;
padding: 0;
}
}
}
.emotion-8 {
color: #222222;
margin: 0;
padding: 0.5rem;
font-family: ReithSerif,Helvetica,Arial,sans-serif;
font-weight: 500;
font-style: normal;
font-size: 1.125rem;
line-height: 1.375rem;
}
@media (min-width: 20rem) and (max-width: 37.4375rem) {
.emotion-8 {
font-size: 1.125rem;
line-height: 1.375rem;
}
}
@media (min-width: 37.5rem) {
.emotion-8 {
font-size: 1.25rem;
line-height: 1.5rem;
}
}
@media (min-width: 37.5rem) {
.emotion-8 {
padding: 0 0 0.5rem 0;
}
}
.emotion-10 {
position: static;
color: #222222;
-webkit-text-decoration: none;
text-decoration: none;
overflow-wrap: break-word;
display: inline-block;
}
.emotion-10:before {
bottom: 0;
content: '';
left: 0;
overflow: hidden;
position: absolute;
right: 0;
top: 0;
white-space: nowrap;
z-index: 1;
}
.emotion-10:hover,
.emotion-10:focus {
-webkit-text-decoration: underline;
text-decoration: underline;
}
.emotion-10:visited {
color: #6E6E73;
}
.emotion-12 {
-webkit-clip-path: inset(100%);
clip-path: inset(100%);
clip: rect(1px, 1px, 1px, 1px);
height: 1px;
overflow: hidden;
position: absolute;
width: 1px;
margin: 0;
}
.emotion-13 {
color: #3F3F42;
margin: 0;
padding: 0 0.5rem 1rem;
font-size: 0.9375rem;
line-height: 1.125rem;
font-family: ReithSans,Helvetica,Arial,sans-serif;
font-weight: 400;
font-style: normal;
}
@media (min-width: 20rem) and (max-width: 37.4375rem) {
.emotion-13 {
font-size: 0.9375rem;
line-height: 1.125rem;
}
}
@media (min-width: 37.5rem) {
.emotion-13 {
font-size: 0.875rem;
line-height: 1.125rem;
}
}
@media (min-width: 37.5rem) {
.emotion-13 {
padding-left: 0;
padding-right: 0;
}
}
.emotion-15 {
background-color: #222222;
border: 0.0625rem solid transparent;
color: #FFFFFF;
padding: 0.75rem;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
font-size: 0.9375rem;
line-height: 1.25rem;
font-family: ReithSans,Helvetica,Arial,sans-serif;
font-weight: 400;
font-style: normal;
}
@media (min-width: 20rem) and (max-width: 37.4375rem) {
.emotion-15 {
font-size: 1rem;
line-height: 1.25rem;
}
}
@media (min-width: 37.5rem) {
.emotion-15 {
font-size: 1rem;
line-height: 1.25rem;
}
}
@media (min-width: 37.5rem) {
.emotion-15 {
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
padding: 0.5rem 1rem;
}
}
.emotion-17 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding-right: 0.5rem;
}
.emotion-17>svg {
color: #FFFFFF;
fill: currentColor;
width: 1.0625rem;
height: 1rem;
margin: 0;
}
.emotion-19 {
vertical-align: middle;
margin: 0 0.25rem;
color: #222222;
fill: currentColor;
width: 0.75rem;
height: 0.75rem;
}
<div>
<div
class="emotion-0 emotion-1"
>
<div
class="emotion-2 emotion-3"
>
<div
class="emotion-4 emotion-5"
data-e2e="image-placeholder"
style="padding-bottom: 56.21212121212121%;"
>
<div
class="lazyload-wrapper "
>
<div
class="lazyload-placeholder"
/>
</div>
</div>
</div>
<div
class="emotion-6 emotion-7"
dir="ltr"
>
<h3
class="emotion-8 emotion-9"
dir="ltr"
>
<a
aria-labelledby="bulletin-TestTVBulletinpromonews"
class="focusIndicatorDisplayBlock emotion-10 emotion-11"
href="https://www.bbc.co.uk/news"
>
<span
id="bulletin-TestTVBulletinpromonews"
role="text"
>
<span
class="emotion-12"
lang="en-GB"
>
Watch,
</span>
<span>
Test TV Bulletin promo
</span>
</span>
</a>
</h3>
<p
class="emotion-13 emotion-14"
dir="ltr"
>
Test TV summary
</p>
<div
aria-hidden="true"
class="emotion-15 emotion-16"
dir="ltr"
>
<span
class="emotion-17 emotion-18"
dir="ltr"
>
<svg
aria-hidden="true"
class="emotion-19 emotion-20"
focusable="false"
height="12"
viewBox="0 0 12 12"
width="12"
xmlns="http://www.w3.org/2000/svg"
>
<g
fill="none"
fill-rule="evenodd"
>
<path
d="M.5.6h12v12H.5z"
/>
<path
d="M2.144.96v11.28l8.712-5.64z"
fill="currentColor"
/>
</g>
</svg>
</span>
Watch
</div>
</div>
</div>
</div>
`;