background-size-document-root-vrl-004.html (1840B)
1 <!DOCTYPE html> 2 3 <html> 4 5 <head> 6 7 <meta charset="UTF-8"> 8 9 <title>CSS Writing Modes Test: 'background-size: 100%' filling padding-box of document root element</title> 10 11 <link rel="author" title="Koji Ishii" href="mailto:kojiishi@gmail.com"> 12 <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2015-05-01 --> 13 <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#physical-only" title="7.6 Purely Physical Mappings"> 14 <link rel="match" href="background-size-document-root-vrl-002-ref.xht"> 15 16 <meta name="flags" content="image"> 17 <meta name="assert" content="Test checks that 'background-size: 100% 100%' applied for the html root element will make the background-image fill the padding-box of the document box. Since 'background-color' is 'transparent' and since 'background-repeat' is set to 'no-repeat', then only the padding-box of the document root box should be painted green and such padding-box should start at top-right corner of canvas because 'writing-mode' is set to 'vertical-rl'."> 18 19 <style> 20 img 21 { 22 margin-left: 100px; 23 } 24 25 iframe 26 { 27 border: transparent 0px none; 28 height: 100px; 29 vertical-align: top; 30 width: 200px; 31 } 32 33 img#reference-overlapped-red 34 { 35 bottom: 100px; 36 position: relative; 37 z-index: -1; 38 } 39 </style> 40 </head> 41 42 <body> 43 44 <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> 45 46 <div><iframe src="support/embedded-doc-for-background-size-root-vrl-004.html">This test requires an user agent with capability to embed an HTML document thanks to the HTML <iframe> element.</iframe></div> 47 48 <div><img id="reference-overlapped-red" src="support/100x100-red.png" alt="Image download support must be enabled"></div> 49 50 </body> 51 </html>