| <!DOCTYPE html> |
| <html> |
| <head> |
| <title>CSS Transforms Test: transform property with translate function</title> |
| <link rel="author" title="zhenyu_w3c" href="mailto:77765477@163.com"> |
| <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-repeat"> |
| <link rel="match" href="reference/ttwf-reftest-background-repeat-x-ref.html"> |
| <meta name="assert" content="You should only see the img with two color render on the X directions."> |
| <style type="text/css"> |
| table{ |
| font-size:12px; |
| } |
| th{ |
| height:160px; |
| filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='support/table-head.jpg',sizingMethod='scale'); background-repeat: repeat-x; |
| /*background:url(support/table-head.jpg) repeat-x;*/ |
| border-width:0px; |
| } |
| |
| </style> |
| </head> |
| <script> |
| var filter=true; |
| var obj_array=document.getElementsByTagName("th"); |
| |
| |
| function switch_filter(){ |
| if(filter){ |
| for(i=0;i<obj_array.length;i++){ |
| obj_array[i].style.filter=""; |
| obj_array[i].style.background="url(support/table-head.jpg) repeat-x"; |
| } |
| var button=document.getElementById("switch-button"); |
| button.value="has use the pure repeat-x.click here to cancel repeat-x,to use filter!!!"; |
| filter=false; |
| } |
| else{ |
| for(i=0;i<obj_array.length;i++){ |
| obj_array[i].style.background=""; |
| obj_array[i].style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(src='support/table-head.jpg',sizingMethod='scale'); background-repeat: repeat-x"; |
| } |
| var button=document.getElementById("switch-button"); |
| button.value="has used the filter.click here to cancel filter,to use pure repeat-x!!!"; |
| filter=true; |
| } |
| } |
| </script> |
| <body> |
| <p>The test passes if you see the img repeat on the X direction (not repeat on the Y direction) </p> |
| <div><input id="switch-button" onclick="switch_filter()" type="button" value="has used the filter.click here to cancel filter,to use pure repeat-x!!!"></div> |
| <table> |
| <tr> |
| <th> |
| first |
| </th> |
| <th> |
| second |
| </th> |
| <th> |
| third |
| </th> |
| </tr> |
| <tr> |
| <td> |
| 1 |
| </td> |
| <td> |
| 2 |
| </td> |
| <td> |
| 3 |
| </td> |
| </tr> |
| </table> |
| </body> |
| </html> |
