| |
| <!doctype html> |
| <html> |
| <head> |
| <title>CSS Backgrounds Test: background-clip:border-box & background-size</title> |
| <link rel="author" title="finscn" href="mailto:finscn@gmail.com" > |
| <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-clip" > |
| <meta name="flags" content="image"> |
| <meta name="assert" content="border-box : The background is painted within (clipped to) the border box." > |
| |
| <meta charset="utf-8"> |
| |
| <style type="text/css"> |
| |
| .infomation { |
| padding : 10px; |
| font-size : 16pt; |
| margin : 5px; |
| } |
| |
| .test-case { |
| padding : 5px; |
| margin : 5px; |
| } |
| |
| .view { |
| border : 30px solid rgba(60,150,255,0.4); |
| width : 320px; |
| height : 240px; |
| padding : 30px; |
| margin : 10px; |
| font-size : 16pt; |
| color : #ff9933; |
| background-image : url("../support/css3.png"); |
| } |
| |
| .no-repeat { |
| background-repeat : no-repeat; |
| } |
| |
| .case { |
| background-clip : border-box; |
| background-size : 50%; |
| } |
| |
| |
| </style> |
| |
| </head> |
| <body> |
| |
| <div class="infomation"> |
| Test Passed If : The background is clipped. The clip area includes the area covered by border , and the area surrounded by border.<br> |
| When background-size is enabled, the browser should clip the background correctly. |
| </div> |
| |
| <div class="test-case"> |
| |
| <div id="border-box" class="view case no-repeat" > |
| Test background-clip: |
| </div> |
| |
| <div id="border-box" class="view case" > |
| Test background-clip: |
| </div> |
| |
| </div> |
| |
| </body> |
| |
| </html> |
