From 638a50cad32757a0927925db3bbb7dbc6e2b3686 Mon Sep 17 00:00:00 2001
From: "Tan.Shiyou" <shiyoux.tan@intel.com>
Date: Sun, 9 Jun 2013 14:49:03 +0800
Subject: [PATCH] Repaired viewport style on behavior

Signed-off-by: Tan.Shiyou <shiyoux.tan@intel.com>
---
 tests.xml                              | 26 +++++++++++------------
 tests/Viewport/index.html              | 23 ++++++++++++--------
 tests/Viewport/test/device.html        | 22 +++++++++++++++----
 tests/Viewport/test/scale.html         | 39 ++++++++++++++++++++++------------
 tests/Viewport/test/user-scalable.html | 28 +++++++++++++++++++++---
 5 files changed, 95 insertions(+), 43 deletions(-)

diff --git a/tests.xml b/tests.xml
index 1a57e79..6a3b0bc 100644
--- a/tests.xml
+++ b/tests.xml
@@ -203,6 +203,19 @@
         <test_script_entry test_script_expected_result="0"></test_script_entry>
       </description>
       </testcase>
+      <testcase purpose="The test verifies the viewport feature." type="functional_positive" status="approved" component="behavior" execution_type="manual" priority="P0" id="Viewport">
+      <description>
+        <pre_condition />
+        <post_condition />
+        <steps>
+          <step order="1">
+            <step_desc>0</step_desc>
+            <expected>0</expected>
+          </step>
+        </steps>
+        <test_script_entry test_script_expected_result="0"></test_script_entry>
+      </description>
+      </testcase>
       <testcase purpose="The test verifies PageVisibility event." type="functional_positive" status="approved" component="behavior" execution_type="manual" priority="P0" id="PageVisibility">
       <description>
         <pre_condition />
@@ -486,18 +499,5 @@
         <test_script_entry test_script_expected_result="0"></test_script_entry>
       </description>
       </testcase>
-      <testcase purpose="The test verifies the viewport feature." type="functional_positive" status="approved" component="behavior" execution_type="manual" priority="P0" id="Viewport">
-      <description>
-        <pre_condition />
-        <post_condition />
-        <steps>
-          <step order="1">
-            <step_desc>0</step_desc>
-            <expected>0</expected>
-          </step>
-        </steps>
-        <test_script_entry test_script_expected_result="0"></test_script_entry>
-      </description>
-      </testcase>
   </set>
 </suite>
diff --git a/tests/Viewport/index.html b/tests/Viewport/index.html
index bf8dfda..c989ea5 100644
--- a/tests/Viewport/index.html
+++ b/tests/Viewport/index.html
@@ -44,12 +44,12 @@ Authors:
     </div>
     <div data-role= "content">
       <div>
-        <p><a data-role="button" data-theme="b" href="test/device.html" data-ajax="false">device-height|device-width</a>
-        <p>Test the device-height and device-width values
-        <p><a data-role="button" data-theme="b" href="test/user-scalable.html" data-ajax="false">user-scalable-no</a>
-        <p>Test the user-scalable attribute, if it sets no, user unable to scale the page
-        <p><a data-role="button" data-theme="b" href="test/scale.html" data-ajax="false">maximum-scale|minimum-scale</a>
-        <p>Test the maximum-scale and minimum-scale attributes
+        <p>1. Get the values of device-height and device-width
+        <p><a data-role="button" data-theme="b" href="test/device.html" data-ajax="false">device-height | device-width</a>
+        <p>2. Test enable scale and disable scale
+        <p><a data-role="button" data-theme="b" href="test/user-scalable.html" data-ajax="false">enable scale | disable scale</a>
+        <p>3. Test the maximum-scale and minimum-scale attributes
+        <p><a data-role="button" data-theme="b" href="test/scale.html" data-ajax="false">maximum-scale | minimum-scale</a>
       </div>
       <div id="testresult"></div>
     </div>
@@ -57,9 +57,14 @@ Authors:
     </div>
     <div data-role="popup" id="popup_info" data-theme="a">
       <p>The test verifies the viewport feature</p>
-      <p>1.Click the 1st button, test passes if there is no red in test page</p>
-      <p>2.Click the 2nd button, test passes if user unable to scale the test page</p>
-      <p>3.Click the 3rd button, test passes if there is only green in screen when you zoom in to maximum</p>
+      <p>1. Click the 1st button, test passes if the screen color is full of green</p>
+      <p>2. Click the 2nd button to verify the user-scalable when set 'yes' or 'no'
+        <p>&nbsp&nbsp&nbsp&nbsp1. Check that user is unable to scale the test page when click the DisableScale button</p>
+        <p>&nbsp&nbsp&nbsp&nbsp2. Check that user is able to scale the test page when click the EnableScale button</p>
+      <p>3. Click the 3rd button to verify the maximum-scale and minimum-scale
+        <p>&nbsp&nbsp&nbsp&nbsp1. Check that screen background, half is green and other half is yellow when zoom to minimum</p>
+        <p>&nbsp&nbsp&nbsp&nbsp2. Check that screen background is full of green when zoom to maximum and there is yellow background when slide to right</p>
+      </p>
     </div>
   </body>
   </body>
diff --git a/tests/Viewport/test/device.html b/tests/Viewport/test/device.html
index f306626..714a631 100644
--- a/tests/Viewport/test/device.html
+++ b/tests/Viewport/test/device.html
@@ -40,17 +40,31 @@ Authors:
             margin: 0px;
             background-color: red;
         }
+        p {
+            margin: 0px;
+        }
+        button {
+            background-color: black;
+            border: none;
+            border-radius: 10px;
+            color: white;
+            height: 40px;
+        }
     </style>
   </head>
   <body>
     <script type="text/javascript">
         tizen.systeminfo.getPropertyValue("DISPLAY", function(property) {
             var div = document.createElement("div");
+            var height = property.resolutionHeight / 2;
+            var width = property.resolutionWidth / 2;
             div.style.background = "green";
-            div.style.height = property.resolutionHeight / 2  + "px";
-            div.style.width = property.resolutionWidth / 2 + "px";
-            div.innerHTML = "<p style='margin: 0px'>Test passes if there is no red</p>" +
-                            "<p style='margin: 0px'><a href='../Viewport.html'>Click to back</a></p>";
+            div.style.height = height + "px";
+            div.style.width = width + "px";
+            div.innerHTML = "<p>device-height : " + height + "</p><br>" +
+                            "<p>device-width : " + width + "</p><br>" +
+                            "<p>Test passes if the screen is full of green background</p><br>" +
+                            "<p><button onclick='javascript: window.history.go(-1)'>&nbsp;Back&nbsp;</button></p>";
             document.body.appendChild(div);
         });
     </script>
diff --git a/tests/Viewport/test/scale.html b/tests/Viewport/test/scale.html
index dd75cc6..6db1b57 100644
--- a/tests/Viewport/test/scale.html
+++ b/tests/Viewport/test/scale.html
@@ -32,7 +32,7 @@ Authors:
 <html>
   <head>
     <meta charset="utf-8" />
-    <meta name="viewport" content="width=400,height=400,minimum-scale=0.5, maximum-scale=4" />
+    <meta name="viewport" content="width=device-width, height=device-height, minimum-scale=1.0, maximum-scale=2.0" />
     <title>Viewport</title>
     <style>
         body {
@@ -40,21 +40,32 @@ Authors:
             margin: 0px;
             background-color: red;
         }
+        p {
+            margin: 0px;
+        }
+        button {
+            background-color: black;
+            border: none;
+            border-radius: 10px;
+            color: white;
+            height: 40px;
+        }
     </style>
   </head>
   <body>
-     <table border=0 cellspacing=0>
-       <tr>
-         <td style="background: green; width: 100px; height: 400px">
-           <p>Test passes if there is only green in screen when you zoom in to maximum
-           <p><a href="../Viewport.html">Click to back</a></td>
-         <td style="background: blue; width: 100px; height: 400px">
-           <p><a href="../Viewport.html">Click to back</a></td>
-         <td style="background: yellow; width: 100px; height: 400px">
-           <p><a href="../Viewport.html">Click to back</a></td>
-         <td style="background: black; width: 100px; height: 400px">
-           <p><a href="../Viewport.html">Click to back</a></td>
-        </tr>
-      </table>
+    <script type="text/javascript">
+        tizen.systeminfo.getPropertyValue("DISPLAY", function(property) {
+            var property = {resolutionHeight: 1280, resolutionWidth: 720};
+            var maximum_scale = 2;
+            var adapter = 2;
+            var div = document.createElement("div");
+            var screenHight = property.resolutionHeight / adapter;
+            var screenWidth = property.resolutionWidth / adapter;
+            var divWidth = screenWidth / maximum_scale;
+            div.style.background = "green";
+            div.innerHTML = "<div style='background-color:green;float:left;width:" + divWidth + "px;height:"+screenHight+"px'><p>1.Zoom to minimum, the screen background is about half of green and half of yellow</p><br><p>2.Zoom to maximum, the screen is full of green; then slide to right, you can see yellow background</p><br><p><button onclick='javascript: window.history.go(-1)'>&nbsp;Back&nbsp;</button></p></div>" + "<div style='background-color: yellow;float:left;width:"+divWidth+"px;height:" + screenHight + "px'></div>";
+            document.body.appendChild(div);
+        });
+    </script>
   </body>
 </html>
diff --git a/tests/Viewport/test/user-scalable.html b/tests/Viewport/test/user-scalable.html
index 12f0ec7..f3b8239 100644
--- a/tests/Viewport/test/user-scalable.html
+++ b/tests/Viewport/test/user-scalable.html
@@ -45,15 +45,37 @@ Authors:
             width: 500px;
             height: 500px;
         }
-        .p {
+        p {
             margin: 0px;
         }
+        button {
+            background-color: black;
+            border: none;
+            border-radius: 10px;
+            color: white;
+            height: 40px;
+        }
     </style>
+    <script type="text/javascript">
+        function changeUerscalable(element) {
+            var content = element.textContent;
+            if (content == "EnableScale") {
+                document.getElementsByName("viewport")[0].content = "width=500, height=500, user-scalable=yes";
+            } else if (content == "DisableScale") {
+                document.getElementsByName("viewport")[0].content = "width=500, height=500, user-scalable=no";
+            }
+        }
+    </script>
   </head>
   <body>
     <div>
-      <p class="p">Test passes if there is no red and user unable to zoom in or out
-      <p><a href="../Viewport.html">Click to back</a></td>
+      <p>EnableScale: you can scale the screen</p><br>
+      <p>DisableScale: you can not scale the screen</p><br>
+      <p>
+        <button onclick="javascript: window.history.go(-1);">&nbsp;Back&nbsp;</button>
+        <button onclick="changeUerscalable(this)">EnableScale</button>
+        <button onclick="changeUerscalable(this)">DisableScale</button>
+      </p>
     </div>
   </body>
 </html>
-- 
2.7.4