Chromium Code Reviews Chromium Code Reviews
Issue 287163010:
Notify <picture> elements when a media query (potentially) changes (Closed)
Base URL: https://chromium.googlesource.com/chromium/blink.git@master| Index: LayoutTests/fast/hidpi/image-srcset-react-to-media-changes.html |
| diff --git a/LayoutTests/fast/hidpi/image-srcset-react-to-media-changes.html b/LayoutTests/fast/hidpi/image-srcset-react-to-media-changes.html |
| new file mode 100644 |
| index 0000000000000000000000000000000000000000..7133e87ef976330b9b6785380c432c2854abbd6a |
| --- /dev/null |
| +++ b/LayoutTests/fast/hidpi/image-srcset-react-to-media-changes.html |
| @@ -0,0 +1,37 @@ |
| +<!DOCTYPE html> |
|
Yoav Weiss
2014/07/02 18:46:05
Can you change the file name into saying "picture"
|
| +<script src="../../resources/js-test.js"></script> |
| +<script> |
| +var jsTestIsAsync = true; |
| +var img; |
| + |
| +function runTest() { |
| + var iframe = document.getElementById("f"); |
|
Yoav Weiss
2014/07/02 18:46:05
I think most layout tests have a 4 space indent.
|
| + var iframeDoc = iframe.contentWindow.document; |
| + |
| + iframeDoc.body.innerHTML = '<picture id="pic">' + |
| + '<source media="(max-width: 90px)" srcset="resources/blue-100-px-square.png"></source>' + |
| + '<source media="(max-width: 120px)" srcset="resources/green-400-px-square.png"></source>' + |
| + '</picture>'; |
| + |
| + img = iframeDoc.createElement('img'); |
| + |
| + var first = true; |
| + img.onload = function() { |
| + if (first) { |
| + shouldNotBe('-1', 'img.currentSrc.indexOf("green-400")'); |
| + iframe.style.width = "80px"; |
| + } else { |
| + shouldNotBe('-1', 'img.currentSrc.indexOf("blue-100")'); |
| + finishJSTest(); |
| + } |
| + first = false; |
|
Yoav Weiss
2014/07/02 18:46:05
A nit, but the assignment to first can move up int
|
| + }; |
| + img.onerror = function() { |
| + testFailed('Image should have loaded'); |
| + }; |
| + iframeDoc.getElementById('pic').appendChild(img); |
| +} |
| +</script> |
| + |
| +<body onload="runTest()"> |
| +<iframe id="f" style="width: 100px;"></iframe> |
