LayoutTests/fast/picture/image-picture-1x.html - WebKit - Git at Google

 <!DOCTYPE html>
 	<script src="../../resources/js-test.js"></script>
 	<script src="resources/currentSrcHelper.js"></script>
 	<script>
 	    if (window.testRunner)
 	        testRunner.dumpAsText();

         addEventListener("load", function() {
 	        shouldBe('document.getElementById("canary").clientWidth', '75');
 	        shouldBe('currentSrcFileName("canary")', '"blue_rect.jpg?0"');
 	        shouldBe('document.getElementById("simple").clientWidth', '800');
 	        shouldBe('currentSrcFileName("simple")', '"image-set-2x.png?2"');
 	        shouldBe('document.getElementById("multiple").clientWidth', '800');
 	        shouldBe('currentSrcFileName("multiple")', '"image-set-2x.png?2"');
 	        shouldBe('document.getElementById("other_children").clientWidth', '800');
 	        shouldBe('currentSrcFileName("other_children")', '"image-set-2x.png?2"');
 	        shouldBe('document.getElementById("img_before_source").clientWidth', '75');
 	        shouldBe('currentSrcFileName("img_before_source")', '"blue_rect.jpg?1"');
 	        shouldBe('document.getElementById("unknown_type").clientWidth', '1600');
 	        shouldBe('currentSrcFileName("unknown_type")', '"image-set-4x.png?3"');
             shouldBe('document.getElementById("svg_type").clientWidth', '800');
 	        shouldBe('currentSrcFileName("svg_type")', '"image-set-2x.png?2"');
 	        shouldBe('document.getElementById("empty_type").clientWidth', '800');
 	        shouldBe('currentSrcFileName("empty_type")', '"image-set-2x.png?2"');
 	        shouldBe('document.getElementById("whitespace_type").clientWidth', '800');
 	        shouldBe('currentSrcFileName("whitespace_type")', '"image-set-2x.png?2"');
 	        shouldBe('document.getElementById("parameter_type").clientWidth', '800');
 	        shouldBe('currentSrcFileName("parameter_type")', '"image-set-2x.png?2"');
 	        shouldBe('document.getElementById("empty_srcset").clientWidth', '1600');
 	        shouldBe('currentSrcFileName("empty_srcset")', '"image-set-4x.png?3"');
 	        shouldBe('document.getElementById("no_srcset").clientWidth', '1600');
 	        shouldBe('currentSrcFileName("no_srcset")', '"image-set-4x.png?3"');
 	    }, false);
 	</script>
 	<!-- A canary image to see that the test is actually working -->
 	<img id="canary" src="resources/blue_rect.jpg?0">
 	<!-- simple picture construct -->
 	<picture>
 	    <source media="(max-width: 400px)" sizes="400px" srcset="../hidpi/resources/image-set-1x.png?1 400w, ../hidpi/resources/image-set-2x.png?1 800w,
 	        resources/image-set-4x.png?1 1600w">
 	    <source media="(max-width: 800px)" sizes="800px" srcset="../hidpi/resources/image-set-1x.png?2 400w, ../hidpi/resources/image-set-2x.png?2 800w,
 	        resources/image-set-4x.png?2 1600w">
 	    <source media="(max-width: 1600px)" sizes="1600px" srcset="../hidpi/resources/image-set-1x.png?3 400w, ../hidpi/resources/image-set-2x.png?3 800w,
 	        resources/image-set-4x.png?3 1600w">
 	    <img id="simple" src="resources/blue_rect.jpg?1">
 	</picture>
 	<!-- Multiple img elements -->
 	<picture>
 	    <source media="(max-width: 400px)" sizes="400px" srcset="../hidpi/resources/image-set-1x.png?1 400w, ../hidpi/resources/image-set-2x.png?1 800w,
 	        resources/image-set-4x.png?1 1600w">
 	    <source media="(max-width: 800px)" sizes="800px" srcset="../hidpi/resources/image-set-1x.png?2 400w, ../hidpi/resources/image-set-2x.png?2 800w,
 	        resources/image-set-4x.png?2 1600w">
 	    <source media="(max-width: 1600px)" sizes="1600px" srcset="../hidpi/resources/image-set-1x.png?3 400w, ../hidpi/resources/image-set-2x.png?3 800w,
 	        resources/image-set-4x.png?3 1600w">
 	    <img src="resources/blue_rect.jpg?1">
 	    <img id="multiple" src="resources/blue_rect.jpg?1">
 	</picture>
 	<!-- non-source children - should be ignored-->
 	<picture>
 	    <div>some text</div>
 	    <source media="(max-width: 400px)" sizes="400px" srcset="../hidpi/resources/image-set-1x.png?1 400w, ../hidpi/resources/image-set-2x.png?1 800w,
 	        resources/image-set-4x.png?1 1600w">
 	    <source media="(max-width: 800px)" sizes="800px" srcset="../hidpi/resources/image-set-1x.png?2 400w, ../hidpi/resources/image-set-2x.png?2 800w,
 	        resources/image-set-4x.png?2 1600w">
 	    <source media="(max-width: 1600px)" sizes="1600px" srcset="../hidpi/resources/image-set-1x.png?3 400w, ../hidpi/resources/image-set-2x.png?3 800w,
 	        resources/image-set-4x.png?3 1600w">
 	    <img id="other_children" src="resources/blue_rect.jpg?1">
 	</picture>
 	<!-- img before its source siblings - should ignore its siblings -->
 	<picture>
 	    <img id="img_before_source" src="resources/blue_rect.jpg?1">
 	    <source media="(max-width: 400px)" sizes="400px" srcset="../hidpi/resources/image-set-1x.png?1 400w, ../hidpi/resources/image-set-2x.png?1 800w,
 	        resources/image-set-4x.png?1 1600w">
 	    <source media="(max-width: 800px)" sizes="800px" srcset="../hidpi/resources/image-set-1x.png?2 400w, ../hidpi/resources/image-set-2x.png?2 800w,
 	        resources/image-set-4x.png?2 1600w">
 	    <source media="(max-width: 1600px)" sizes="1600px" srcset="../hidpi/resources/image-set-1x.png?3 400w, ../hidpi/resources/image-set-2x.png?3 800w,
 	        resources/image-set-4x.png?3 1600w">
 	</picture>
 	<!-- source with unknown type - should be ignored -->
 	<picture>
 	    <source media="(max-width: 400px)" sizes="400px" srcset="../hidpi/resources/image-set-1x.png?1 400w, ../hidpi/resources/image-set-2x.png?1 800w,
 	        resources/image-set-4x.png?1 1600w">
 	    <source media="(max-width: 800px)" type="image/nonsense" sizes="800px" srcset="../hidpi/resources/image-set-1x.png?2 400w, ../hidpi/resources/image-set-2x.png?2 800w,
 	        resources/image-set-4x.png?2 1600w">
 	    <source media="(max-width: 1600px)" sizes="1600px" srcset="../hidpi/resources/image-set-1x.png?3 400w, ../hidpi/resources/image-set-2x.png?3 800w,
 	        resources/image-set-4x.png?3 1600w">
 	    <img id="unknown_type" src="resources/blue_rect.jpg?1">
 	</picture>
 	<!-- SVG source - should not be ignored -->
 	<picture>
 	    <source media="(max-width: 400px)" sizes="400px" srcset="../hidpi/resources/image-set-1x.png?1 400w, ../hidpi/resources/image-set-2x.png?1 800w,
 	        resources/image-set-4x.png?1 1600w">
 	    <source media="(max-width: 800px)" type="image/svg+xml" sizes="800px" srcset="../hidpi/resources/image-set-1x.png?2 400w, ../hidpi/resources/image-set-2x.png?2 800w,
 	        resources/image-set-4x.png?2 1600w">
 	    <source media="(max-width: 1600px)" sizes="1600px" srcset="../hidpi/resources/image-set-1x.png?3 400w, ../hidpi/resources/image-set-2x.png?3 800w,
 	        resources/image-set-4x.png?3 1600w">
 	    <img id="svg_type" src="resources/blue_rect.jpg?1">
 	</picture>
 	<!-- Empty type - should not be ignored -->
 	<picture>
 	    <source media="(max-width: 400px)" sizes="400px" srcset="../hidpi/resources/image-set-1x.png?1 400w, ../hidpi/resources/image-set-2x.png?1 800w,
 	        resources/image-set-4x.png?1 1600w">
 	    <source media="(max-width: 800px)" type="" sizes="800px" srcset="../hidpi/resources/image-set-1x.png?2 400w, ../hidpi/resources/image-set-2x.png?2 800w,
 	        resources/image-set-4x.png?2 1600w">
 	    <source media="(max-width: 1600px)" sizes="1600px" srcset="../hidpi/resources/image-set-1x.png?3 400w, ../hidpi/resources/image-set-2x.png?3 800w,
 	        resources/image-set-4x.png?3 1600w">
 	    <img id="empty_type" src="resources/blue_rect.jpg?1">
 	</picture>
 	<!-- whitespace type - should not be ignored -->
 	<picture>
 	    <source media="(max-width: 400px)" sizes="400px" srcset="../hidpi/resources/image-set-1x.png?1 400w, ../hidpi/resources/image-set-2x.png?1 800w,
 	        resources/image-set-4x.png?1 1600w">
 	    <source media="(max-width: 800px)" type=" " sizes="800px" srcset="../hidpi/resources/image-set-1x.png?2 400w, ../hidpi/resources/image-set-2x.png?2 800w,
 	        resources/image-set-4x.png?2 1600w">
 	    <source media="(max-width: 1600px)" sizes="1600px" srcset="../hidpi/resources/image-set-1x.png?3 400w, ../hidpi/resources/image-set-2x.png?3 800w,
 	        resources/image-set-4x.png?3 1600w">
 	    <img id="whitespace_type" src="resources/blue_rect.jpg?1">
 	</picture>
 	<!-- parameter type - should not be ignored -->
 	<picture>
 	    <source media="(max-width: 400px)" sizes="400px" srcset="../hidpi/resources/image-set-1x.png?1 400w, ../hidpi/resources/image-set-2x.png?1 800w,
 	        resources/image-set-4x.png?1 1600w">
 	    <source media="(max-width: 800px)" type="image/png;bla=bla" sizes="800px" srcset="../hidpi/resources/image-set-1x.png?2 400w, ../hidpi/resources/image-set-2x.png?2 800w,
 	        resources/image-set-4x.png?2 1600w">
 	    <source media="(max-width: 1600px)" sizes="1600px" srcset="../hidpi/resources/image-set-1x.png?3 400w, ../hidpi/resources/image-set-2x.png?3 800w,
 	        resources/image-set-4x.png?3 1600w">
 	    <img id="parameter_type" src="resources/blue_rect.jpg?1">
 	</picture>
 	<!-- source with empty srcset - should be ignored -->
 	<picture>
 	    <source media="(max-width: 400px)" sizes="400px" srcset="../hidpi/resources/image-set-1x.png?1 400w, ../hidpi/resources/image-set-2x.png?1 800w,
 	        resources/image-set-4x.png?1 1600w">
 	    <source media="(max-width: 800px)" sizes="800px" srcset=", ,  ">
 	    <source media="(max-width: 1600px)" sizes="1600px" srcset="../hidpi/resources/image-set-1x.png?3 400w, ../hidpi/resources/image-set-2x.png?3 800w,
 	        resources/image-set-4x.png?3 1600w">
 	    <img id="empty_srcset" src="resources/blue_rect.jpg?1">
 	</picture>
 	<!-- source with no srcset - should be ignored -->
 	<picture>
 	    <source media="(max-width: 400px)" sizes="400px" srcset="../hidpi/resources/image-set-1x.png?1 400w, ../hidpi/resources/image-set-2x.png?1 800w,
 	        resources/image-set-4x.png?1 1600w">
 	    <source media="(max-width: 800px)" sizes="800px">
 	    <source media="(max-width: 1600px)" sizes="1600px" srcset="../hidpi/resources/image-set-1x.png?3 400w, ../hidpi/resources/image-set-2x.png?3 800w,
 	        resources/image-set-4x.png?3 1600w">
 	    <img id="no_srcset" src="resources/blue_rect.jpg?1">
 	</picture>
	<!DOCTYPE html>
	<script src="../../resources/js-test.js"></script>
	<script src="resources/currentSrcHelper.js"></script>
	<script>
	if (window.testRunner)
	testRunner.dumpAsText();

	addEventListener("load", function() {
	shouldBe('document.getElementById("canary").clientWidth', '75');
	shouldBe('currentSrcFileName("canary")', '"blue_rect.jpg?0"');
	shouldBe('document.getElementById("simple").clientWidth', '800');
	shouldBe('currentSrcFileName("simple")', '"image-set-2x.png?2"');
	shouldBe('document.getElementById("multiple").clientWidth', '800');
	shouldBe('currentSrcFileName("multiple")', '"image-set-2x.png?2"');
	shouldBe('document.getElementById("other_children").clientWidth', '800');
	shouldBe('currentSrcFileName("other_children")', '"image-set-2x.png?2"');
	shouldBe('document.getElementById("img_before_source").clientWidth', '75');
	shouldBe('currentSrcFileName("img_before_source")', '"blue_rect.jpg?1"');
	shouldBe('document.getElementById("unknown_type").clientWidth', '1600');
	shouldBe('currentSrcFileName("unknown_type")', '"image-set-4x.png?3"');
	shouldBe('document.getElementById("svg_type").clientWidth', '800');
	shouldBe('currentSrcFileName("svg_type")', '"image-set-2x.png?2"');
	shouldBe('document.getElementById("empty_type").clientWidth', '800');
	shouldBe('currentSrcFileName("empty_type")', '"image-set-2x.png?2"');
	shouldBe('document.getElementById("whitespace_type").clientWidth', '800');
	shouldBe('currentSrcFileName("whitespace_type")', '"image-set-2x.png?2"');
	shouldBe('document.getElementById("parameter_type").clientWidth', '800');
	shouldBe('currentSrcFileName("parameter_type")', '"image-set-2x.png?2"');
	shouldBe('document.getElementById("empty_srcset").clientWidth', '1600');
	shouldBe('currentSrcFileName("empty_srcset")', '"image-set-4x.png?3"');
	shouldBe('document.getElementById("no_srcset").clientWidth', '1600');
	shouldBe('currentSrcFileName("no_srcset")', '"image-set-4x.png?3"');
	}, false);
	</script>
	<!-- A canary image to see that the test is actually working -->
	<img id="canary" src="resources/blue_rect.jpg?0">
	<!-- simple picture construct -->
	<picture>
	<source media="(max-width: 400px)" sizes="400px" srcset="../hidpi/resources/image-set-1x.png?1 400w, ../hidpi/resources/image-set-2x.png?1 800w,
	resources/image-set-4x.png?1 1600w">
	<source media="(max-width: 800px)" sizes="800px" srcset="../hidpi/resources/image-set-1x.png?2 400w, ../hidpi/resources/image-set-2x.png?2 800w,
	resources/image-set-4x.png?2 1600w">
	<source media="(max-width: 1600px)" sizes="1600px" srcset="../hidpi/resources/image-set-1x.png?3 400w, ../hidpi/resources/image-set-2x.png?3 800w,
	resources/image-set-4x.png?3 1600w">
	<img id="simple" src="resources/blue_rect.jpg?1">
	</picture>
	<!-- Multiple img elements -->
	<picture>
	<source media="(max-width: 400px)" sizes="400px" srcset="../hidpi/resources/image-set-1x.png?1 400w, ../hidpi/resources/image-set-2x.png?1 800w,
	resources/image-set-4x.png?1 1600w">
	<source media="(max-width: 800px)" sizes="800px" srcset="../hidpi/resources/image-set-1x.png?2 400w, ../hidpi/resources/image-set-2x.png?2 800w,
	resources/image-set-4x.png?2 1600w">
	<source media="(max-width: 1600px)" sizes="1600px" srcset="../hidpi/resources/image-set-1x.png?3 400w, ../hidpi/resources/image-set-2x.png?3 800w,
	resources/image-set-4x.png?3 1600w">
	<img src="resources/blue_rect.jpg?1">
	<img id="multiple" src="resources/blue_rect.jpg?1">
	</picture>
	<!-- non-source children - should be ignored-->
	<picture>
	<div>some text</div>
	<source media="(max-width: 400px)" sizes="400px" srcset="../hidpi/resources/image-set-1x.png?1 400w, ../hidpi/resources/image-set-2x.png?1 800w,
	resources/image-set-4x.png?1 1600w">
	<source media="(max-width: 800px)" sizes="800px" srcset="../hidpi/resources/image-set-1x.png?2 400w, ../hidpi/resources/image-set-2x.png?2 800w,
	resources/image-set-4x.png?2 1600w">
	<source media="(max-width: 1600px)" sizes="1600px" srcset="../hidpi/resources/image-set-1x.png?3 400w, ../hidpi/resources/image-set-2x.png?3 800w,
	resources/image-set-4x.png?3 1600w">
	<img id="other_children" src="resources/blue_rect.jpg?1">
	</picture>
	<!-- img before its source siblings - should ignore its siblings -->
	<picture>
	<img id="img_before_source" src="resources/blue_rect.jpg?1">
	<source media="(max-width: 400px)" sizes="400px" srcset="../hidpi/resources/image-set-1x.png?1 400w, ../hidpi/resources/image-set-2x.png?1 800w,
	resources/image-set-4x.png?1 1600w">
	<source media="(max-width: 800px)" sizes="800px" srcset="../hidpi/resources/image-set-1x.png?2 400w, ../hidpi/resources/image-set-2x.png?2 800w,
	resources/image-set-4x.png?2 1600w">
	<source media="(max-width: 1600px)" sizes="1600px" srcset="../hidpi/resources/image-set-1x.png?3 400w, ../hidpi/resources/image-set-2x.png?3 800w,
	resources/image-set-4x.png?3 1600w">
	</picture>
	<!-- source with unknown type - should be ignored -->
	<picture>
	<source media="(max-width: 400px)" sizes="400px" srcset="../hidpi/resources/image-set-1x.png?1 400w, ../hidpi/resources/image-set-2x.png?1 800w,
	resources/image-set-4x.png?1 1600w">
	<source media="(max-width: 800px)" type="image/nonsense" sizes="800px" srcset="../hidpi/resources/image-set-1x.png?2 400w, ../hidpi/resources/image-set-2x.png?2 800w,
	resources/image-set-4x.png?2 1600w">
	<source media="(max-width: 1600px)" sizes="1600px" srcset="../hidpi/resources/image-set-1x.png?3 400w, ../hidpi/resources/image-set-2x.png?3 800w,
	resources/image-set-4x.png?3 1600w">
	<img id="unknown_type" src="resources/blue_rect.jpg?1">
	</picture>
	<!-- SVG source - should not be ignored -->
	<picture>
	<source media="(max-width: 400px)" sizes="400px" srcset="../hidpi/resources/image-set-1x.png?1 400w, ../hidpi/resources/image-set-2x.png?1 800w,
	resources/image-set-4x.png?1 1600w">
	<source media="(max-width: 800px)" type="image/svg+xml" sizes="800px" srcset="../hidpi/resources/image-set-1x.png?2 400w, ../hidpi/resources/image-set-2x.png?2 800w,
	resources/image-set-4x.png?2 1600w">
	<source media="(max-width: 1600px)" sizes="1600px" srcset="../hidpi/resources/image-set-1x.png?3 400w, ../hidpi/resources/image-set-2x.png?3 800w,
	resources/image-set-4x.png?3 1600w">
	<img id="svg_type" src="resources/blue_rect.jpg?1">
	</picture>
	<!-- Empty type - should not be ignored -->
	<picture>
	<source media="(max-width: 400px)" sizes="400px" srcset="../hidpi/resources/image-set-1x.png?1 400w, ../hidpi/resources/image-set-2x.png?1 800w,
	resources/image-set-4x.png?1 1600w">
	<source media="(max-width: 800px)" type="" sizes="800px" srcset="../hidpi/resources/image-set-1x.png?2 400w, ../hidpi/resources/image-set-2x.png?2 800w,
	resources/image-set-4x.png?2 1600w">
	<source media="(max-width: 1600px)" sizes="1600px" srcset="../hidpi/resources/image-set-1x.png?3 400w, ../hidpi/resources/image-set-2x.png?3 800w,
	resources/image-set-4x.png?3 1600w">
	<img id="empty_type" src="resources/blue_rect.jpg?1">
	</picture>
	<!-- whitespace type - should not be ignored -->
	<picture>
	<source media="(max-width: 400px)" sizes="400px" srcset="../hidpi/resources/image-set-1x.png?1 400w, ../hidpi/resources/image-set-2x.png?1 800w,
	resources/image-set-4x.png?1 1600w">
	<source media="(max-width: 800px)" type=" " sizes="800px" srcset="../hidpi/resources/image-set-1x.png?2 400w, ../hidpi/resources/image-set-2x.png?2 800w,
	resources/image-set-4x.png?2 1600w">
	<source media="(max-width: 1600px)" sizes="1600px" srcset="../hidpi/resources/image-set-1x.png?3 400w, ../hidpi/resources/image-set-2x.png?3 800w,
	resources/image-set-4x.png?3 1600w">
	<img id="whitespace_type" src="resources/blue_rect.jpg?1">
	</picture>
	<!-- parameter type - should not be ignored -->
	<picture>
	<source media="(max-width: 400px)" sizes="400px" srcset="../hidpi/resources/image-set-1x.png?1 400w, ../hidpi/resources/image-set-2x.png?1 800w,
	resources/image-set-4x.png?1 1600w">
	<source media="(max-width: 800px)" type="image/png;bla=bla" sizes="800px" srcset="../hidpi/resources/image-set-1x.png?2 400w, ../hidpi/resources/image-set-2x.png?2 800w,
	resources/image-set-4x.png?2 1600w">
	<source media="(max-width: 1600px)" sizes="1600px" srcset="../hidpi/resources/image-set-1x.png?3 400w, ../hidpi/resources/image-set-2x.png?3 800w,
	resources/image-set-4x.png?3 1600w">
	<img id="parameter_type" src="resources/blue_rect.jpg?1">
	</picture>
	<!-- source with empty srcset - should be ignored -->
	<picture>
	<source media="(max-width: 400px)" sizes="400px" srcset="../hidpi/resources/image-set-1x.png?1 400w, ../hidpi/resources/image-set-2x.png?1 800w,
	resources/image-set-4x.png?1 1600w">
	<source media="(max-width: 800px)" sizes="800px" srcset=", , ">
	<source media="(max-width: 1600px)" sizes="1600px" srcset="../hidpi/resources/image-set-1x.png?3 400w, ../hidpi/resources/image-set-2x.png?3 800w,
	resources/image-set-4x.png?3 1600w">
	<img id="empty_srcset" src="resources/blue_rect.jpg?1">
	</picture>
	<!-- source with no srcset - should be ignored -->
	<picture>
	<source media="(max-width: 400px)" sizes="400px" srcset="../hidpi/resources/image-set-1x.png?1 400w, ../hidpi/resources/image-set-2x.png?1 800w,
	resources/image-set-4x.png?1 1600w">
	<source media="(max-width: 800px)" sizes="800px">
	<source media="(max-width: 1600px)" sizes="1600px" srcset="../hidpi/resources/image-set-1x.png?3 400w, ../hidpi/resources/image-set-2x.png?3 800w,
	resources/image-set-4x.png?3 1600w">
	<img id="no_srcset" src="resources/blue_rect.jpg?1">
	</picture>