Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Added 4 background-size (with no intrinsic and no ratio) tests
- Loading branch information
Showing
9 changed files
with
347 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,48 @@ | ||
| <!DOCTYPE html> | ||
|
|
||
| <meta charset="UTF-8"> | ||
|
|
||
| <title>CSS Backgrounds and Borders Test: background-size with <length> value and 'auto' and image with no intrinsic size and no intrinsic ratio</title> | ||
|
|
||
| <!-- | ||
| Credit should go to Henrik Andersson | ||
| for originally reporting this issue. | ||
| --> | ||
|
|
||
| <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> | ||
| <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size"> | ||
|
|
||
| <!-- | ||
| [css-backgrounds] [css-images] Interop for sizing gradients with only width | ||
| http://lists.w3.org/Archives/Public/www-style/2017Apr/0029.html | ||
| Issue 935057: background-size with only one [ <length | <percent> ] value with SVG image with no intrinsic ratio incorrect | ||
| https://bugs.chromium.org/p/chromium/issues/detail?id=935057 | ||
| Bug 170834: background-size with 2nd value is 'auto' and the image has no intrinsic size and no intrinsic ratio incorrectly rendered | ||
| https://bugs.webkit.org/show_bug.cgi?id=170834 | ||
| --> | ||
|
|
||
| <link rel="match" href="reference/background-size-041-ref.html"> | ||
|
|
||
| <meta content="" name="flags"> | ||
| <meta content="This test checks that when one 'background-size' is 'auto' and the image has no intrinsic size and no intrinsic ratio, then it should use 100%. In this test, the 'auto' value should use 100% of the height of the background positioning area of the div, which is 400px." name="assert"> | ||
|
|
||
| <style> | ||
| div | ||
| { | ||
| background-clip: content-box; /* border-box is the initial background-clip value */ | ||
| background-image: linear-gradient(orange, blue); | ||
| background-origin: border-box; /* padding-box is the initial background-origin value */ | ||
| background-position: center; | ||
| background-repeat: no-repeat; | ||
| background-size: 200px auto; | ||
| border: black solid 40px; | ||
| height: 400px; | ||
| width: 400px; | ||
| } | ||
| </style> | ||
|
|
||
| <div></div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,48 @@ | ||
| <!DOCTYPE html> | ||
|
|
||
| <meta charset="UTF-8"> | ||
|
|
||
| <title>CSS Backgrounds and Borders Test: background-size with <percent> value and 'auto' and image with no intrinsic size and no intrinsic ratio</title> | ||
|
|
||
| <!-- | ||
| Credit should go to Henrik Andersson | ||
| for originally reporting this issue. | ||
| --> | ||
|
|
||
| <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> | ||
| <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size"> | ||
|
|
||
| <!-- | ||
| [css-backgrounds] [css-images] Interop for sizing gradients with only width | ||
| http://lists.w3.org/Archives/Public/www-style/2017Apr/0029.html | ||
| Issue 935057: background-size with only one [ <length | <percent> ] value with SVG image with no intrinsic ratio incorrect | ||
| https://bugs.chromium.org/p/chromium/issues/detail?id=935057 | ||
| Bug 170834: background-size with 2nd value is 'auto' and the image has no intrinsic size and no intrinsic ratio incorrectly rendered | ||
| https://bugs.webkit.org/show_bug.cgi?id=170834 | ||
| --> | ||
|
|
||
| <link rel="match" href="reference/background-size-042-ref.html"> | ||
|
|
||
| <meta content="" name="flags"> | ||
| <meta content="This test checks that when one 'background-size' is 'auto' and the image has no intrinsic size and no intrinsic ratio, then it should use 100%. In this test, the 'auto' value should use 100% of the height of the background positioning area of the div, which is 400px." name="assert"> | ||
|
|
||
| <style> | ||
| div | ||
| { | ||
| background-clip: content-box; /* border-box is the initial background-clip value */ | ||
| background-image: linear-gradient(orange, blue); | ||
| background-origin: border-box; /* padding-box is the initial background-origin value */ | ||
| background-position: center; | ||
| background-repeat: no-repeat; | ||
| background-size: 50% auto; | ||
| border: black solid 40px; | ||
| height: 400px; | ||
| width: 400px; | ||
| } | ||
| </style> | ||
|
|
||
| <div></div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,48 @@ | ||
| <!DOCTYPE html> | ||
|
|
||
| <meta charset="UTF-8"> | ||
|
|
||
| <title>CSS Backgrounds and Borders Test: background-size with <length> value and 'auto' and image with no intrinsic size and no intrinsic ratio</title> | ||
|
|
||
| <!-- | ||
| Credit should go to Henrik Andersson | ||
| for originally reporting this issue. | ||
| --> | ||
|
|
||
| <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> | ||
| <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size"> | ||
|
|
||
| <!-- | ||
| [css-backgrounds] [css-images] Interop for sizing gradients with only width | ||
| http://lists.w3.org/Archives/Public/www-style/2017Apr/0029.html | ||
| Issue 935057: background-size with only one [ <length | <percent> ] value with SVG image with no intrinsic ratio incorrect | ||
| https://bugs.chromium.org/p/chromium/issues/detail?id=935057 | ||
| Bug 170834: background-size with 2nd value is 'auto' and the image has no intrinsic size and no intrinsic ratio incorrectly rendered | ||
| https://bugs.webkit.org/show_bug.cgi?id=170834 | ||
| --> | ||
|
|
||
| <link rel="match" href="reference/background-size-043-ref.html"> | ||
|
|
||
| <meta content="" name="flags"> | ||
| <meta content="This test checks that when one 'background-size' is 'auto' and the image has no intrinsic size and no intrinsic ratio, then it should use 100%. In this test, the 'auto' value should use 100% of the height of the background positioning area of the div, which is 400px." name="assert"> | ||
|
|
||
| <style> | ||
| div | ||
| { | ||
| background-clip: content-box; /* border-box is the initial background-clip value */ | ||
| background-image: url("support/orange-intrinsic-none.svg"); | ||
| background-origin: border-box; /* padding-box is the initial background-origin value */ | ||
| background-position: center; | ||
| background-repeat: no-repeat; | ||
| background-size: 200px auto; | ||
| border: black solid 40px; | ||
| height: 400px; | ||
| width: 400px; | ||
| } | ||
| </style> | ||
|
|
||
| <div></div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,48 @@ | ||
| <!DOCTYPE html> | ||
|
|
||
| <meta charset="UTF-8"> | ||
|
|
||
| <title>CSS Backgrounds and Borders Test: background-size with <percent> value and 'auto' and image with no intrinsic size and no intrinsic ratio</title> | ||
|
|
||
| <!-- | ||
| Credit should go to Henrik Andersson | ||
| for originally reporting this issue. | ||
| --> | ||
|
|
||
| <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> | ||
| <link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-size"> | ||
|
|
||
| <!-- | ||
| [css-backgrounds] [css-images] Interop for sizing gradients with only width | ||
| http://lists.w3.org/Archives/Public/www-style/2017Apr/0029.html | ||
| Issue 935057: background-size with only one [ <length | <percent> ] value with SVG image with no intrinsic ratio incorrect | ||
| https://bugs.chromium.org/p/chromium/issues/detail?id=935057 | ||
| Bug 170834: background-size with 2nd value is 'auto' and the image has no intrinsic size and no intrinsic ratio incorrectly rendered | ||
| https://bugs.webkit.org/show_bug.cgi?id=170834 | ||
| --> | ||
|
|
||
| <link rel="match" href="reference/background-size-044-ref.html"> | ||
|
|
||
| <meta content="" name="flags"> | ||
| <meta content="This test checks that when one 'background-size' is 'auto' and the image has no intrinsic size and no intrinsic ratio, then it should use 100%. In this test, the 'auto' value should use 100% of the height of the background positioning area of the div, which is 400px." name="assert"> | ||
|
|
||
| <style> | ||
| div | ||
| { | ||
| background-clip: content-box; /* border-box is the initial background-clip value */ | ||
| background-image: url("support/orange-intrinsic-none.svg"); | ||
| background-origin: border-box; /* padding-box is the initial background-origin value */ | ||
| background-position: center; | ||
| background-repeat: no-repeat; | ||
| background-size: 50% auto; | ||
| border: black solid 40px; | ||
| height: 400px; | ||
| width: 400px; | ||
| } | ||
| </style> | ||
|
|
||
| <div></div> |
49 changes: 49 additions & 0 deletions
49
css/css-backgrounds/reference/background-size-041-ref.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,49 @@ | ||
| <!DOCTYPE html> | ||
|
|
||
| <title>CSS Reftest Reference</title> | ||
|
|
||
| <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> | ||
|
|
||
| <style> | ||
| div#black-border | ||
| { | ||
| border: black solid 40px; | ||
| height: 400px; | ||
| width: 400px; | ||
| } | ||
|
|
||
| div#gradient | ||
| { | ||
| background-image: linear-gradient(orange, blue); | ||
| height: 120%; /* computes to 480px */ | ||
| margin: -40px auto 0px; | ||
| /* the gradient block is horizontally centered inside div#black-border */ | ||
| width: 200px; | ||
| } | ||
|
|
||
| div#mask1 , div#mask2 | ||
| { | ||
| background-color: black; | ||
| height: 40px; | ||
| left: 8px; | ||
| position: absolute; | ||
| width: 480px; | ||
| } | ||
|
|
||
| div#mask1 | ||
| { | ||
| top: 8px; | ||
| } | ||
|
|
||
| div#mask2 | ||
| { | ||
| top: 448px; /* 8px + 40px + 400px */ | ||
| } | ||
|
|
||
| </style> | ||
|
|
||
| <div id="black-border"><div id="gradient"></div></div> | ||
|
|
||
| <div id="mask1"></div> | ||
|
|
||
| <div id="mask2"></div> |
49 changes: 49 additions & 0 deletions
49
css/css-backgrounds/reference/background-size-042-ref.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,49 @@ | ||
| <!DOCTYPE html> | ||
|
|
||
| <title>CSS Reftest Reference</title> | ||
|
|
||
| <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> | ||
|
|
||
| <style> | ||
| div#black-border | ||
| { | ||
| border: black solid 40px; | ||
| height: 400px; | ||
| width: 400px; | ||
| } | ||
|
|
||
| div#gradient | ||
| { | ||
| background-image: linear-gradient(orange, blue); | ||
| height: 120%; /* computes to 480px */ | ||
| margin: -40px auto 0px; | ||
| /* the gradient block is horizontally centered inside div#black-border */ | ||
| width: 240px; | ||
| } | ||
|
|
||
| div#mask1 , div#mask2 | ||
| { | ||
| background-color: black; | ||
| height: 40px; | ||
| left: 8px; | ||
| position: absolute; | ||
| width: 480px; | ||
| } | ||
|
|
||
| div#mask1 | ||
| { | ||
| top: 8px; | ||
| } | ||
|
|
||
| div#mask2 | ||
| { | ||
| top: 448px; /* 8px + 40px + 400px */ | ||
| } | ||
|
|
||
| </style> | ||
|
|
||
| <div id="black-border"><div id="gradient"></div></div> | ||
|
|
||
| <div id="mask1"></div> | ||
|
|
||
| <div id="mask2"></div> |
27 changes: 27 additions & 0 deletions
27
css/css-backgrounds/reference/background-size-043-ref.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,27 @@ | ||
| <!DOCTYPE html> | ||
|
|
||
| <title>CSS Reftest Reference</title> | ||
|
|
||
| <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> | ||
|
|
||
| <style> | ||
| div#black-border | ||
| { | ||
| border: black solid 40px; | ||
| height: 400px; | ||
| width: 400px; | ||
| } | ||
|
|
||
| div#inner-orange | ||
| { | ||
| background-color: orange; | ||
| border-left: blue solid 16px; | ||
| border-right: blue solid 16px; | ||
| height: 100%; | ||
| margin: 0px auto; | ||
| /* the orange block is horizontally centered inside div#black-border */ | ||
| width: 168px; /* 200 - 32 == 168 */ | ||
| } | ||
| </style> | ||
|
|
||
| <div id="black-border"><div id="inner-orange"></div></div> |
27 changes: 27 additions & 0 deletions
27
css/css-backgrounds/reference/background-size-044-ref.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,27 @@ | ||
| <!DOCTYPE html> | ||
|
|
||
| <title>CSS Reftest Reference</title> | ||
|
|
||
| <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> | ||
|
|
||
| <style> | ||
| div#black-border | ||
| { | ||
| border: black solid 40px; | ||
| height: 400px; | ||
| width: 400px; | ||
| } | ||
|
|
||
| div#inner-orange | ||
| { | ||
| background-color: orange; | ||
| border-left: blue solid 16px; | ||
| border-right: blue solid 16px; | ||
| height: 100%; | ||
| margin: 0px auto; | ||
| /* the orange block is horizontally centered inside div#black-border */ | ||
| width: 208px; /* [(40 + 400 + 40) / 2 ] - 32 == 208px */ | ||
| } | ||
| </style> | ||
|
|
||
| <div id="black-border"><div id="inner-orange"></div></div> |
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.