<!DOCTYPE html><html><head><metacharset="utf-8"><title>CSS Backgrounds and Borders Test: background-size '100% 100%' with background-origin 'content-box'</title><linkrel="author"title="Intel"href="http://www.intel.com"><linkrel="reviewer"title="Gérard Talbot"href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"><!-- 2012-11-09 --><!-- http://www.gtalbot.org/BrowserBugsSection/review/background-size-021-review.html --><linkrel="help"href="http://www.w3.org/TR/css3-background/#the-background-size"title="3.9. Sizing Images: the 'background-size' property"><linkrel="match"href="reference/background-size-021-ref.html"><linkrel="help"href="http://www.w3.org/TR/css3-background/#the-background-origin"><metaname="flags"content="image"><metaname="assert"content="Check if 'background-size' is '100% 100%' that it rescales the background image independently in both dimensions to completely cover the background positioning area (it is 100px by 100px as background-origin is 'content-box'). In this test, the background-image should be scaled from 40px wide and 20px tall to become 100px by 100px."><style>#ref-overlapped-red{background-color:red;left:30px;height:100px;position:relative;top:30px;width:100px;}#test-overlapping-green{background-image:url("support/40px-wide-20px-tall-green-rect.png");background-origin:content-box;background-repeat:no-repeat;background-size:100%100%;border:transparentdotted5px;bottom:100px;height:100px;padding:25px;position:relative;width:100px;/* Background positioning area is 100px wide by 100px tall. So, the image should be scaled to 100px by 100px. */}</style></head><body><p>Test passes if there is a filled green square and <strong>no red</strong>.</p><divid="ref-overlapped-red"></div><divid="test-overlapping-green"></div></body></html>