Friday, May 23, 2008 - Posts

KB-Auto Word Wrap Issue in Web Page Monkey Test

在系統測試中，有一種測試叫做Monkey Test(有人翻成搞怪測試，我比較想稱它為"惡搞測試" XD)，意指測試者以不合乎常理的方式操作系統界面，檢測系統是否會發生不可預期的嚴重後果。用白話來說，就是百般刁難，亂按一通，系統也不能當機掛點資料受損，這樣才稱得上經打耐操的好程式。(聽前輩說，以前政府專案界有一位令廠商聞風喪膽，號稱"美猴王"的學者教授，只要受邀參與專案驗收，一定會在緊要關頭放大絕招---Monkey Test~~~)

今天負責上線前測試的同事回報，~~有隻猴子~~有位使用者通報某個表單網頁在輸入較長文字時，畫面會變形。

深入追查後，發現猴子測試者所輸入的是33333333333333333333333333333這類無意義連串英文，而這段文字被夾在<div style="width:140px">...</div>中顯示，雖然已設了寬度限制，但顯然瀏覽器無法以我們指定的寬度對這段無空白英文進行自動換行(auto wrap)處理。

於是，我設計了以下的測試，看一下這種特殊狀況在IE及Firefox下的呈現結果。

<table style="border:1px blue dotted">

<tr>

<td style="width:200px; border:1px green dashed; font-size:9pt;">

    <div style="width:140px; border: 1px red solid;">

    中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文

    </div>

    <div style="width:140px; border: 1px brown solid;">

    11111111111111111111111111111111111111111111111111111111111

    </div>

    <div style="width:140px; border: 1px brown solid;">

    Here are some normal words from normal human, but not crazy monkey... XD

    </div>

    <textarea style="width:140px; font-size:9pt;"

    >中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文中文

    </textarea>

    <textarea style="width:140px; font-size:9pt;"

    >1111111111111111111111111111111111111111111111111111111111

    </textarea>

    <textarea style="width:140px; font-size:9pt;"

    >Here are some normal words from normal human, but not crazy monkey... XD

    </textarea>

</td>

<td style="width:100px; border:1px purple dashed">Right Side</td>

</tr>

</table>

測試結果如下

結論是:

中文字或含空白的正常英文句子，IE或Firefox都可以正確斷行。
無空白的連續英數字，IE或Firefox無法自動斷行，因而導致<div>不依Style寬度顯示。
當TextArea中輸入無空白的連續英數字時，IE會強制斷行，Firefox則不會，但會跑出水平捲軸，並不會破壞寬度設定。

【補充】IE支援一個CSS設定"word-wrap:break-word"，設定後便可以克服無空白長串英數字無法斷行的問題，但這一招受限於瀏覽器，並不算完整解決方案。

Posted 23 May 2008 05:02 PM by Jeffrey | 4 comment(s)

Filed under: ASP.NET, Web, IE

Friday, May 23, 2008 - Posts

Search

This Blog

Syndication