Updates docs/test to reflect the fact that the size of div.rmp-contai…

…ner element needs to be explicitly set
radiantmediaplayer · Jun 26, 2024 · 45ac20b · 45ac20b
1 parent c7bf058
commit 45ac20b
Show file tree

Hide file tree

Showing 55 changed files with 561 additions and 85 deletions.
diff --git a/README.md b/README.md
@@ -64,6 +64,17 @@ You must use rmp-vast in a well-formed HTML document. This means a web-page with
 
 Do NOT rename CSS classes or alter this HTML layout. The HTML5 video tag used for content must use the src property on the HTML5 video (e.g. do not use &lt;source&gt; tag).
 
+- We need to explicitly set the size of div.rmp-container element, for example with CSS we could add to our page:
+```html
+<style>
+  .rmp-container {
+    width: 960px;
+    height: 540px;
+    margin: auto;
+  }
+</style>
+```
+
 - Init the library with JavaScript:
 
 ```javascript

diff --git a/test/spec/InlineLinearSpec/IABVAST3Spec.html b/test/spec/InlineLinearSpec/IABVAST3Spec.html
@@ -13,17 +13,26 @@
   <script src="../../lib/jasmine-5.1.2/jasmine-html.js"></script>
   <script src="../../lib/jasmine-5.1.2/boot0.js"></script>
   <script src="../../lib/jasmine-5.1.2/boot1.js"></script>
-  <link rel="stylesheet" href="../../../app/css/app.css">
 
   <!-- rmp-vast -->
   <script src="../../../dist/rmp-vast.min.js"></script>
 
+  <!-- We need to explicitly set the size of div.rmp-container element -->
+  <style>
+    .rmp-container {
+      width: 960px;
+      height: 540px;
+      margin: auto;
+    }
+  </style>
+
 </head>
 
 <body>
   <div class="rmp-container" id="rmp">
     <div class="rmp-content">
-      <video class="rmp-video" src="https://www.rmp-streaming.com/media/big-buck-bunny-360p.mp4" playsinline disableRemotePlayback controls disablePictureInPicture>
+      <video class="rmp-video" src="https://www.rmp-streaming.com/media/big-buck-bunny-360p.mp4" playsinline
+        disableRemotePlayback controls disablePictureInPicture>
       </video>
     </div>
   </div>

diff --git a/test/spec/InlineLinearSpec/ImaInlineLinearSpec.html b/test/spec/InlineLinearSpec/ImaInlineLinearSpec.html
@@ -13,17 +13,26 @@
   <script src="../../lib/jasmine-5.1.2/jasmine-html.js"></script>
   <script src="../../lib/jasmine-5.1.2/boot0.js"></script>
   <script src="../../lib/jasmine-5.1.2/boot1.js"></script>
-  <link rel="stylesheet" href="../../../app/css/app.css">
 
   <!-- rmp-vast -->
   <script src="../../../dist/rmp-vast.min.js"></script>
 
+  <!-- We need to explicitly set the size of div.rmp-container element -->
+  <style>
+    .rmp-container {
+      width: 960px;
+      height: 540px;
+      margin: auto;
+    }
+  </style>
+
 </head>
 
 <body>
   <div class="rmp-container" id="rmp">
     <div class="rmp-content">
-      <video class="rmp-video" src="https://www.rmp-streaming.com/media/big-buck-bunny-360p.mp4" playsinline disableRemotePlayback controls disablePictureInPicture>
+      <video class="rmp-video" src="https://www.rmp-streaming.com/media/big-buck-bunny-360p.mp4" playsinline
+        disableRemotePlayback controls disablePictureInPicture>
       </video>
     </div>
   </div>

diff --git a/test/spec/InlineLinearSpec/SkippableSpec.html b/test/spec/InlineLinearSpec/SkippableSpec.html
@@ -13,17 +13,26 @@
   <script src="../../lib/jasmine-5.1.2/jasmine-html.js"></script>
   <script src="../../lib/jasmine-5.1.2/boot0.js"></script>
   <script src="../../lib/jasmine-5.1.2/boot1.js"></script>
-  <link rel="stylesheet" href="../../../app/css/app.css">
 
   <!-- rmp-vast -->
   <script src="../../../dist/rmp-vast.min.js"></script>
 
+  <!-- We need to explicitly set the size of div.rmp-container element -->
+  <style>
+    .rmp-container {
+      width: 960px;
+      height: 540px;
+      margin: auto;
+    }
+  </style>
+
 </head>
 
 <body>
   <div class="rmp-container" id="rmp">
     <div class="rmp-content">
-      <video class="rmp-video" src="https://www.rmp-streaming.com/media/big-buck-bunny-360p.mp4" playsinline disableRemotePlayback controls disablePictureInPicture>
+      <video class="rmp-video" src="https://www.rmp-streaming.com/media/big-buck-bunny-360p.mp4" playsinline
+        disableRemotePlayback controls disablePictureInPicture>
       </video>
     </div>
   </div>

diff --git a/test/spec/adPodSpec/AdPodAllWrappers.html b/test/spec/adPodSpec/AdPodAllWrappers.html
@@ -13,17 +13,26 @@
   <script src="../../lib/jasmine-5.1.2/jasmine-html.js"></script>
   <script src="../../lib/jasmine-5.1.2/boot0.js"></script>
   <script src="../../lib/jasmine-5.1.2/boot1.js"></script>
-  <link rel="stylesheet" href="../../../app/css/app.css">
 
   <!-- rmp-vast -->
   <script src="../../../dist/rmp-vast.min.js"></script>
 
+  <!-- We need to explicitly set the size of div.rmp-container element -->
+  <style>
+    .rmp-container {
+      width: 960px;
+      height: 540px;
+      margin: auto;
+    }
+  </style>
+
 </head>
 
 <body>
   <div class="rmp-container" id="rmp">
     <div class="rmp-content">
-      <video class="rmp-video" src="https://www.rmp-streaming.com/media/big-buck-bunny-360p.mp4" playsinline disableRemotePlayback disablePictureInPicture>
+      <video class="rmp-video" src="https://www.rmp-streaming.com/media/big-buck-bunny-360p.mp4" playsinline
+        disableRemotePlayback disablePictureInPicture>
       </video>
     </div>
   </div>

diff --git a/test/spec/adPodSpec/AdPodErrorCreativeOnSecondAd.html b/test/spec/adPodSpec/AdPodErrorCreativeOnSecondAd.html
@@ -13,17 +13,26 @@
   <script src="../../lib/jasmine-5.1.2/jasmine-html.js"></script>
   <script src="../../lib/jasmine-5.1.2/boot0.js"></script>
   <script src="../../lib/jasmine-5.1.2/boot1.js"></script>
-  <link rel="stylesheet" href="../../../app/css/app.css">
 
   <!-- rmp-vast -->
   <script src="../../../dist/rmp-vast.min.js"></script>
 
+  <!-- We need to explicitly set the size of div.rmp-container element -->
+  <style>
+    .rmp-container {
+      width: 960px;
+      height: 540px;
+      margin: auto;
+    }
+  </style>
+
 </head>
 
 <body>
   <div class="rmp-container" id="rmp">
     <div class="rmp-content">
-      <video class="rmp-video" src="https://www.rmp-streaming.com/media/big-buck-bunny-360p.mp4" playsinline disableRemotePlayback disablePictureInPicture>
+      <video class="rmp-video" src="https://www.rmp-streaming.com/media/big-buck-bunny-360p.mp4" playsinline
+        disableRemotePlayback disablePictureInPicture>
       </video>
     </div>
   </div>

diff --git a/test/spec/adPodSpec/AdPodNoStandaloneSpec.html b/test/spec/adPodSpec/AdPodNoStandaloneSpec.html
@@ -13,17 +13,26 @@
   <script src="../../lib/jasmine-5.1.2/jasmine-html.js"></script>
   <script src="../../lib/jasmine-5.1.2/boot0.js"></script>
   <script src="../../lib/jasmine-5.1.2/boot1.js"></script>
-  <link rel="stylesheet" href="../../../app/css/app.css">
 
   <!-- rmp-vast -->
   <script src="../../../dist/rmp-vast.min.js"></script>
 
+  <!-- We need to explicitly set the size of div.rmp-container element -->
+  <style>
+    .rmp-container {
+      width: 960px;
+      height: 540px;
+      margin: auto;
+    }
+  </style>
+
 </head>
 
 <body>
   <div class="rmp-container" id="rmp">
     <div class="rmp-content">
-      <video class="rmp-video" src="https://www.rmp-streaming.com/media/big-buck-bunny-360p.mp4" playsinline muted disableRemotePlayback disablePictureInPicture>
+      <video class="rmp-video" src="https://www.rmp-streaming.com/media/big-buck-bunny-360p.mp4" playsinline muted
+        disableRemotePlayback disablePictureInPicture>
       </video>
     </div>
   </div>

diff --git a/test/spec/adPodSpec/AdPodWithStandaloneSpec.html b/test/spec/adPodSpec/AdPodWithStandaloneSpec.html
@@ -12,17 +12,26 @@
   <script src="../../lib/jasmine-5.1.2/jasmine-html.js"></script>
   <script src="../../lib/jasmine-5.1.2/boot0.js"></script>
   <script src="../../lib/jasmine-5.1.2/boot1.js"></script>
-  <link rel="stylesheet" href="../../../app/css/app.css">
 
   <!-- rmp-vast -->
   <script src="../../../dist/rmp-vast.min.js"></script>
 
+  <!-- We need to explicitly set the size of div.rmp-container element -->
+  <style>
+    .rmp-container {
+      width: 960px;
+      height: 540px;
+      margin: auto;
+    }
+  </style>
+
 </head>
 
 <body>
   <div class="rmp-container" id="rmp">
     <div class="rmp-content">
-      <video class="rmp-video" src="https://www.rmp-streaming.com/media/big-buck-bunny-360p.mp4" playsinline disableRemotePlayback disablePictureInPicture>
+      <video class="rmp-video" src="https://www.rmp-streaming.com/media/big-buck-bunny-360p.mp4" playsinline
+        disableRemotePlayback disablePictureInPicture>
       </video>
     </div>
   </div>

diff --git a/test/spec/apiSpec/ThreeConsecutiveWithErrorLinearSpec.html b/test/spec/apiSpec/ThreeConsecutiveWithErrorLinearSpec.html
@@ -13,17 +13,26 @@
   <script src="../../lib/jasmine-5.1.2/jasmine-html.js"></script>
   <script src="../../lib/jasmine-5.1.2/boot0.js"></script>
   <script src="../../lib/jasmine-5.1.2/boot1.js"></script>
-  <link rel="stylesheet" href="../../../app/css/app.css">
 
   <!-- rmp-vast -->
   <script src="../../../dist/rmp-vast.min.js"></script>
 
+  <!-- We need to explicitly set the size of div.rmp-container element -->
+  <style>
+    .rmp-container {
+      width: 960px;
+      height: 540px;
+      margin: auto;
+    }
+  </style>
+
 </head>
 
 <body>
   <div class="rmp-container" id="rmp">
     <div class="rmp-content">
-      <video class="rmp-video" src="https://www.rmp-streaming.com/media/big-buck-bunny-360p.mp4" playsinline disableRemotePlayback disablePictureInPicture></video>
+      <video class="rmp-video" src="https://www.rmp-streaming.com/media/big-buck-bunny-360p.mp4" playsinline
+        disableRemotePlayback disablePictureInPicture></video>
     </div>
   </div>
   <p id="result"></p>

diff --git a/test/spec/apiSpec/methods.html b/test/spec/apiSpec/methods.html
@@ -13,11 +13,19 @@
   <script src="../../lib/jasmine-5.1.2/jasmine-html.js"></script>
   <script src="../../lib/jasmine-5.1.2/boot0.js"></script>
   <script src="../../lib/jasmine-5.1.2/boot1.js"></script>
-  <link rel="stylesheet" href="../../../app/css/app.css">
 
   <!-- rmp-vast -->
   <script src="../../../dist/rmp-vast.min.js"></script>
 
+  <!-- We need to explicitly set the size of div.rmp-container element -->
+  <style>
+    .rmp-container {
+      width: 960px;
+      height: 540px;
+      margin: auto;
+    }
+  </style>
+
 </head>
 
 <body>

diff --git a/test/spec/apiSpec/pre-mid-post.html b/test/spec/apiSpec/pre-mid-post.html
@@ -13,17 +13,26 @@
   <script src="../../lib/jasmine-5.1.2/jasmine-html.js"></script>
   <script src="../../lib/jasmine-5.1.2/boot0.js"></script>
   <script src="../../lib/jasmine-5.1.2/boot1.js"></script>
-  <link rel="stylesheet" href="../../../app/css/app.css">
 
   <!-- rmp-vast -->
   <script src="../../../dist/rmp-vast.min.js"></script>
 
+  <!-- We need to explicitly set the size of div.rmp-container element -->
+  <style>
+    .rmp-container {
+      width: 960px;
+      height: 540px;
+      margin: auto;
+    }
+  </style>
+
 </head>
 
 <body>
   <div class="rmp-container" id="rmp">
     <div class="rmp-content">
-      <video class="rmp-video" src="https://www.rmp-streaming.com/media/big-buck-bunny-360p.mp4" playsinline disableRemotePlayback disablePictureInPicture></video>
+      <video class="rmp-video" src="https://www.rmp-streaming.com/media/big-buck-bunny-360p.mp4" playsinline
+        disableRemotePlayback disablePictureInPicture></video>
     </div>
   </div>
   <p id="result"></p>

diff --git a/test/spec/apiSpec/stopAds-hls.html b/test/spec/apiSpec/stopAds-hls.html
@@ -14,18 +14,28 @@
   <script src="../../lib/jasmine-5.1.2/boot0.js"></script>
   <script src="../../lib/jasmine-5.1.2/boot1.js"></script>
   <script src="../../../externals/hls/hls.min.js"></script>
-  <link rel="stylesheet" href="../../../app/css/app.css">
+
   <!-- hls.js -->
   <script src="../../../externals/hls/hls.min.js"></script>
   <!-- rmp-vast -->
   <script src="../../../dist/rmp-vast.min.js"></script>
 
+  <!-- We need to explicitly set the size of div.rmp-container element -->
+  <style>
+    .rmp-container {
+      width: 960px;
+      height: 540px;
+      margin: auto;
+    }
+  </style>
+
 </head>
 
 <body>
   <div class="rmp-container" id="rmp">
     <div class="rmp-content">
-      <video class="rmp-video" src="https://www.rmp-streaming.com/media/big-buck-bunny-360p.mp4" playsinline disableRemotePlayback disablePictureInPicture></video>
+      <video class="rmp-video" src="https://www.rmp-streaming.com/media/big-buck-bunny-360p.mp4" playsinline
+        disableRemotePlayback disablePictureInPicture></video>
     </div>
   </div>
   <p id="result"></p>

diff --git a/test/spec/companionSpec/companion-html.html b/test/spec/companionSpec/companion-html.html
@@ -13,17 +13,26 @@
   <script src="../../lib/jasmine-5.1.2/jasmine-html.js"></script>
   <script src="../../lib/jasmine-5.1.2/boot0.js"></script>
   <script src="../../lib/jasmine-5.1.2/boot1.js"></script>
-  <link rel="stylesheet" href="../../../app/css/app.css">
 
   <!-- rmp-vast -->
   <script src="../../../dist/rmp-vast.min.js"></script>
 
+  <!-- We need to explicitly set the size of div.rmp-container element -->
+  <style>
+    .rmp-container {
+      width: 960px;
+      height: 540px;
+      margin: auto;
+    }
+  </style>
+
 </head>
 
 <body>
   <div class="rmp-container" id="rmp">
     <div class="rmp-content">
-      <video class="rmp-video" src="https://www.rmp-streaming.com/media/big-buck-bunny-360p.mp4" playsinline disableRemotePlayback disablePictureInPicture>
+      <video class="rmp-video" src="https://www.rmp-streaming.com/media/big-buck-bunny-360p.mp4" playsinline
+        disableRemotePlayback disablePictureInPicture>
       </video>
     </div>
   </div>

diff --git a/test/spec/companionSpec/companion-iframe.html b/test/spec/companionSpec/companion-iframe.html
@@ -13,17 +13,26 @@
   <script src="../../lib/jasmine-5.1.2/jasmine-html.js"></script>
   <script src="../../lib/jasmine-5.1.2/boot0.js"></script>
   <script src="../../lib/jasmine-5.1.2/boot1.js"></script>
-  <link rel="stylesheet" href="../../../app/css/app.css">
 
   <!-- rmp-vast -->
   <script src="../../../dist/rmp-vast.min.js"></script>
 
+  <!-- We need to explicitly set the size of div.rmp-container element -->
+  <style>
+    .rmp-container {
+      width: 960px;
+      height: 540px;
+      margin: auto;
+    }
+  </style>
+
 </head>
 
 <body>
   <div class="rmp-container" id="rmp">
     <div class="rmp-content">
-      <video class="rmp-video" src="https://www.rmp-streaming.com/media/big-buck-bunny-360p.mp4" playsinline disableRemotePlayback disablePictureInPicture>
+      <video class="rmp-video" src="https://www.rmp-streaming.com/media/big-buck-bunny-360p.mp4" playsinline
+        disableRemotePlayback disablePictureInPicture>
       </video>
     </div>
   </div>