Permalink
Find file
db54d5e Nov 29, 2016
@glevitzky @taymonbeal @Gregable
165 lines (141 sloc) 5.4 KB
<!doctype html>
<html ⚡>
<head>
<meta charset="utf-8">
<title>Multi-size Ad Requests with DoubleClick Examples</title>
<link rel="canonical" href="http://nonblocking.io/" >
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<link href='https://fonts.googleapis.com/css?family=Questrial' rel='stylesheet' type='text/css'>
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-element="amp-ad" src="https://cdn.ampproject.org/v0/amp-ad-0.1.js"></script>
<style amp-custom>
.dashedborder {
border: 2px dashed;
}
.artificialfold {
height: 900px;
background: #000;
}
</style>
</head>
<body>
<h1>Multi-size Ad Requests with DoubleClick Examples</h1>
<h2>Resize denied (above fold) - Creative should be centered</h2>
<amp-ad width=480 height=75
type="doubleclick"
data-slot="/4119129/mobile_ad_banner"
data-multi-size="320x50"
class=dashedborder
>
</amp-ad>
<h2>Secondary sizes > primary size (above fold) - Should see 'fallback'</h2>
<amp-ad width=300 height=50
type="doubleclick"
data-slot="/4119129/mobile_ad_banner"
data-multi-size="320x50"
class=dashedborder
>
<div fallback>fallback</div>
</amp-ad>
<h2>Secondary sizes == primary size - Should render</h2>
<amp-ad width=320 height=50
type="doubleclick"
data-slot="/4119129/mobile_ad_banner"
data-multi-size="320x50"
class=dashedborder
>
<div fallback>fallback</div>
</amp-ad>
<h2>Invalid multi-size attribute (above fold) - Should see 'fallback'</h2>
<amp-ad width=480 height=75
type="doubleclick"
data-slot="/4119129/mobile_ad_banner"
data-multi-size="[320,50]"
class=dashedborder
>
<div fallback>fallback</div>
</amp-ad>
<!-- create an artificial fold -->
<div class=artificialfold></div>
<h2>Resize granted (beneath fold) - Creative should be closely wrapped by parent div</h2>
<amp-ad width=480 height=75
type="doubleclick"
data-slot="/4119129/mobile_ad_banner"
data-multi-size="320x50"
class=dashedborder
>
</amp-ad>
<h2>Invalid multi-size attribute (beneath fold) - Should be empty</h2>
<amp-ad width=480 height=75
type="doubleclick"
data-slot="/4119129/mobile_ad_banner"
data-multi-size="[320,50]"
class=dashedborder
>
</amp-ad>
<h2>One invalid and one valid multi-size attribute - Should render</h2>
<amp-ad width=480 height=75
type="doubleclick"
data-slot="/4119129/mobile_ad_banner"
data-multi-size="[320,50],320x50"
class=dashedborder
>
</amp-ad>
<h2>Multi-size less than 2/3rds primary size & size-validation == false - Should render</h2>
<amp-ad width=1000 height=500
type="doubleclick"
data-slot="/4119129/mobile_ad_banner"
data-multi-size="320x50"
data-multi-size-validation="false"
class=dashedborder
>
</amp-ad>
<h2>Multi-size less than 2/3rds primary size - Should be empty</h2>
<amp-ad width=1000 height=500
type="doubleclick"
data-slot="/4119129/mobile_ad_banner"
data-multi-size="320x50"
class=dashedborder
>
</amp-ad>
<h2>Multiple secondary sizes (all valid) - Should render</h2>
<amp-ad width=480 height=75
type="doubleclick"
data-slot="/4119129/mobile_ad_banner"
data-multi-size="320x50,350x50,350x75,400x75"
class=dashedborder
>
</amp-ad>
<h2>Responsive - Should render</h2>
<amp-ad width=100 height=149.999999925
type="doubleclick"
data-slot= "/4119129/mobile_ad_banner"
data-override-width="1030"
data-override-height="590"
data-multi-size="320x50"
data-multi-size-validation="false"
layout="responsive"
class=dashedborder
>
</amp-ad>
<h2>Size overrides - Should render with primary dimensions</h2>
<amp-ad width="500"
height="100"
data-override-width="300"
data-override-height="250"
type="doubleclick"
data-slot="/35096353/amptesting/image/static"
class=dashedborder
>
</amp-ad>
<h2>Secondary sizes > primary size (below fold) - Should be empty</h2>
<amp-ad width=300 height=50
type="doubleclick"
data-slot="/4119129/mobile_ad_banner"
data-multi-size="320x50"
class=dashedborder
>
</amp-ad>
</body>
</html>