Fix relative-to-screen-size calculation (h and w) (#799)

2022-01-30 23:17:56 +08:00
parent ecbdd43ca8
commit 20f74a8b56
7 changed files with 148 additions and 33 deletions
--- a/test/plugins/rel/relative_to_screen_size_tests.js
+++ b/test/plugins/rel/relative_to_screen_size_tests.js
@@ -0,0 +1,40 @@
+QUnit.module( "rel plugin relative to screen size tests" );
+
+QUnit.test( "relative_to_screen_size", function( assert ) {
+  window.console.log( "Begin relative_to_screen_size" );
+  var done = assert.async();
+
+  loadIframe( "test/plugins/rel/relative_to_screen_size_tests_presentation.html", assert, function() {
+    initPresentation( assert, function() {
+      var iframe = document.getElementById( "presentation-iframe" );
+      var iframeDoc = iframe.contentDocument;
+
+      var root  = iframeDoc.querySelector( "div#impress" );
+
+      var origin = iframeDoc.querySelector( "div#origin" );
+      var step1 = iframeDoc.querySelector( "div#step1" );
+      var step2 = iframeDoc.querySelector( "div#step2" );
+      var step3 = iframeDoc.querySelector( "div#step3" );
+
+      assert.equal( origin.dataset.x, 0, "origin data-x attribute" );
+      assert.equal( origin.dataset.y, 0, "origin data-y attribute" );
+      assert.equal( origin.dataset.z, 0, "origin data-z attribute" );
+
+      assert.equal( step1.dataset.x, 2000, "step1 data-x attribute" );
+      assert.equal( step1.dataset.y, 1500, "step1 data-y attribute" );
+      assert.equal( step1.dataset.z, -2000, "step1 data-z attribute" );
+
+      assert.equal( step2.dataset.x, -3000, "step2 data-x attribute" );
+      assert.equal( step2.dataset.y, -4000, "step2 data-y attribute" );
+      assert.equal( step2.dataset.z, 3000, "step2 data-z attribute" );
+
+      assert.equal( step3.dataset.x, 1000, "step3 data-x attribute" );
+      assert.equal( step3.dataset.y, -750, "step3 data-y attribute" );
+      assert.equal( step3.dataset.z, 1000, "step3 data-z attribute" );
+
+      done();
+      console.log( "End relative_to_screen_size test (sync)" );
+    } )
+  } ); // LoadIframe()
+} );
+
--- a/test/plugins/rel/relative_to_screen_size_tests_presentation.html
+++ b/test/plugins/rel/relative_to_screen_size_tests_presentation.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>The presentation steps used in an iframe in rel/relative_to_screen_size_tests.js</title>
+    <style type="text/css" media="screen">
+.step {
+    position: relative;
+    width: 500px;
+    height: 500px;
+    padding: 40px 60px;
+    margin: 20px auto;
+
+    box-sizing:         border-box;
+
+    line-height: 1.5;
+
+    background-color: yellow;
+    border-radius: 10px;
+    box-shadow: 0 2px 6px rgba(0, 0, 0, .1);
+
+    text-shadow: 0 2px 2px rgba(0, 0, 0, .1);
+
+    font-family: 'Open Sans', Arial, sans-serif;
+    font-size: 40pt;
+    letter-spacing: -1px;
+    border: solid 1px red;
+    opacity: 50%;
+}
+    </style>
+  </head>
+
+  <body class="impress-not-supported">
+    <div id="impress" data-width="2000" data-height="1500">
+      <div id="origin"   class="step" data-rel-position="relative" data-x="0" data-y="0" data-z="0"></div>
+      <div id="step1" class="step" data-rel-to="origin" data-rel-x="1w" data-rel-y="1h" data-rel-z="-1w"></div>
+      <div id="step2" class="step" data-rel-to="origin" data-rel-x="-2h" data-rel-y="-2w" data-rel-z="2h"></div>
+      <div id="step3" class="step" data-rel-to="origin" data-rel-x="0.5w" data-rel-y="-0.5h" data-rel-z="0.5w"></div>
+
+      <div id="overview" class="step overview" data-x="0" data-y="-1000" data-z="100" data-scale="4" data-rotate-x="45">
+      </div>
+
+    </div>
+
+    <script src="../../../js/impress.js"></script>
+    <!-- <script>impress().init();</script> -->
+  </body>
+<html>